/** common for all screen**/
div#contents article ul.sns { padding: 25px 0; margin: 0 auto; font-size: 0; text-align: center; }
div#contents article ul.sns li { display: inline-block; margin-left: 10px; }
div#contents article ul.sns li:first-child { margin-left: 0; }


@media only screen and (max-width: 320px) {
  html, body { width: 100%; margin: 0; padding: 0; background-color: #fff; font-size: 86.7%; line-height: 1.5; font-family: "\30D2\30E9\30AE\30CE\89D2\30B4\20\50\72\6F\20\57\33", "Hiragino Kaku Gothic Pro", "\30e1\30a4\30ea\30aa", Meiryo, "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", sans-serif; color: #181312; }
  section, article, aside, div, p, img, hr { margin: 0; padding: 0; vertical-align: top; }
  ul, li { margin: 0; padding: 0; list-style: none; overflow: hidden; vertical-align: top; }
  h1, h2, h3, h4 { font-size: 1em; font-weight: normal; margin: 0; padding: 0; }
  a { border: 0; text-decoration: none; }
  span.swapimg { display: block; position: relative; z-index: -1; }
  .cf { *zoom: 1; }
  .cf:after { content: ''; display: block; clear: both; }
  header img.title { display: block; width: 95%; height: auto; margin: 0 auto 20px auto; }
  header img.date { width: 239px; height: 43px; }
  section.news { width: 100%; margin: 5px auto 0 auto; font-size: 0; }
  section.news li { display: inline-block; }
  section.news li.image { margin: 0 10px 0 5px; }
  section.news li.image img { width: 210px; height: 29px; }
  section.news li.text { width: 100%; padding: 0 5px; margin-top: 2px; overflow: hidden; font-size: 1.05rem; box-sizing: border-box; }
  section.news li.sns { margin-left: 10px; margin: 5px; }
  section.news li.sns img { width: 29px; height: 29px; }
  hr { width: 100%; height: 1px; background-color: #fff; border: 0; border-bottom: 1px #e20a16 dotted; }
  div#contents { z-index: 0; width: 100%; border-top: 2px #E20A16 solid; background: url(../images/background.png); }
  div#contents article { width: 100%; margin: 20px auto 25px auto; }
  div#contents article section { z-index: 2; width: 100%; padding: 20px 5px; margin-bottom: 20px; border: 1px #181312 solid; background-color: #fff; box-sizing: border-box; }
  div#contents article section ul.ranking { width: 188px; margin: 15px auto 0 auto; box-sizing: border-box; font-size: 0; }
  div#contents article section ul.ranking li { display: inline-block; position: relative; margin-right: 10px; background: url(../images/top_rankback.png) no-repeat right bottom; margin-top: 15px; }
  div#contents article section ul.ranking li img.rank { position: absolute; top: 0; left: 0; }
  div#contents article section ul.ranking li a.title { display: block; width: 184px; height: 50px; padding: 12px 0; margin: 20px 4px 4px 0; background-color: #fff; border: 1px #181312 solid; box-sizing: border-box; font-size: 1.15rem; font-weight: bold; text-align: center; color: #181312; }
  div#contents article a.complete { display: block; z-index: 1; width: 142px; height: 27px; margin: 5px auto 0 auto; background: url(../images/complete.png) no-repeat; }

  div#contents article section ul.comics li.comic.comic--blank { display: none; }
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
  html, body { width: 100%; margin: 0; padding: 0; background-color: #fff; font-size: 86.7%; line-height: 1.5; font-family: "\30D2\30E9\30AE\30CE\89D2\30B4\20\50\72\6F\20\57\33", "Hiragino Kaku Gothic Pro", "\30e1\30a4\30ea\30aa", Meiryo, "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", sans-serif; color: #181312; }
  section, article, aside, div, p, img, hr { margin: 0; padding: 0; vertical-align: top; }
  ul, li { margin: 0; padding: 0; list-style: none; overflow: hidden; vertical-align: top; }
  h1, h2, h3, h4 { font-size: 1em; font-weight: normal; margin: 0; padding: 0; }
  a { border: 0; text-decoration: none; }
  span.swapimg { display: block; position: relative; z-index: -1; }
  .cf { *zoom: 1; }
  .cf:after { content: ''; display: block; clear: both; }
  header img.title { display: block; width: 95%; height: auto; margin: 0 auto 20px auto; }
  header img.date { width: 239px; height: 43px; }
  section.news { width: 100%; margin: 5px auto 0 auto; font-size: 0; }
  section.news li { display: inline-block; }
  section.news li.image { margin: 0 10px 0 5px; }
  section.news li.image img { width: 210px; height: 29px; }
  section.news li.text { width: 100%; padding: 0 5px; margin-top: 2px; overflow: hidden; font-size: 1.05rem; box-sizing: border-box; }
  section.news li.sns { margin-left: 10px; margin: 5px; }
  section.news li.sns img { width: 29px; height: 29px; }
  hr { width: 100%; height: 1px; background-color: #fff; border: 0; border-bottom: 1px #e20a16 dotted; }
  div#contents { z-index: 0; width: 100%; border-top: 2px #E20A16 solid; background: url(../images/background.png); }
  div#contents article { width: 100%; margin: 20px auto 25px auto; }
  div#contents article section { z-index: 2; width: 100%; padding: 20px 5px; margin-bottom: 20px; border: 1px #181312 solid; background-color: #fff; box-sizing: border-box; }
  div#contents article section ul.ranking { width: 188px; margin: 15px auto 0 auto; box-sizing: border-box; font-size: 0; }
  div#contents article section ul.ranking li { display: inline-block; position: relative; margin-right: 10px; background: url(../images/top_rankback.png) no-repeat right bottom; margin-top: 15px; }
  div#contents article section ul.ranking li img.rank { position: absolute; top: 0; left: 0; }
  div#contents article section ul.ranking li a.title { display: block; width: 184px; height: 50px; padding: 12px 0; margin: 20px 4px 4px 0; background-color: #fff; border: 1px #181312 solid; box-sizing: border-box; font-size: 1.15rem; font-weight: bold; text-align: center; color: #181312; }
  div#contents article a.complete { display: block; z-index: 1; width: 142px; height: 27px; margin: 5px auto 0 auto; background: url(../images/complete.png) no-repeat; }
  div#contents article section ul.comics li.comic.comic--blank {
    display: none;
  }
}
@media only screen and (min-width: 481px) and (max-width: 800px) {
  html, body { width: 100%; margin: 0; padding: 0; background-color: #fff; font-size: 86.7%; line-height: 1.5; font-family: "\30D2\30E9\30AE\30CE\89D2\30B4\20\50\72\6F\20\57\33", "Hiragino Kaku Gothic Pro", "\30e1\30a4\30ea\30aa", Meiryo, "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", sans-serif; color: #181312; }
  section, article, aside, div, p, img, hr { margin: 0; padding: 0; vertical-align: top; }
  ul, li { margin: 0; padding: 0; list-style: none; overflow: hidden; vertical-align: top; }
  h1, h2, h3, h4 { font-size: 1em; font-weight: normal; margin: 0; padding: 0; }
  a { border: 0; text-decoration: none; }
  span.swapimg { display: block; position: relative; z-index: -1; }
  .cf { *zoom: 1; }
  .cf:after { content: ''; display: block; clear: both; }
  header img.title { display: block; width: 95%; height: auto; margin: 0 auto 20px auto; }
  header img.date { width: 239px; height: 43px; }
  section.news { width: 100%; margin: 5px auto 0 auto; font-size: 0; }
  section.news li { display: inline-block; }
  section.news li.image { margin: 0 10px 0 5px; }
  section.news li.image img { width: 210px; height: 29px; }
  section.news li.text { width: 100%; padding: 0 5px; margin-top: 2px; overflow: hidden; font-size: 1.05rem; box-sizing: border-box; }
  section.news li.sns { margin-left: 10px; margin: 5px; }
  section.news li.sns img { width: 29px; height: 29px; }
  hr { width: 100%; height: 1px; background-color: #fff; border: 0; border-bottom: 1px #e20a16 dotted; }
  div#contents { z-index: 0; width: 100%; border-top: 2px #E20A16 solid; background: url(../images/background.png); }
  div#contents article { width: 100%; margin: 20px auto 25px auto; }
  div#contents article section { z-index: 2; width: 100%; padding: 20px 5px; margin-bottom: 20px; border: 1px #181312 solid; background-color: #fff; box-sizing: border-box; }
  div#contents article section ul.ranking { width: 188px; margin: 15px auto 0 auto; box-sizing: border-box; font-size: 0; width: 396px; }
  div#contents article section ul.ranking li { display: inline-block; position: relative; margin-right: 10px; background: url(../images/top_rankback.png) no-repeat right bottom; margin-top: 15px; }
  div#contents article section ul.ranking li img.rank { position: absolute; top: 0; left: 0; }
  div#contents article section ul.ranking li a.title { display: block; width: 184px; height: 50px; padding: 12px 0; margin: 20px 4px 4px 0; background-color: #fff; border: 1px #181312 solid; box-sizing: border-box; font-size: 1.15rem; font-weight: bold; text-align: center; color: #181312; }
  div#contents article a.complete { display: block; z-index: 1; width: 142px; height: 27px; margin: 5px auto 0 auto; background: url(../images/complete.png) no-repeat; }
  div#contents article section ul.comics li.comic.comic--blank {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  html, body { width: 100%; margin: 0; padding: 0; background-color: #fff; font-size: 86.7%; line-height: 1.5; font-family: "\30D2\30E9\30AE\30CE\89D2\30B4\20\50\72\6F\20\57\33", "Hiragino Kaku Gothic Pro", "\30e1\30a4\30ea\30aa", Meiryo, "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", sans-serif; color: #181312; min-width: 1000px; }
  section, article, aside, div, p, img, hr { margin: 0; padding: 0; vertical-align: top; }
  ul, li { margin: 0; padding: 0; list-style: none; overflow: hidden; vertical-align: top; }
  h1, h2, h3, h4 { font-size: 1em; font-weight: normal; margin: 0; padding: 0; }
  a { border: 0; text-decoration: none; }
  span.swapimg { display: block; position: relative; z-index: -1; }
  .cf { *zoom: 1; }
  .cf:after { content: ''; display: block; clear: both; }
  header img.title { display: block; width: 95%; height: auto; margin: 0 auto 20px auto; width: 948px; height: 106px; }
  header img.date { width: 239px; height: 43px; margin-top: 8px; }
  section.news { width: 100%; margin: 5px auto 0 auto; font-size: 0; width: 980px; height: 29px; }
  section.news li { display: inline-block; }
  section.news li.image { margin: 0 10px 0 5px; margin-left: 0; }
  section.news li.image img { width: 210px; height: 29px; }
  section.news li.text { width: 100%; padding: 0 5px; margin-top: 2px; overflow: hidden; font-size: 1.05rem; box-sizing: border-box; width: 721px; height: 29px; padding: 0; line-height: 29px; }
  section.news li.sns { margin-left: 10px; }
  section.news li.sns img { width: 29px; height: 29px; }
  hr { width: 100%; height: 1px; background-color: #fff; border: 0; border-bottom: 1px #e20a16 dotted; width: 1000px; margin: 4px auto 0 auto; }
  div#contents { z-index: 0; width: 100%; border-top: 2px #E20A16 solid; background: url(../images/background.png); }
  div#contents article { width: 100%; margin: 20px auto 25px auto; width: 1000px; box-sizing: border-box; }
  div#contents article section { z-index: 2; width: 100%; padding: 20px 5px; margin-bottom: 20px; border: 1px #181312 solid; background-color: #fff; box-sizing: border-box; padding: 20px 10px; }
  div#contents article section div.title-today { width: 100%; height: 43px; background: url(../images/top_topday.png) no-repeat center, url(../images/sectionline.png) repeat-x; text-align: center; display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; }
  div#contents article section div.title-ranking { width: 100%; height: 43px; background: url(../images/top_ranking.png) no-repeat center, url(../images/sectionline.png) repeat-x; text-align: center; display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; }
  div#contents article section ul.ranking { width: 188px; margin: 15px auto 0 auto; box-sizing: border-box; font-size: 0; width: 990px; margin: 15px -10px 0 0; }
  div#contents article section ul.ranking li { display: inline-block; position: relative; margin-right: 10px; background: url(../images/top_rankback.png) no-repeat right bottom; }
  div#contents article section ul.ranking li img.rank { position: absolute; top: 0; left: 0; }
  div#contents article section ul.ranking li a.title { display: block; width: 184px; height: 50px; padding: 12px 0; margin: 20px 4px 4px 0; background-color: #fff; border: 1px #181312 solid; box-sizing: border-box; font-size: 1.15rem; font-weight: bold; text-align: center; color: #181312; }
  div#contents article a.complete { display: block; z-index: 1; width: 142px; height: 27px; margin: 5px auto 0 auto; background: url(../images/complete.png) no-repeat; }
}



/* tweet */
section.news .date {
  color: #333;
}
section.news .date:after {
  content: ":";
  margin-right: 2em;
}
@media only screen and (max-width: 800px) and (min-width: 320px) {
  section.news li {
    font-size: 10px;
  }
}




/*修正追加*/
@media only screen and (min-width: 801px) {
  div#contents article ul.sns li img{
    width: 32px;
    height: 32px;
  }
}


@media only screen and (max-width: 800px) and (min-width: 320px) {
  div#contents article ul.sns {
    padding: 25px 0;
    margin: 0 auto;
    font-size: 0;
  }
  div#contents article ul.sns li {
    width: 32px;
    height: 32px;
    margin: 0 0 0 10px;
  }
  div#contents article ul.sns li:first-child {
    margin-left: 0;
  }
  div#contents article ul.sns li img{
    width: 100%;
    height: 100%;
  }
}