@charset "UTF-8";
/* 投稿しよう画面（共通）スタイルシート */
/* カラオケ配信内ページボタン */
a.contribution_btn {
  text-decoration: none;
}

/* h2 */
h2 {
  background: url("/img/icon/icon_h2.png") no-repeat left center;
  height: auto;
  padding: 6px 0 5px 15px;
  border-bottom: 1px solid #e6e6e6;
}

/* 投稿説明ページ表示ボタンボックス */
div#box_contribution_description_btn {
  margin-bottom: 20px;
  padding: 10px 0;
  border-top: 1px #e6e6e6 solid;
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f5f5;
  text-align: center;
  font-size: 0;
}

/* 投稿説明ページ表示ボタン */
div.btn_contribution_description {
  display: inline-block;
  padding: 0 9px;
  border-left: 1px #e6e6e6 solid;
}
div.btn_contribution_description:last-child {
  border-right: 1px #e6e6e6 solid;
}
div.btn_contribution_description img {
  width: 100%;
  max-width: 230px;
}
div.btn_contribution_description img.pc {
  display: inline;
}
div.btn_contribution_description img.sp {
  display: none;
}

/* 投稿しよう説明ボックス */
div#box_contribution_explanation {
  margin: 0 calc(50% - 980px / 2) 17px;
  border: 1px #e6e6e6 solid;
}

/* 投稿しよう説明ボックス上部 */
div#box_contribution_explanation_top {
  height: 41px;
  line-height: 41px;
  padding-left: 13px;
  border-bottom: 1px #e6e6e6 solid;
}

/* 投稿しよう説明ボックス下部 */
div#box_contribution_explanation_bottom {
  padding: 0 13px;
}

/* 著作権eラーニング */
div#e_learning {
  text-align: right;
}
div#e_learning a {
  color: #4f81bd;
}

/* PC版投稿手順ボタンボックス */
div#box_contribution_process_btn {
  margin-top: 27px;
  text-align: center;
  font-size: 0;
  display: block;
}

/* SP版投稿手順ボタンボックス */
div#box_sp_contribution_process_btn {
  margin-top: 27px;
  text-align: center;
  display: none;
}

/* PC版投稿手順ボタン */
div.btn_contribution_process {
  display: inline-block;
  margin-left: 12.5px;
}
div.btn_contribution_process:first-child {
  margin-left: 0;
}

/* SP版投稿手順ボタン */
div.btn_sp_contribution_process img {
  width: 100%;
  max-width: 560px;
}

/* キャプチャー */
div.capture {
  width: 100%;
  max-width: 480px;
  border: 2px #e6e6e6 solid;
}
div.capture img {
  width: 100%;
}

/* キャプチャー（横並び：左） */
div.capture_left {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  margin-right: 20px;
  border: 2px #e6e6e6 solid;
}
div.capture_left img {
  width: 100%;
}

/* キャプチャー（横並び：右） */
div.capture_right {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  border: 2px #e6e6e6 solid;
}
div.capture_right img {
  width: 100%;
}

/* 投稿手順 */
div#contribution_process a {
  color: #0070c0;
}
div#contribution_process div.contribution_process_line {
  height: 2px;
  border: 2px #385d8a solid;
  background: #4f81bd;
}
div#contribution_process h1 {
  margin: 20px 0;
  padding: 8px 8.5px 5px;
  border-radius: 5px;
  background: #7f7f7f;
  color: #fff;
}
div#contribution_process p#contribution_process_explanation {
  margin-bottom: 40px;
}
div#contribution_process p#contribution_process_explanation span.heading {
  display: inline-block;
  margin-left: 20px;
}
div#contribution_process p#contribution_process_explanation span.notice {
  color: #f00;
}

/* 手順 */
div.process {
  margin-bottom: 20px;
  margin-left: 5px;
}
div.process h2 {
  margin-bottom: 20px;
  font-size: 15px;
  color: #632523;
}
div.process .process_explanation {
  margin-bottom: 40px;
  margin-left: 20px;
  word-break: break-all;
}
div.process .process_explanation:last-child {
  margin-bottom: 0;
}
div.process div.process_explanation {
  font-size: 0;
}
div.process div.process_explanation p {
  font-size: 12px;
}
div.process div.process_explanation h3 {
  font-size: 12px;
  margin: 10px 0;
}
div.process div.process_explanation h4 {
  font-size: 12px;
  margin: 10px 0;
}

/* 次の手順リンク */
div#link_contribution_process_next {
  margin-bottom: 20px;
  margin-left: 20px;
}

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

/*-----------------------------------------------------------
	 画面サイズが1015px以下
-----------------------------------------------------------*/
@media screen and (max-width: 1015px) {
  /* 投稿しよう説明ボックス */
  /* 右側マージン変更 */
  div#box_contribution_explanation {
    margin: 0 10px 17px;
  }
}
/*-----------------------------------------------------------
	画面サイズが768px以下
		1.投稿手順ボタンボックス表示変更
-----------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /*----*/
  /* 1. */
  /*----*/
  /* PC版投稿手順ボタンボックス		非表示 */
  div#box_contribution_process_btn {
    display: none;
  }

  /* SP版投稿手順ボタンボックス		表示 */
  div#box_sp_contribution_process_btn {
    display: block;
  }
}
/*-----------------------------------------------------------
	画面サイズが514px以下
		1.投稿説明ページ表示ボタンスタイル変更
		2.投稿説明ページ表示ボタン（「カバー曲の配信について」ボタン）スタイル変更
		3.投稿説明ページ表示ボタン切り替え
-----------------------------------------------------------*/
@media screen and (max-width: 514px) {
  /*----*/
  /* 1. */
  /*----*/
  /* 投稿説明ページ表示ボタン */
  div.btn_contribution_description {
    display: block;
    margin-bottom: 10px;
    border-left: none;
  }

  /*----*/
  /* 2. */
  /*----*/
  /* 投稿説明ページ表示ボタン（「カバー曲の配信について」ボタン） */
  div.btn_contribution_description:last-child {
    margin-bottom: 0;
    border-right: none;
  }

  /*----*/
  /* 3. */
  /*----*/
  /* PC版投稿説明ページ表示ボタン */
  div.btn_contribution_description img.pc {
    display: none;
  }

  /* SP版投稿説明ページ表示ボタン */
  div.btn_contribution_description img.sp {
    display: inline;
  }
}