@charset "utf-8";

html {
  background-color: rgb(13, 30, 57);
  font-size: 62.5%; /* 10 / 16 */
  overflow-x: hidden;
}

@media only screen and (max-width: 399px) {
  html {
    font-size: 46.875%; /* 12 / 16 * (10 / 16) */
  }
}

@media only screen and (min-width: 400px) and (max-width: 479px) {
  html {
    font-size: 50.78125%; /* 13 / 16 * (10 / 16) */
  }
}

@media only screen and (min-width: 480px) and (max-width: 559px) {
  html {
    font-size: 54.6875%; /* 14 / 16 * (10 / 16) */
  }
}

@media only screen and (min-width: 560px) and (max-width: 639px) {
  html {
    font-size: 58.59375%; /* 15 / 16 * (10 / 16) */
  }
}

body {
  background-color: rgb(13, 30, 57);
  color: #fff;
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'Noto Sans CJK JP', Meiryo, Roboto, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px;
  min-width: 300px;
  overflow-x: hidden;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 900px) {
  html {
    background: rgb(21, 39, 71) url(/image/global/background.png) repeat center top;
    background-size: 300px 300px;
  }

  body {
    box-shadow: 0 2px 5px 0 rgba(35, 35, 35, 0.26);
  }
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: #fff;
}

/* responsive style */
@media only screen and (max-width: 599px) {
  .tablet_only {
    display: none;
  }

  .pc_only {
    display: none;
  }

  .tablet_pc_only {
    display: none;
  }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
  .mobile_only {
    display: none;
  }

  .pc_only {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .mobile_only {
    display: none;
  }

  .tablet_only {
    display: none;
  }

  .mobile_tablet_only {
    display: none;
  }
}

.comic_cover {
  box-shadow: 0 2px 5px 0 rgba(70, 70, 70, 0.26);
}

#page_title {
  text-align: center;
}

.title_set > h1 {
  margin-bottom: 1.666666666667%; /* 15 / 900 */
  margin-top: 5%; /* 45 / 900 */
}

.genre_title_list_wrapper {
  position: relative;
}

.genre_character {
  position: absolute;
  left: 0;
  top: 0;
  width: 24.444444444444%; /* 220 / 900 */
}

.genre_title_list_wrapper .title_list {
  position: relative;
  z-index: 2;
}

.title_list {
  margin-left: auto;
  margin-right: auto;
}

.title_list::after {
  clear: left;
  content: '';
  display: block;
}

.title_list > li {
  float: left;
}

.sc_comic_list img {
  max-width: none;
  height: initial;
}

.title_list > li .img_container {
  display: block;
  position: relative;
  padding-top: 141.666666666667%; /* 340 / 240 */
}

.title_list > li .img_container > .img_wrapper {
  bottom: 0;
  left: 0;
  overflow: visible;
  position: absolute;
  right: 0;
  top: 0;
}

.title_list > li .img_container > .img_wrapper > img {
  display: block;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
}

.read_button_container {
  display: block;
  margin-top: 6.493506493506%; /* 10 / 154 */
}

.read_button_container,
.more_button_container {
  text-align: center;
}

@media only screen and (max-width: 599px) {
  .genre_character {
    width: 43.333333333333%; /* 260 / 600 */
  }

  .title_list {
    width: 98.333333333333%; /* 590 / 600 */
  }

  .title_list > li {
    margin-bottom: 2.542372881356%; /* 15 / 590 */
    margin-left: 0.847457627119%; /* 5 / 590 */
    margin-right: 0.847457627119%; /* 5 / 590 */
    margin-top: 2.542372881356%; /* 15 / 590 */
    width: 31.638418079096%; /* (590 - 5 * 2 * 3) / 3 / 590 */
  }

  .title_list > li .comic_cover {
    margin-bottom: 5.357142857143%; /* 10 / ((590 - 5 * 2 * 3) / 3) */
  }

  .genre_title_list_wrapper .title_list > li:first-child {
    margin-left: 34.180790960452%; /* ((590 - 5 * 2 * 3) / 3 + 5 * 3) / 590 */
  }

  .title_list > li:nth-child(3n+1) {
    clear: left;
  }

  .genre_title_list_wrapper .title_list > li:nth-child(3n+1) {
    clear: none;
  }

  .genre_title_list_wrapper .title_list > li:nth-child(3n) {
    clear: left;
  }

  .genre_title_list_wrapper .title_list.show_default_items > li:nth-child(n+6) {
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  .genre_character {
    width: 26.666666666667%; /* 240 / 900 */
  }

  .title_list {
    width: 91.111111111111%; /* 820 / 900 */
  }

  .title_list > li {
    margin-bottom: 1.829268292683%; /* 15 / 820 */
    margin-left: 0.609756097561%; /* 5 / 820 */
    margin-right: 0.609756097561%; /* 5 / 820 */
    margin-top: 1.829268292683%; /* 15 / 820 */
    width: 18.780487804878%; /* (820 - 5 * 2 * 5) / 5 / 820 */
  }

  .title_list > li .comic_cover {
    margin-bottom: 6.493506493506%; /* 10 / ((820 - 5 * 2 * 5) / 5) */
  }

  .genre_title_list_wrapper .title_list > li:first-child {
    margin-left: 20.609756097561%; /* ((820 - 5 * 2 * 5) / 5 + 5 * 3) / 820 */
  }

  .title_list > li:nth-child(5n+1) {
    clear: left;
  }

  .genre_title_list_wrapper .title_list > li:nth-child(5n+1) {
    clear: none;
  }

  .genre_title_list_wrapper .title_list > li:nth-child(5n) {
    clear: left;
  }

  .genre_title_list_wrapper .title_list.show_default_items > li:nth-child(n+10) {
    display: none;
  }
}

.more_button_container {
  margin-bottom: 7.5%; /* 45 / 600 */
  margin-top: 2.5%; /* 15 / 600 */
}

.more_button {
  cursor: pointer;
  width: 33.333333333333%; /* 200 / 600 */
}

@media only screen and (min-width: 600px) {
  .more_button_container {
    margin-bottom: 5%; /* 45 / 900 */
    margin-top: 1.666666666667%; /* 15 / 900 */
  }

  .more_button {
    width: 22.222222222222%; /* 200 / 900 */
  }
}

#page_footer {
  margin-top: 5%; /* 45 / 900 */
}

#csb_link_list,
#other_link_list {
  margin-left: auto;
  margin-right: auto;
}

#csb_link_list > li,
#other_link_list > li {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.111111111111%; /* 10 / 900 */
  max-width: 96.875%; /* 620 / 640 */
  text-align: center;
}

#csb_link_list {
  margin-top: 5%; /* 45 / 900 */
}

#csb_link_list > li {
  margin-left: auto;
  margin-right: auto;
  max-width: 46.153846153846%; /* 400 / (900 - 100 / 3) */
}

#other_link_list {
  width: 96.296296296296%; /* (900 - 100 / 3) / 900 */
}

#other_link_list::after {
  clear: left;
  content: '';
  display: block;
}

#other_link_list > li {
  margin-left: 1.923076923077%; /* (100 / 3 / 2) / (900 - 100 / 3) */
  margin-right: 1.923076923077%; /* 100 / 3 / 2 / (900 - 100 / 3) */
  margin-top: 1.153846153846%; /* 10 / (900 - 100 / 3) */
  width: 46.153846153846%; /* 400 / (900 - 100 / 3) */
  float: left;
}

#other_link_list > li:nth-child(2n+1) {
  clear: left;
}

#copyright {
  display: block;
  font-size: 1.6rem;
  margin-top: 5%; /* 45 / 900 */
  padding-bottom: 2rem;
  text-align: center;
}

#copyright img {
  min-width: 104px;
  width: 23.111111111111%; /* 208 / 900 */
}

/* detail */
#detail body {
  background: rgb(13, 30, 57) url(/image/detail/background.png) no-repeat center top;
  background-size: 100% auto;
}

#detail #page_title {
  margin-top: 1.111111111111%; /* 15 / 900 */
}

#detail #page_title > img {
  max-width: 583px;
  width: 77%;
}

#detail_title {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 1.666666666667%; /* 15 / 900 */
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.666666666667%; /* 15 / 900 */
  width: 95.555555555556%; /* 860 / 900 */
}

#detail_data {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.666666666667%; /* 15 / 900 */
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.666666666667%; /* 15 / 900 */
  width: 95.555555555556%; /* 860 / 900 */
}

#detail_data > .img_container {
  max-width: 240px;
  padding-right: 1.5625%; /* 5 / 320 */
  width: 43.75%; /* 140 / 320 */
}

#detail_data > .text_container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 1.5625%; /* 5 / 320 */
}

#detail_link_list {
  margin-bottom: 1.666666666667%; /* 15 / 900 */
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.333333333333%; /* 30 / 900 */
  width: 95.555555555556%; /* 860 / 900 */
}

#detail_link_list li {
  margin-bottom: 3.488372093023%; /* 30 / 860 */
  text-align: center;
}

#detail_link_list h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.581395348837%; /* 5 / 860 */
  text-align: center;
}

#detail_link_list img {
  min-width: 240px;
  width: 70.232558139535%; /* 604 / 860 */
}

#site_top_nav {
  text-align: center;
}

#site_top_nav img {
  min-width: 222px;
  width: 37%; /* 333 / 900 */
}

#sns_buttons_container::after {
  clear: right;
}

#sns_buttons_container .sns_buttons {
  margin-bottom: -2.777777777778%; /* -25 / 900 */
  margin-left: 2.777777777778%; /* 25 / 900 */
  margin-top: 0.888888888889%; /* 8 / 900 */
}

.sns_buttons td {
  padding: 4px;
}

.fb-like > span {
  vertical-align: inherit !important;
}


#cp_visual{
  padding-top:5%;
}