@charset "utf-8";

/** --------------------------------------------------------------------------------
 * 共通
 */
body {
  font-size: 87.5%;/* 14px相当 */
  line-height: 1.43;
}

strong {
  color: #00acee;
}

/** --------------------------------------------------------------------------------
 * ヘッダー
 */
header div {
  display: table;
  width: 100%;
}

header div h1,
header div h1 + p {
  display: table-cell;
  vertical-align: middle;
}

header div h1 {
  padding: 10px;
  font-family: serif;
  font-size: 18px;
}

header div h1 + p {
  padding: 10px 10px 10px 0;
  text-align: right;
}

header div h1 + p.loggedIn {
  font-size: 71.5%;
  letter-spacing: -0.01px;
}

header div h1 + p.login {
  font-size: 85.8%;
}

header div h1 + p.login a {
  padding: 5px 10px 5px 35px;
  border: 1px solid #0f304b;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  color: #fff;
  background: url("/assets/images/sp/header/login.png") no-repeat 5px 50%, -webkit-gradient(linear, left top, left bottom, from(#ff0059), to(#d91681));
  background: url("/assets/images/sp/header/login.png") no-repeat 5px 50%, -webkit-linear-gradient(#ff0059, #d91681);
  background: url("/assets/images/sp/header/login.png") no-repeat 5px 50%, -moz-linear-gradient(#ff0059, #d91681);
  background: url("/assets/images/sp/header/login.png") no-repeat 5px 50%, linear-gradient(#ff0059, #d91681);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,1);
}

header div h1 + p.login a:hover,
header div h1 + p.login a:active {
  background: #d91681 url("/assets/images/sp/header/login.png") no-repeat 5px 50%;
}

/** ----------------------------------------
 * グローバルナビ
 */
header ul {
  display: table;
  width: 100%;
  list-style-type: none;
  font-size: 78.6%;
  text-align: center;
  letter-spacing: -0.01px;
  table-layout: fixed;
  border-collapse: separate;
  line-height: 1.2;
}

header ul li {
  display: table-cell;
  border: 1px solid #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#fb96f9), to(#d84194));
  background: -webkit-linear-gradient(#fb96f9, #d84194);
  background: -moz-linear-gradient(#fb96f9, #d84194);
  background: linear-gradient(#fb96f9, #d84194);
  vertical-align: middle;
  -webkit-box-shadow: inset 0px 0px 5px rgba(255,255,255,0.5);
  -moz-box-shadow: inset 0px 0px 5px rgba(255,255,255,0.5);
  box-shadow: inset 0px 0px 5px rgba(255,255,255,0.5);
}

header ul li a:before {
  margin-top: -30px;
  position: absolute;
  width: 24.5%;
  display: block;
  -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center top;
     -moz-transform-origin: center top;
          transform-origin: center top;
          text-align: center;
}

header ul li:first-of-type a:before {
  content: url("/assets/images/sp/header/nav/search.png");
}

header ul li:nth-of-type(2) a:before {
  content: url("/assets/images/sp/header/nav/ranking.png");
}

header ul li:nth-of-type(3) a:before {
  content: url("/assets/images/sp/header/nav/new.png");
}

header ul li:nth-of-type(4) a:before {
  content: url("/assets/images/sp/header/nav/mypage.png");
}

header ul li:hover,
header ul li:active {
  background: #d91681;
}

header ul li:not(:first-of-type) {
  border-left-color: rgba(255,255,255,0.3);
}

header ul li a {
  padding: 33px 2px 6px;
  display: block;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,1);
}

/** --------------------------------------------------------------------------------
 * メインコンテンツ
 */
div#contents {
}

/** ----------------------------------------
 * 該当なし
 */
.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;
}

/** ----------------------------------------
 * シンプルテキスト
 */
.simpleText {
  padding: 10px;
  background-color: #eee;
  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: #f6f6f6;
}

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

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

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

.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;
}

/** ----------------------------------------
 * エラーメッセージ
 */
#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;
  margin-bottom: 20px;
}

#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: #FF0059;
  text-shadow: none;
}

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

dl.compact dt.selfPoint {
  padding-left: 28px;
  background-color: #FF9600;
  background-image: url("/assets/images/sp/contents/common/icon/paystar.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;
  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: #FF9600;
  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: #FFF;
  border-style: solid;
  border-width: 1px 0;
  border-color: #ff0059;
}

.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(#FFBE3B), to(#FF3C00));
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"), -webkit-linear-gradient(#FF3C00, #FFBE3B);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"),    -moz-linear-gradient(#FF3C00, #FFBE3B);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/star.png"),         linear-gradient(#FF3C00, #FFBE3B);
  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(#FFBE3B), to(#FF3C00));
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"), -webkit-linear-gradient(#FF3C00, #FFBE3B);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"),    -moz-linear-gradient(#FF3C00, #FFBE3B);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/cross.png"),         linear-gradient(#FF3C00, #FFBE3B);
  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(#FFBE3B), to(#FF3C00));
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"), -webkit-linear-gradient(#FF3C00, #FFBE3B);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"),    -moz-linear-gradient(#FF3C00, #FFBE3B);
  background-image: url("/assets/images/sp/contents/user/paymentMenu/check.png"),         linear-gradient(#FF3C00, #FFBE3B);
  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;
}

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

.course p {
  display: table-cell;
}

.course p.button {
  width: 170px;
}

.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: #E21D62;
  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: #E21D62;
  font-weight: bold;
}

.au_payment img {
  width: 100%;
}


/** ----------------------------------------
 * 月額コース解除
 */
.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: #FF9600;
}

.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: 250px 10px 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;
}

/** ----------------------------------------
 * 退会クッション
 */
.buttonMenu {
  margin-top: 15px;
  padding: 8px 0;
  background-color: #ddd;
  list-style-type: none;
}

.buttonMenu li a {
  margin: 8px 15%;
  padding: 10px 20px;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  display: block;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a3a3a3), color-stop(0.5, #3b3b3b), color-stop(0.5, #242424), to(#000000));
  background-image: -webkit-linear-gradient(#a3a3a3, #3b3b3b 50%, #242424 50%, #000000);
  background-image:    -moz-linear-gradient(#a3a3a3, #3b3b3b 50%, #242424 50%, #000000);
  background-image:         linear-gradient(#a3a3a3, #3b3b3b 50%, #242424 50%, #000000);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.6) inset;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.6) inset;
          box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.6) inset;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.2);
  text-align: center;
}

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

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);
}

/** ----------------------------------------
 * Wネーム用・キャリア選択ボタン
 */
.carrierSelect {
  padding: 15px 30px;
  background-color: #ddd;
  list-style-type: none;
  text-align: center;
}

.carrierSelect li {
  margin-bottom: 15px;
}

.carrierSelect li:last-of-type {
  margin-bottom: 0;
}

.carrierSelect li a {
  padding: 15px 0;
  border: 1px solid #bbb;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  color: #333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #eee), color-stop(0.5, #ddd), to(#eee));
  background-image: -webkit-linear-gradient(#fff, #eee 50%, #ddd 50%, #eee);
  background-image:    -moz-linear-gradient(#fff, #eee 50%, #ddd 50%, #eee);
  background-image:         linear-gradient(#fff, #eee 50%, #ddd 50%, #eee);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.6) inset;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.6) inset;
          box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.6) inset;
  display: block;
  text-decoration: none;
}


/** --------------------------------------------------------------------------------
 * フッター
 */
footer {
  border-top: 1px solid #999;
  background: #ccc url("/assets/images/sp/footer/menu/bg.gif") repeat 0 0;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
}

footer ul {
  margin: 10px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  list-style-type: none;
  font-size: 71.5%;
  letter-spacing: -0.01px;
  -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);
}

footer ul::after {
  content: "";
  display: block;
  clear: both;
}

footer ul li {
  border: 1px solid #999;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  float: left;
  width: 50%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 5px 50%, 100% 50%, 0 0;
  -webkit-background-size: 30px auto, 14px auto, auto;
     -moz-background-size: 30px auto, 14px auto, auto;
          background-size: 30px auto, 14px auto, auto;
}

footer ul li:nth-of-type(2) {
  background-image: url("/assets/images/sp/footer/menu/note.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/note.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/note.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/note.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-of-type(3) {
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-last-of-type(6) {
  background-image: url("/assets/images/sp/footer/menu/question.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/question.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/question.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/question.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-last-of-type(5) {
  background-image: url("/assets/images/sp/footer/menu/pen.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/pen.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/pen.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/pen.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-last-of-type(4) {
  background-image: url("/assets/images/sp/footer/menu/document.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/document.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/document.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/document.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-last-of-type(3) {
  background-image: url("/assets/images/sp/footer/menu/tags.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/tags.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/tags.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/tags.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-last-of-type(2) {
  background-image: url("/assets/images/sp/footer/menu/building.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/building.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/building.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/building.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:last-of-type {
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/mail.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:first-of-type {
  background-image: url("/assets/images/sp/footer/menu/home.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: url("/assets/images/sp/footer/menu/home.png"), url("/assets/images/sp/footer/menu/arrow.png"), -webkit-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/home.png"), url("/assets/images/sp/footer/menu/arrow.png"),    -moz-linear-gradient(#fff, #ddd);
  background-image: url("/assets/images/sp/footer/menu/home.png"), url("/assets/images/sp/footer/menu/arrow.png"),         linear-gradient(#fff, #ddd);
}

footer ul li:nth-of-type(even) {
  border-left-style: none;
}

footer ul li:first-of-type {
  -webkit-border-top-left-radius: 5px;
     -moz-border-top-left-radius: 5px;
          border-top-left-radius: 5px;
}

footer ul li:nth-of-type(2) {
  -webkit-border-top-right-radius: 5px;
     -moz-border-top-right-radius: 5px;
          border-top-right-radius: 5px;
}

footer ul li:last-of-type {
  -webkit-bottom-top-right-radius: 5px;
     -moz-border-bottom-right-radius: 5px;
          border-bottom-right-radius: 5px;
}

footer ul li:nth-last-of-type(2) {
  border-bottom-style: none;
}

footer ul li:not(:last-of-type) {
  border-bottom-style: none;
}

footer ul li:last-of-type {
  clear: both;
  float: none;
  width: auto;
  -webkit-border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
          border-radius: 0 0 5px 5px;
}

footer ul li a {
  padding: 15px 15px 15px 40px;
  display: block;
  color: #333;
  text-decoration: none;
  text-shadow: 0 1px 1px #fff;
}

/** ----------------------------------------
 * コピーライト
 */
footer #copyright {
  padding: 3px 10px;
  color: #fff;
  background-color: #000;
  font-size: 64.3%;
  text-align: center;
  letter-spacing: -0.01px;
}