@charset "UTF-8";
@import url("reset.css");
@import url("header.css?v=20160809");
@import url("footer.css");
@import url("popup_common.css");
/* 全画面共通スタイルシート */
/* 共通 */
body, html {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
  max-width: 100%;
  min-width: 320px;
  margin: 0 auto;
  font-size: 12px;
}

input, select {
  vertical-align: middle;
}

/* リンク */
a:link {
  color: #0070c0;
  text-decoration: underline;
}

a:hover {
  color: #0070c0;
  text-decoration: underline;
}

a:visited {
  color: #0070c0;
  text-decoration: underline;
}

a:active {
  color: #0070c0;
  text-decoration: underline;
}

/* パンくずリンク */
a.breadcrumb_link:link {
  color: #bfbfbf;
  text-decoration: none;
}

a.breadcrumb_link:hover {
  color: #bfbfbf;
  text-decoration: underline;
}

a.breadcrumb_link:visited {
  color: #bfbfbf;
  text-decoration: none;
}

/* 楽曲リンク */
a.music {
  cursor: pointer;
}

a.music:link {
  color: #0070c0;
  text-decoration: none;
}

a.music:visited {
  color: #0070c0;
  text-decoration: underline;
}

div.box_container {
  overflow: hidden;
}

div.box_container > div.column_3 {
  width: auto;
  max-width: 296px;
  padding-right: 20px;
}

div.box {
  float: left;
}

/* ボックスセンタリング */
div.box_center {
  width: 980px;
  margin-left: calc(50% - 490px);
}

/* タイトルバー */
div#title_bar {
  height: 35px;
  line-height: 35px;
  background: #232323;
  color: #fff;
}

/* タイトル */
div#title {
  margin-left: 10px;
  float: left;
}

/* パンくず */
div#breadcrumb {
  margin-right: 10px;
  text-align: right;
  font-size: 0;
}
div#breadcrumb div {
  display: inline-block;
  font-size: 12px;
  color: #fff;
}
div#breadcrumb div#breadcrumb div#breadcrumb_title {
  color: #fff;
}

/* 見出し */
span.heading b {
  margin-left: 8px;
  font-size: 15px;
  vertical-align: middle;
}

/* 見出し */
span.heading b.sp_music_list {
  margin-left: 8px;
  font-size: 14px;
  vertical-align: middle;
}

/* 見出し */
div.heading {
  display: table;
  table-layout: fixed;
  width: 100%;
}
div.heading div.heading_icon {
  display: table-cell;
  width: 24px;
  vertical-align: middle;
}
div.heading div.heading_text {
  display: table-cell;
  width: 100%;
  padding-left: 8px;
  vertical-align: middle;
  font-size: 15px;
}

/* 共通ボックス上部 */
div.box_top {
  padding: 8px 0 8px 13px;
  border: 1px #e6e6e6 solid;
}

/* 共通ボックス下部 */
div.box_bottom {
  border: 1px #e6e6e6 solid;
  border-top: none;
}

/* 外枠のみのボックス */
div.box_border {
  border: 1px;
  border-style: solid;
}

/* topに戻るボタン */
div#box_page_top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* インデント */
p.indent_1 {
  padding-left: 2em;
  text-indent: -1em;
}

/* インデント */
p.indent_3 {
  padding-left: 3em;
  text-indent: -3em;
}

/************************************************************/
/* ページャー関連スタイル（楽曲一覧除く）                   */
/************************************************************/
/* ページャー */
div.pager {
  margin: 10px 0;
  text-align: center;
}

/* 共通 */
li.page {
  display: inline-block;
  height: 22px;
  width: 22px;
  line-height: 22px;
  margin: 0 1px;
  background: #7f7f7f;
  font-size: 10px;
  color: white;
  cursor: default;
}
li.page a {
  display: inline-block;
  width: 100%;
  color: white;
  text-decoration: none;
}

/*  現在のページ */
li.current {
  background: #df0c19;
}

/* 最初へ、最後へ */
li.first, li.last {
  width: 58px;
}

/* 前へ、次へ */
li.previous, li.next {
  width: 42px;
}

/************************************************************/
/************************************************************************************/
/************************************************************************************/
/*-----------------------------------------------------------
	 画面サイズが1015px以下
		1.タイトルバー幅設定、左側マージン削除
-----------------------------------------------------------*/
@media screen and (max-width: 1015px) {
  /*----*/
  /* 1. */
  /*----*/
  /* タイトルバー内部 */
  div#title_bar_inner {
    width: 100%;
    margin: 0;
  }
}
/*-----------------------------------------------------------
	画面サイズが768px以下
		1.パンくず非表示
		2.ページャー表示変更
-----------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /*----*/
  /* 1. */
  /*----*/
  /* パンくず */
  div#breadcrumb {
    display: none;
  }

  /* body */
  body {
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #333;
    left: 0;
    width: 100%;
    position: relative;
    height: 100%;
  }

  /*----*/
  /* 2. */
  /*----*/
  /* 最初へ、最後へ */
  li.first, li.last {
    display: none;
  }
}
@media all and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  body {
    font-family: Helvetica, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #333;
    left: 0;
    width: 100%;
    position: relative;
    height: 100%;
  }
}
/* firefox */
@-moz-document url-prefix() {
  select {
    font-size: 11px;
  }
}