@charset "UTF-8";
/* サイトガイド画面スタイルシート */
/* メイン画像 */
div#main_visual {
  max-height: 300px;
  max-width: 980px;
  margin: 20px calc(50% - 490px) 0;
  border: 1px solid;
}

/* サイトガイドボックス */
div.box_site_guide {
  margin: 25px calc(50% - 490px);
}

/* サイトガイドボックス上部 */
div.box_site_guide_top {
  height: 42px;
  line-height: 42px;
  border: 1px #e6e6e6 solid;
}
div.box_site_guide_top img {
  margin-left: 13px;
}

/* サイトガイドボックス下部 */
div.box_site_guide_bottom {
  border: 1px #e6e6e6 solid;
  border-top: none;
  font-size: 0;
}

/* サイトガイドボックス下部（2列表示用） */
div.box_site_guide_bottom_row2, div.box_site_guide_karaoke_row2 {
  display: block;
  padding: 13px 0;
}

/* サイトガイドボックス下部（段組換後） */
div.box_site_guide_karaoke_row2_1 {
  display: none;
  padding: 13px 0;
}

/* サイトガイドボックス下部（1列表示用） */
div.box_site_guide_bottom_row1 {
  display: none;
}

/* サイトガイド説明ボックス区切り線（2列表示用） */
td.box_site_guide_description_line_row2 {
  border-right: 1px #e6e6e6 solid;
}

/* サイトガイド説明ボックス区切り線（1列表示用） */
td.box_site_guide_description_line_row1 {
  border-bottom: 1px #e6e6e6 solid;
}

/* 楽曲アップローダーダウンロードボックス */
div.box_uploader_download {
  height: 94px;
  line-height: 47px;
  border: 1px #e6e6e6 solid;
  background: #f5f5f5;
  margin: 15px 0 13px 13px;
  padding: 0 15px;
}
div.box_uploader_download div {
  text-align: center;
}
div.box_uploader_download div div.btn_details {
  display: inline-block;
  margin-right: 4px;
}
div.box_uploader_download div div.box_details {
  text-align: center;
}
div.box_uploader_download div div.btn_uploader_web {
  display: inline-block;
  width: 200px;
}
div.box_uploader_download div div.btn_uploader_web img {
  max-width: 292px;
}
div.box_uploader_download div div.btn_uploader {
  display: inline-block;
  width: 200px;
}
div.box_uploader_download div div.btn_uploader img {
  max-width: 292px;
}
div.box_uploader_download div.btn_uploader_download {
  text-align: center;
  border-top: 1px #d0d0d0 dotted;
}
div.box_uploader_download div.btn_uploader_download a img {
  width: 100%;
  max-width: 230px;
}

/* 歌って作曲アプリダウンロードボックス */
div.box_app_download {
  height: 94px;
  line-height: 47px;
  border: 1px #e6e6e6 solid;
  background: #f5f5f5;
  margin: 15px 13px 13px;
  padding: 0 15px;
}
div.box_app_download div {
  text-align: center;
}
div.box_app_download div div.btn_details {
  display: inline-block;
  margin-right: 4px;
}
div.box_app_download div div.btn_kantan {
  display: inline-block;
}
div.box_app_download div div.btn_kantan img {
  width: 100%;
  max-width: 230px;
}
div.box_app_download div.btn_app_download {
  border-top: 1px #d0d0d0 dotted;
}
div.box_app_download div.btn_app_download a img {
  width: 100%;
  max-width: 230px;
}

/* サイトガイド説明ボックス下部（歌おう！聞こう！） */
div.box_site_guide_description_sing_listen_bottom {
  height: 47px;
  line-height: 47px;
  border: 1px #e6e6e6 solid;
  background: #f5f5f5;
  margin: 15px 13px 13px;
}

/* サイトガイド説明ボックス下部内部（1段） */
div.box_site_guide_description_bottom_inner_1column {
  width: 88px;
  margin: 0 auto;
}

/* サイトガイド説明アイコン */
div.site_guide_description_icon {
  max-height: 100px;
  max-width: 100px;
  margin: 13px 0 0 13px;
}

/* サイトガイド説明テキスト */
div.site_guide_description_text {
  margin: 13px 13px 0;
}

/* 項目名 */
span.item_name {
  font-size: 17px;
  color: #0094de;
}

/* 説明文 */
span.explanation {
  font-size: 13px;
}

/* 特集・キャンペーンブロック */
div#campaign_block {
  margin: 10px calc(50% - 490px) 0;
}

/* 特集・キャンペーンブロック上部 */
div#campaign_block_top {
  height: 42px;
  line-height: 42px;
  padding-left: 13px;
  border: 1px #e6e6e6 solid;
}

/* 特集・キャンペーンブロック下部 */
div#campaign_block_bottom {
  border: 1px #e6e6e6 solid;
  border-top: none;
  margin-bottom: 25px;
  padding: 13px;
}

/* サイトガイド小ヘッダー */
div.site_guide_header {
  margin-top: 20px;
  border: 1px #e6e6e6 solid;
  padding: 10px 0;
}

.site_guide_header_icon {
  margin-left: 14px;
  margin-right: 8px;
}

div.site_guide_header_text {
  font-size: 15px;
}

#pc_main {
  display: inline-block;
}

#sp_main {
  display: none;
}

/************************************************************************************/
/************************************************************************************/
/*-----------------------------------------------------------
	 画面サイズが1015px以下
		1.メイン画像、サイトガイドボックス、特集・キャンペーンボックス左右マージン変更
-----------------------------------------------------------*/
@media screen and (max-width: 1015px) {
  /*----*/
  /* 1. */
  /*----*/
  /* メイン画像 */
  div#main_visual {
    margin: 20px 10px;
  }

  /*----*/
  /* 1. */
  /*----*/
  /* サイトガイドボックス */
  div.box_site_guide {
    margin: 25px 10px;
  }

  /*----*/
  /* 1. */
  /*----*/
  /* 特集・キャンペーンボックス */
  div#campaign_block {
    margin: 25px 10px;
  }
}
/*-----------------------------------------------------------
	 画面サイズが900px以下
		1.ボックス高さ変更
-----------------------------------------------------------*/
@media screen and (max-width: 955px) {
  /*----*/
  /* 1. */
  /*----*/
  /* 歌って作曲アプリダウンロードボックス */
  div.box_uploader_download {
    height: 100px;
  }
  div.box_uploader_download div div.btn_details, div.box_uploader_download div div.box_uploader_download {
    display: block;
    margin: 0;
  }

  /* サイトガイドボックス下部（2列表示用） */
  div.box_site_guide_karaoke_row2 {
    display: none;
  }

  /* サイトガイドボックス下部（1列表示用） */
  div.box_site_guide_karaoke_row2_1 {
    display: block;
  }

  div.box_uploader_download div.btn_uploader_download {
    text-align: center;
    border-top: none;
  }
}
/*-----------------------------------------------------------
	 画面サイズが814px以下
		1.歌って作曲アプリダウンロードボックス高さ変更
-----------------------------------------------------------*/
@media screen and (max-width: 814px) {
  /*----*/
  /* 1. */
  /*----*/
  /* 歌って作曲アプリダウンロードボックス */
  div.box_app_download {
    height: 47px;
  }
  div.box_app_download div div.btn_details, div.box_app_download div div.btn_kantan {
    display: block;
    margin: 0;
  }
}
/*-----------------------------------------------------------
	画面サイズが768px以下
		1.サイトガイドボックス下部2列 -> 1列表示変更
		2.楽曲アップローダーダウンロードボックス左右マージン変更
-----------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /*----*/
  /* 1. */
  /*----*/
  /* サイトガイドボックス下部（2列表示用） */
  div.box_site_guide_bottom_row2 {
    display: none;
  }

  div.box_site_guide_karaoke_row2_1 {
    display: none;
  }

  /*----*/
  /* 1. */
  /*----*/
  /* サイトガイドボックス下部（1列表示用） */
  div.box_site_guide_bottom_row1 {
    display: block;
  }

  /*----*/
  /* 2. */
  /*----*/
  /* 楽曲アップローダーダウンロードボックス */
  div.box_uploader_download {
    margin: 15px 13px 13px;
  }
}
@media screen and (max-width: 480px) {
  div#main_visual {
    max-height: 440px;
    max-width: 480px;
    border: 1px solid;
  }

  #pc_main {
    display: none;
  }

  #sp_main {
    display: inline-block;
  }
}