@charset "utf-8";

/** --------------------------------------------------------------------------------
 * 共通
 */
body {
  font-size: 0.9em;
  line-height: 1.4;
}

strong {
  color: #00acee;
}

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
}

a:link,
a:visited {
  color: #20acd3;
  text-decoration: none;
}

/** --------------------------------------------------------------------------------
 * ヘッダー
 */
header {
  background-color: #24c0eb;
  padding: 10px 5px;
  border-bottom: 1px solid #dadada;
}

header h1{
  display: block;
  width: 130px;
  height: 40px;
  float: left;
}

header nav{
  float: right;
}

header nav li{
  float: left;
}

header nav li>a{
  display: block;
  height: 40px;
  width: 40px;
}

header nav li:last-child>a{
  margin-left: 5px;
}
 
header:after {
  content: '';
  display: block;
  clear: both;
}

header div.gnList{
position: absolute;
left: 0; top: 0px;
z-index: 1000;
width: 100%;
height: 100%;
display: none;
/* opacity: 0; */
padding: 0;
/* -webkit-transition: height 0.3s ease-in; */
/* -webkit-transition: opacity 0.7s ease-out 0.3s; */
background: rgba(255, 255, 255, 0.8);
overflow: hidden;
}
header div.gnList .floatingBlk{
position: absolute;
width: 100%;
}
header div.gnList ul{
margin: 40px 20px 15px;
border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
header div.gnList li{
height: 45px;
margin: 0;
border-bottom: 1px solid rgba(255,255,255, 0.3);
background: #015db2;/* #004380 */
font-size: 14px;
}
header div.gnList li:first-child{
border-top: 1px solid rgba(0,0,0, 0.1);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-top-left-radius: 4px;
-moz-border-top-right-radius: 4px;
-ms-border-top-left-radius: 4px;
-ms-border-top-right-radius: 4px;
}
header div.gnList li:last-child{
border: none;
height: 46px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-bottom-left-radius: 4px;
-moz-border-bottom-right-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-ms-border-bottom-right-radius: 4px;
}
header div.gnList li a{
display: block;
padding: 13px 0 9px 11px;
background: url(file:///C|/DOCUME%7E1/hagiwara/LOCALS%7E1/img/arw_right_wht.png) no-repeat 97% 50%;
background-size: 10px 13px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
-moz-text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
header div.gnList p.clsGnList{
width: 160px;
margin: 0 auto 12px;
text-align: center;
}
header div.gnList p.clsGnList a{
display: block;
padding: 2px 0 10px;
background: #015db2;
border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
}

/** --------------------------------------------------------------------------------
 * パンくず
 */
ol.pl {
  margin: 0;
  padding: 12px 5px 12px 10px;
  background-color: #000;
  list-style-type: none;
  color: #b5b5b5;
  font-size: 12px;
  border-bottom: 1px solid #333;
}

ol.pl li {
  display: inline;
}

ol.pl li a {
  padding: 5px 20px 5px 0;
  background: url(/assets/images/arrow_more.png) no-repeat right;
}

ol.pl li a {
  color: #20acd3;
  text-decoration: none;
}

ol.pl li a:hover {
  color: #20acd3;
}

/** --------------------------------------------------------------------------------
 * コンテンツ
 */
div#contents {
  padding: 10px;
}

.titlearea {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid #cacaca;
  margin-bottom: 15px
}

.outline {
  margin-bottom: 3px;
  font-size: 12px;
  color: #868686;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #20ACD3;
}

img.main {
  width: 100%;
}

.textarea {
  margin: 10px 0 20px;
}

.basictxt {
  font-size: 12px;
  color: #333;
}

.photoarea1 {
  padding: 3px 3px 0 3px;
  border: 1px solid #ccc;
  width: 260px;
  margin: 15px auto; 
}

.photoarea2 {
  width: 100%;
  margin: 15px auto; 
  overflow: hidden;
}

.photoarea1 p,
.photoarea2 p {
  text-align: center;
}

.ng_ok {
  font-size: 14px;
  font-weight: bold;
  color: #868686;
  line-height: 1.0;
  margin-top: 5px;
}

.comment {
  font-size: 11px;
  color: #868686;
  margin: 8px;
}

.yoko1 {
  width: 100%;
}

.yoko2 {
  width: 100%;
}

.photo {
  padding: 3px 3px 0 3px;
  border: 1px solid #ccc;
  width: 46%;
}

.left {
  float: left;
}

.right {
  float: right;
}

/** ----------------------------------------
 * ページャー
 */
#pager {
  background-color: #222;
  border-bottom: 1px #444 solid;
  font-size: 12px;
  text-align: center;
}

#pager:after {
  content: '';
  display: block;
  clear: both;
}

#pager li {
  float: left;
  width: 50%;
  list-style-type: none;
  background: url(/assets/images/border444.png) repeat-y right top;
  padding: 15px 0;
}

#pager li:last-child {
  background: none;
}

#pager li:not(.notlink) {
  color: #555;
}

#pager li a {
  color: #d6d0d0;
  text-decoration: none;
  display: block;
}

/** ----------------------------------------
 * フッタ カテゴリ
 */
.category {
}

.category h1 {
  font-weight: bold;
  padding: 10px;
  font-size: 11px;
  background-color: #f4f4f4;
}

.category p {
  padding: 7px 10px;
  font-size: 11px;
  color: #fff;
  background-color: #222;
}

.category ul li {
  list-style-type: none;
}

.category ul li a {
  padding: 10px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
  background: url(/assets/images/arrow_more.png) no-repeat 95% center;
  border-top: 1px solid #eae8e8;
}

.category ul li a:hover {
  color: #20acd3;
  background-color: #f1ebeb;
}

/** ----------------------------------------
 * タイトル
 */
.pagetitle {
  margin: 0;
  background: #d6d0d0;
  padding: 10px;
  font-size: 120%;
  color: #fff;
}

.secondtitle {
  margin: 13px 0 5px;
  padding: 0;
  color: #b5b5b5;
  font-size: 16px;
  font-weight: bold;
}

/** ----------------------------------------
 * お知らせ
 */
.info {
}

.info p {
  padding: 7px 10px;
  font-size: 12px;
  color: #5cceee;
  background-color: #222;
}

.info ul li {
  list-style-type: none;
}

.info ul li a {
  padding: 10px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
  background: url(/assets/images/arrow_more.png) no-repeat 95% center;
  border-top: 1px solid #eae8e8;
}

.info ul li a:hover {
  color: #20acd3;
  background-color: #f1ebeb;
}

/** ----------------------------------------
 * プロローグ
 */
.prologue {
  background-color: #f1ebeb;
  padding: 8px;
}

.prologue .img {
  margin: 0 -8px;
}

.prologue .boxtext {
  margin-top: 5px;
  padding: 10px;
  background-color: #24c0eb;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.prologue .boxtext p{
  color: #fff;
  font-size: 12px;
}

/** ----------------------------------------
 * 会員登録リンク
 */
.entry {
  clear: both;
  padding: 10px 0;
  background: #f4f4f4;
}

.entry p.btn {
  margin: 0 auto;
  border-radius: 2px;
  width: 180px;
  background: #5cceee;
}

.entry p.btn a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 180px;
  height: 50px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 1px 1px rgba(25,55,65,1);
  -webkit-box-shadow: 0 1px 2px rgba(22,22,22,1);
  -moz-box-shadow: 0 1px 2px rgba(22,22,22,1);
  box-shadow: 0 1px 2px rgba(22,22,22,1);
}

.entry p.btn a:hover,
.entry p.btn a:active {
  background-color: #20acd3;
  color: #fff;
}

/** ----------------------------------------
 * 目次
 */
.intro {
}

/** ----------------------------------------
 * チャプター名
 */
.chapter_title header {
  padding: 10px;
  background-color: #222;
  color: #fff;
}

.chapter_title .chapter {
  font-size: 12px;
  padding-bottom : 2px;
  color: #5cceee;
}

.chapter_title h2 {
  font-size: 14px;
  font-weight: bold;
}

.intro .chapter_sub {
  background: #d6d0d0;
  padding: 4px 6px;
}

.intro .chapter_sub p {
  font-size: 12px;
  font-weight: bold;
  color: #222;
}

.intro > div {
  border-bottom: 1px #eae8e8 solid;
  background-color: #fff;
}

.intro > div a {
  display: block;
  padding: 8px 35px 8px 8px;
  text-decoration: none;
  background: url(/assets/images/arrow_beige.png) no-repeat 95% center;
}

.intro > div a:after {
  content: '';
  display: block;
  clear: both;
}

.intro > div .outline {
  margin-bottom: 3px;
  font-size: 12px;
  color: #868686;
}

.intro > div .title {
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: bold;
  color: #20ACD3;
}

.intro .img {
  float: left;
}

.intro .outline,
.intro .title {
  padding-left: 68px;
}

.intro_tips .title {
  padding: 8px 8px 5px;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: bold;
  color: #20ACD3;
}

.intro .more,
.intro_tips .more {
  background-color: #f4f4f4;
  font-size: 10px;
}

.intro .more a,
.intro_tips .more a {
  display: block;
  padding: 10px 40px 10px 10px;
  color: #000;
  text-decoration: none;
  text-align: right;
  background: url(/assets/images/arrow_more.png) no-repeat 95% center;
}

.intro_tips {
  border-bottom: none !important;
}

.intro_tips > div {
  border-bottom: 1px #eae8e8 solid;
  background-color: #fff;
}

.intro_tips > div a {
  display: block;
  text-decoration: none;
}

.outline_tips {
  padding: 8px;
  font-size: 12px;
  color: #222;
  border-bottom: 1px #eae8e8 solid;
}

.intro_tips a {
  text-decoration: none;
}

/** ----------------------------------------
 * 退会引きとめ
 */
#banner {
  margin: 50px 0;
  padding: 10px 0;
  background-color: #5cceee;
  text-align: center;
  color: #fff;
}

#banner img {
  border: 1px solid #eee;
}

#banner p {
  font-size: 12px;
  padding: 10px;
  text-align: left;
}

#banner p.pr {
  text-align: center;
  font-weight: bold;
}

/** ----------------------------------------
 * 該当なし
 */
.notApplicable {
  margin: 20px;
  padding: 50px 10px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 1px rgba(255,255,255,1) inset, -2px -2px 1px rgba(255,255,255,1) inset;
  -moz-box-shadow: 2px 2px 1px rgba(255,255,255,1) inset, -2px -2px 1px rgba(255,255,255,1) inset;
  box-shadow: 2px 2px 1px rgba(255,255,255,1) inset, -2px -2px 1px rgba(255,255,255,1) inset;
  color: #3c457e;
  background-color: #d5d7e0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,1)
}

/** ----------------------------------------
 * 50音で検索
 * ジャンル一覧
 */
.syllabaryList,
.genreList {
  padding: 5px 0;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  background-color: #ccc;
}

.syllabaryList ul {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 5px;
}

.syllabaryList ul li,
.genreList ul li {
  text-align: center;
}

.syllabaryList ul li {
  display: table-cell;
  text-align: center;
}

.genreList ul li {
  margin: 0 10px 7px;
}

.syllabaryList ul li a,
.genreList ul li a {
  padding: 10px 0;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  -webkit-box-shadow: 0 1px 2px rgba(255,255,255,1);
  -moz-box-shadow: 0 1px 2px rgba(255,255,255,1);
  box-shadow: 0 1px 2px rgba(255,255,255,1);
  color: #000;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, #fff), to(#ccc));
  background: -webkit-linear-gradient(#fff 30%, #ccc);
  background: -moz-linear-gradient(#fff 30%, #ccc);
  background: linear-gradient(#fff 30%, #ccc);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255,255,255,1);
}

.syllabaryList ul li a {
  padding: 7px 0;
  font-size: 150%;
}

.syllabaryList ul li a:hover,
.syllabaryList ul li a:active,
.genreList ul li a:hover,
.genreList ul li a:active {
  background: #fff;
}

/** ----------------------------------------
 * ランキング
 */
.ranking {
  margin-bottom: 0 !important;
}

.tabBlock_type2.ranking ul.tabList li.active {
  color: #4aac45;
}

.ranking .weekly {
  background: url("/assets/images/sp/contents/icon/calendar_date.png") no-repeat 4px 3px;
  -webkit-background-size: 34px auto;
     -moz-background-size: 34px auto;
          background-size: 34px auto;
}

.ranking .monthly {
  background: url("/assets/images/sp/contents/icon/calendar.png") no-repeat 4px 3px;
  -webkit-background-size: 34px auto;
     -moz-background-size: 34px auto;
          background-size: 34px auto;
}

.rankingList {
  margin: -10px -10px -11px;
}

.rankingList article {
  border-top: 1px solid #ddd;
  display: table;
  width: 100%;
  color: #000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(#fff, #ddd);
  background-image: -moz-linear-gradient(#fff, #ddd);
  background-image: linear-gradient(#fff, #ddd);
  counter-increment: section;
}

.rankingList article:before {
  content: counter(section);
  display: table-cell;
  width: 2.5em;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
  background-image: -webkit-linear-gradient(#444, #000);
  background-image: -moz-linear-gradient(#444, #000);
  background-image: linear-gradient(#444, #000);
  vertical-align: middle;
  text-align: center;
}

.rankingList article:nth-of-type(1):before {
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"), -webkit-gradient(linear, left top, left bottom, from(#e8bf00), to(#c29200));
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"), -webkit-linear-gradient(#e8bf00, #c29200);
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"),    -moz-linear-gradient(#e8bf00, #c29200);
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"),         linear-gradient(#e8bf00, #c29200);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 35%, 0 0;
  -webkit-background-size: 29px auto, auto;
     -moz-background-size: 29px auto, auto;
          background-size: 29px auto, auto;
}

.rankingList article:nth-of-type(2):before {
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"), -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"), -webkit-linear-gradient(#ccc, #999);
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"),    -moz-linear-gradient(#ccc, #999);
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"),         linear-gradient(#ccc, #999);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 35%, 0 0;
  -webkit-background-size: 29px auto, auto;
     -moz-background-size: 29px auto, auto;
          background-size: 29px auto, auto;
}

.rankingList article:nth-of-type(3):before {
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"), -webkit-gradient(linear, left top, left bottom, from(#c08957), to(#996130));
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"), -webkit-linear-gradient(#c08957, #996130);
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"),    -moz-linear-gradient(#c08957, #996130);
  background-image: url("/assets/images/sp/contents/music/rankingBg.png"),         linear-gradient(#c08957, #996130);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 35%, 0 0;
  -webkit-background-size: 29px auto, auto;
     -moz-background-size: 29px auto, auto;
          background-size: 29px auto, auto;
}

.rankingList article:nth-of-type(-n+3) h1:after {
  margin-left: 5px;
  padding: 0 5px;
  content: "HOT!";
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  color: #fff;
  background-color: #4aac45;
  font-size: 10px;
}

.rankingList article:hover,
.rankingList article:active {
  background: #fff;
}

.rankingList article a {
  padding: 7px 10px;
  display: table-cell;
  color: #000;
  text-decoration: none;
}

/* アーティスト名 */
.rankingList article .name {
  color: #999;
  font-size: 71.5%;
  letter-spacing: -0.01px;
}

/** ----------------------------------------
 * ログイン
 */
#loginButton {
  padding: 10px;
  background-color: #eee;
  text-align: center;
}

#loginButton div {
  padding: 0 10px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff;
}

#loginButton>div form {
  padding: 20px 0;
}

#loginButton>div form:not(:last-of-type) {
  border-bottom: 1px dashed #999;
}

#loginButton form input[type="image"] {
  width: 150px;
}

#loginButton>div p {
  text-align: center;
  margin-bottom: 4px;
}

#loginButton>div p.btn {
  margin: 0 auto 15px;
  border-radius: 2px;
  width: 180px;
}

#loginButton>div p.btn a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 180px;
  height: 44px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.register {
  background: #24c0eb;
}

.login {
  background: #ebac24;
}

/** ----------------------------------------
 * シンプルテキスト
 */
.simpleText {
  padding: 10px;
  background-color: #fff;
  text-align: center;
  font-size: 12px;
}

.simpleText>* {
  padding: 35px 10px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff;
}

.simpleText #exceptionMessage {
  margin-top: 10px;
  padding: 10px;
  color: #900;
  background-color: #fcc;
  text-align: left;
}

.simpleText.downloadFrame p.flashMessage {
  margin: 0 15px 7px;
  padding: 15px 10px;
  border: 3px solid #40c5e8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  color: #3a74a3;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.7, #fff), to(#ddd));
  background-image: -webkit-linear-gradient(#fff 70%, #ddd);
  background-image: -moz-linear-gradient(#fff 70%, #ddd);
  background-image: linear-gradient(#fff 70%, #ddd);
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  font-size: 12px;
}

.simpleText.downloadFrame p.flashMessage::after,
.simpleText.downloadFrame p.flashMessage::before {
  border-style: solid;
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  content: "";
  pointer-events: none;
}

.simpleText.downloadFrame p.flashMessage::after {
  margin-left: -15px;
  border-color: rgba(221,221,221,0);/* 表示させる線と同じ色を、完全な透明にして指定 */
  border-top-color: #ddd;
  border-width: 15px;
  left: 50%;
}

.simpleText.downloadFrame p.flashMessage::before {
  margin-left: -19px;
  border-color: rgba(187,187,187,0);/* 表示させる線と同じ色を、完全な透明にして指定 */
  border-top-color: #40c5e8;
  border-width: 19px;
  left: 50%;
}

.simpleText.downloadFrame div {
  background: #fff url("/assets/images/sp/contents/music/downloadBg.gif") no-repeat 0 0;
  -webkit-background-size: cover;
     -moz-background-size: cover;
          background-size: cover;
}

/** ----------------------------------------
 * 文字位置
 */
.center {
  text-align: center;
}

/** ----------------------------------------
 * 間隔制御
 */
.space {
  margin: 15px 10px;
}

/** ----------------------------------------
 * 区切り線
 */
.bottomLine {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #999;
}

/** ----------------------------------------
 * 基本のリスト
 */
ol.basic {
  padding: 10px;
  margin-left: 2em;
}

ol.basic li:not(:last-of-type) {
  margin-bottom: 0.5em;
}

ul.basic {
  padding: 10px;
  list-style-type: none;
}

ul.basic li {
  padding-left: 10px;
  background: url("/assets/images/sp/contents/common/icon/list.gif") no-repeat  0 0.4em;
  -webkit-background-size: 7px auto;
     -moz-background-size: 7px auto;
          background-size: 7px auto;
}

/** ----------------------------------------
 * ボックス
 */
.box {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff;
}

.titleBox {
  margin: 10px 0;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff;
}

.space.titleBox {
  margin: 15px 10px;
}

.titleBox dt {
  border: 1px solid #999;
  border-style: solid none;
  padding: 5px 10px;
  color: #222;
  background-color: #d6d0d0;
}

.titleBox dt:first-of-type {
  border-top-style: none;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
}

.titleBox dd {
  padding: 5px 10px;
  font-size: 12px;
}

/** ----------------------------------------
 * サイン
 */
.signature {
  margin-top: 10px;
  text-align: right;
}

/** ----------------------------------------
 * 入力エラー
 */
.error {
  font-size: 14px;
  font-weight: bold;
  color: #F03;
}

/** ----------------------------------------
 * エラーメッセージ
 */
#sbl_errmsg {
  margin-top: 15px;
  margin-bottom: 20px;
  padding: 0 10px 10px;
  border: 2px solid #ffbdbd;
  background-color: #fee;
  position: relative;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  text-shadow: none;
}

#sbl_errmsg h1 {
  margin-top: -2px;
  padding: 0.2em 10px;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  position: absolute;
  top: -1.4em;
  color: #900;
  background-color: #ffbdbd;
  line-height: 1.2em;
  font-weight: bold;
}

#sbl_errmsg ul {
  padding-top: 10px;
  padding-left: 1.6em;
  color: #900;
  line-height: 1.4;
  font-size: 12px;
  list-style-type: square;
}

/** ----------------------------------------
 * 音楽詳細
 */
#showMusic {
  padding-bottom: 10px;
  background-color: #eee;
}

#showMusic p {
  text-align: center;
}

#showMusic p {
  text-align: center;
}

#showMusic p.jacket {
  margin: 15px 10px 5px;
}

#showMusic p.name {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #999;
}

#showMusic p.jacket img {
  width: 250px;
  height: 250px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
          box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background-color: #fff;
}

#showMusic div.point {
  margin: 20px auto 0;
  width: 300px;
  text-align: center;
}

#showMusic div.point dd {
  text-align: left;
}

#showMusic p.download {
  padding: 5px 0;
}

#showMusic p.download img {
  width: 300px;
}

#showMusic .audio {
  text-align: center;
}

#showMusic .audio+p.download {
  margin-top: 15px;
}

#showMusic .audio audio {
  width: 300px;
}

#showMusic .audio h1 {
  color: #2b577d;
}

#showMusic+section>h1.heading_type3 {
  margin-top: 0;
}

.list_type1.pay {
  background-color: #eee;
}

/** ----------------------------------------
 * リスト
 */
dl.compact {
  margin-top: 5px;
}

dl.compact dt,
dl.compact dd {
  margin-bottom: 5px;
  padding: 3px 10px;
}

dl.compact dt {
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  float: left;
  color: #fff;
  background-color: #437aa8;
  text-shadow: none;
}

dl.compact dt.musicPoint {
  padding-left: 28px;
  background-image: url("/assets/images/sp/contents/common/icon/musicPoint.png");
  background-repeat: no-repeat;
  background-position: 7px 40%;
}

dl.compact dt.selfPoint {
  padding-left: 28px;
  background-color: #43a896;
  background-image: url("/assets/images/sp/contents/common/icon/selfPoint.png");
  background-repeat: no-repeat;
  background-position: 7px 40%;
}

dl.compact dd {
  overflow: hidden;
}

/** ----------------------------------------
 * 注意書き
 */
.notes {
  margin: 10px 10px 10px 2em;
  color: #900;
  font-size: 12px;
  text-indent: -1em;
  text-align: left;
  text-shadow: 0 1px 1px #fff;
}

.notes:before {
  content: "※";
}

/** ----------------------------------------
 * 注意書き
 */
.artistShow h1 {
  padding: 8px 10px 2px;
  color: #fff;
  background-color: #000;
  text-align: center;
}

.artistShow p.photo {
  padding: 3px 10px 8px;
  text-align: center;
  background-color: #000;
}

.artistShow p.photo img {
  width: 200px;
  height: 200px;
}

/** ----------------------------------------
 * 強調文
 */
.emphasisMessage {
  margin: 10px;
  padding: 10px;
  border: 2px solid #ff9600;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background-color: #fffea4;
}

/** ----------------------------------------
 * 画像リンク
 */
.imageButton {
  margin: 10px;
  text-align: center;
}

.imageButton img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/** ----------------------------------------
 * マイページ
 */
#mypage section {
  margin: 15px 0 5px;
  padding: 0 10px;
  min-height: 85px;
  background: no-repeat 98% 100%;
}

#mypage section:not(:first-of-type) {
  padding-top: 10px;
  border-top: 1px solid #999;
}

#mypage section.selfPoint {
  text-align: center;
  background-image: url("/assets/images/sp/contents/user/selfPoint.gif");
}

#mypage section.selfPoint p {
  color: #cf44d8;
  font-size: 17px;
  font-weight: bold;
}

#mypage section.expiredPoint {
  text-align: center;
  background-image: url("/assets/images/sp/contents/user/expiredPoint.gif");
}

#mypage section.expiredPoint p {
  font-weight: bold;
}

#mypage section h1 {
  margin-bottom: 10px;
  padding: 5px 10px;
  border: 1px solid #999;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  color: #fff;
  background: #173b5a;
  text-align: center;
}

#mypage section ul.list_type5 a {
  border-right: 1px solid;
  border-left: 1px solid;
  border-color: #999 !important;
  font-size: 12px;
}

#mypage section ul.list_type5 li:first-of-type a {
  -webkit-border-top-left-radius: 5px;
     -moz-border-top-left-radius: 5px;
          border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
     -moz-border-top-right-radius: 5px;
          border-top-right-radius: 5px;
}

#mypage section ul.list_type5 li:last-of-type a {
  border-bottom: 1px solid;
  -webkit-border-bottom-left-radius: 5px;
     -moz-border-bottom-left-radius: 5px;
          border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
     -moz-border-bottom-right-radius: 5px;
          border-bottom-right-radius: 5px;
}

.paymentMenu {
  margin: 10px -10px -5px;
  background-color: #173b5a;
}

.paymentMenu div {
  display: table;
  table-layout: fixed;
  border-collapse: separate;/* セルの間隔を空ける */
  border-spacing: 10px;/* セルの間隔値 */
  width: 100%;
  text-align: center;
  font-size: 13px;
}

.paymentMenu div a {
  padding: 2.7em 2px 0.2em;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  display: table-cell;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#447ba9), to(#40c8ea));
  background-image: -webkit-linear-gradient(#447ba9, #40c8ea);
  background-image: -moz-linear-gradient(#447ba9, #40c8ea);
  background-image: linear-gradient(#40c8ea, #447ba9);
  text-decoration: none;
}

.paymentMenu div a.star {
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"), -webkit-gradient(linear, left top, left bottom, from(#447ba9), to(#40c8ea));
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"), -webkit-linear-gradient(#40c8ea, #447ba9);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"),    -moz-linear-gradient(#40c8ea, #447ba9);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"),         linear-gradient(#40c8ea, #447ba9);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 0.2em, 0 0;
  -webkit-background-size: 32px, auto;
     -moz-background-size: 32px, auto;
          background-size: 32px, auto;
}

.paymentMenu div a.cross {
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"), -webkit-gradient(linear, left top, left bottom, from(#447ba9), to(#40c8ea));
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"), -webkit-linear-gradient(#40c8ea, #447ba9);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"),    -moz-linear-gradient(#40c8ea, #447ba9);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"),         linear-gradient(#40c8ea, #447ba9);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 0.2em, 0 0;
  -webkit-background-size: 32px, auto;
     -moz-background-size: 32px, auto;
          background-size: 32px, auto;
}

.paymentMenu div a.check {
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"), -webkit-gradient(linear, left top, left bottom, from(#447ba9), to(#40c8ea));
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"), -webkit-linear-gradient(#40c8ea, #447ba9);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"),    -moz-linear-gradient(#40c8ea, #447ba9);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"),         linear-gradient(#40c8ea, #447ba9);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 0.2em, 0 0;
  -webkit-background-size: 32px, auto;
     -moz-background-size: 32px, auto;
          background-size: 32px, auto;
}

/** ----------------------------------------
 * auかんたん決済説明
 */
.au_guide {
  margin-top: 30px;
}

/** ----------------------------------------
 * 月額コース
 */
.course {
  display: table;
  table-layout: fixed;
  border-collapse: separate;/* セルの間隔を空ける */
  border-spacing: 10px;/* セルの間隔値 */
  width: 100%;
  font-size: 12px;
  background-color: #eee;
  margin: 10px 0 25px;
}

.course p {
  display: table-cell;
}

.course p.button {
  width: 120px;
  text-align: center;
}

.course:not(:last-of-type) {
  border-bottom: 1px solid #ccc;
}

.course .button {
  margin: 0;
  padding: 10px 7px;
  border: 1px solid #949494;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  color: #173b5a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #ebebeb), color-stop(0.5, #dbdbdb), to(#b5b5b5));
  background-image: -webkit-linear-gradient(#fff, #ebebeb 50%, #dbdbdb 50%, #b5b5b5);
  background-image: -moz-linear-gradient(#fff, #ebebeb 50%, #dbdbdb 50%, #b5b5b5);
  background-image: linear-gradient(#fff, #ebebeb 50%, #dbdbdb 50%, #b5b5b5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 2px rgba(255,255,255,1) inset;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 2px rgba(255,255,255,1) inset;
          box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 2px rgba(255,255,255,1) inset;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,1);
}

.course .button>span {
  color: #888;
  background: #d6d6d6;
  text-shadow: none;
}

.course p:nth-of-type(2) {
  vertical-align: middle;
}

.course p:nth-of-type(2) span {
  color: #447ba9;
  font-weight: bold;
}

/** ----------------------------------------
 * 月額コース解除
 */
.courseLog {
  padding: 10px;
  background-color: #eee;
  text-align: center;
}

.courseLog div {
  padding: 0 10px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff;
}

.courseLog>div p {
  margin: 0;
  padding: 20px 0;
}

.courseLog>div p:not(:last-of-type) {
  border-bottom: 1px dashed #999;
}

.courseLog>div p input[type="image"],
.courseLog>div p a {
  width: 80%;
}

/* ポイント */
.unregister .selfPoint {
  margin: 10px;
  text-align: center;
}

.unregister .selfPoint h1 {
  padding: 5px 10px;
  border: 1px solid #999;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  color: #fff;
  background: #447dad;
}

.unregister .selfPoint h1 {
  padding: 5px 10px;
  color: #fff;
  background: #447dad;
}

.unregister .selfPoint h1+div {
  padding: 15px 10px 0;
  border: 1px solid #999;
  border-top-style: none;
  -webkit-border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
          border-radius: 0 0 5px 5px;
}

.unregister .selfPoint h1+div p.point {
  color: #f00;
  font-size: 20px;
}

/** ----------------------------------------
 * アイコン付きリンク
 */
a.boxarrowIcon {
  padding-left: 20px;
  background: url("/assets/images/sp/contents/music/boxarrowIcon.png") no-repeat 0 50%;
  -webkit-background-size: 16px auto;
     -moz-background-size: 16px auto;
          background-size: 16px auto;
}

/** ----------------------------------------
 * 検索（上書き）
 */
ul.horizontalMenuBlock_type3 li {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: table-cell;
  border: 1px solid #999;
  background: -webkit-gradient(linear, left top, left bottom, from(#457dac), to(#173b5a));
  background: -webkit-linear-gradient(#457dac, #173b5a);
  background: -moz-linear-gradient(#457dac, #173b5a);
  background: linear-gradient(#457dac, #173b5a);
  vertical-align: middle;
}

ul.horizontalMenuBlock_type3 li:hover,
ul.horizontalMenuBlock_type3 li:active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: table-cell;
  border: 1px solid #999;
  background: -webkit-gradient(linear, left top, left bottom, from(#457dac), to(#173b5a));
  background: -webkit-linear-gradient(#457dac, #173b5a);
  background: -moz-linear-gradient(#457dac, #173b5a);
  background: linear-gradient(#457dac, #173b5a);
  vertical-align: middle;
}

/** ----------------------------------------
 * オススメ
 */
.bestRecommended li {
  border-top: 1px solid #ddd;
  font-size: 12px;
  text-align: center;
  list-style-type: none;
}

.bestRecommended li:last-of-type {
  border-bottom: 1px solid #ddd;
}

.bestRecommended li img {
  margin: 0 auto 5px;
  display: block;
  width: auto;
}

.bestRecommended li a {
  padding: 10px;
  display: block;
  color: #333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(#fff, #ddd);
  background-image:    -moz-linear-gradient(#fff, #ddd);
  background-image:         linear-gradient(#fff, #ddd);
  text-decoration: none;
}

.bestRecommended li a:hover,
.bestRecommended li a:active {
  background: #fff;
}

.unregisterButton {
  padding: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
}

.unregisterButton p * {
  width: 80%;
}

/** ----------------------------------------
 * 吹き出し
 */
.balloon {
  margin: 0 auto 20px;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px 1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 3px 1px rgba(255,255,255,0.5);
  box-shadow: 0 1px 3px 1px rgba(255,255,255,0.5);
  position: relative;
  width: 260px;
  color: #f00;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdd), to(#fcc));
  background-image: -webkit-linear-gradient(#fdd, #fcc);
  background-image: -moz-linear-gradient(#fdd, #fcc);
  background-image: linear-gradient(#fdd, #fcc);
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  text-align: center;
}

.balloon::after {
  position: absolute;
  bottom: -20px;
  left: 48%;
  content: "";
  display: block;
  border: 10px solid;
  border-color: #fcc transparent transparent;
}

/** --------------------------------------------------------------------------------
 * フッター
 */
footer {
  clear: both;
  background: #5cceee;
}

footer aside {
  padding: 8px 0;
  font-size: 12px;
}

footer aside ul {
  text-align: center;
}

footer aside ul li {
  display: inline-block;
  font-size: 10px;
}

footer aside ul li a {
  display: block;
  padding: 3px 0;
  color: #222 !important;
  text-decoration: none;
}

footer aside ul li a:after {
  content: " |";
}

footer aside ul li:last-child a:after {
  content: "";
}

footer ul li.pagetop {
  clear: both;
  background-color: #222;
  text-align: center;
  list-style-type: none;
  padding: 0;
}

footer ul li.pagetop a {
  display: block;
  padding: 15px;
  color: #fff;
  font-size: 10px;
  text-decoration: none;
  text-align: center;
  background: url(/assets/images/icon_pagetop.png) no-repeat 94% center;
}

footer .unregister {
  clear: both;
  padding: 10px 0;
  background: #222;
  border-bottom: 1px #ccc dotted;
}

footer .unregister p.btn {
  margin: 0 auto 0 auto;
  border-radius: 2px;
  width: 180px;
  background: #ccc;
}

footer .unregister p.btn a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 180px;
  height: 30px;
  color: #666;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
}

/** ----------------------------------------
 * コピーライト
 */
footer #copyright {
  padding: 10px 0;
  color: #fff;
  background-color: #222;
  font-size: 10px;
  text-align: center;
}

/** ----------------------------------------
 * コース解除
 */
footer p.courseButton {
  margin: 10px;
  font-size: 71.5%;
  letter-spacing: -0.01px;
}

footer p.courseButton a {
  padding: 15px 15px 15px 40px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  display: block;
  color: #333;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(#fff, #ddd);
  background-image:    -moz-linear-gradient(#fff, #ddd);
  background-image:         linear-gradient(#fff, #ddd);
  text-decoration: none;
  text-shadow: 0 1px 1px #fff;
  text-align: center;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
          box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}