@charset "UTF-8";
/********************************************
マンガでわかる 交通安全 index
*********************************************/
/*----------------------------------------
       Reset
----------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  box-sizing: border-box;
  vertical-align: baseline;
  background: transparent; }

html {
  font-size: 62.5%; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: none; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

#comic_index {
  /***********ソート************/ }
  #comic_index .sort_wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 80vw;
    margin: 4em auto 0;
    font-size: 2.5vw;
    line-height: 1em; }
    @media only screen and (min-width: 750px) {
      #comic_index .sort_wrap {
        width: calc(1000/ 1190 * 100vw);
        font-size: calc(16/ 1190 * 100vw);
        margin: 4em auto 0; } }
    @media only screen and (min-width: 1190px) {
      #comic_index .sort_wrap {
        width: 1000px;
        font-size: 1.6rem; } }
    #comic_index .sort_wrap .sort_text {
      color: #468bc2;
      width: 100%;
      text-align: center;
      margin: 0em 0.3em 0; }
      @media only screen and (min-width: 750px) {
        #comic_index .sort_wrap .sort_text {
          width: 8em;
          text-align: center; } }
  #comic_index .comic_sort {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center; }
    @media only screen and (min-width: 750px) {
      #comic_index .comic_sort {
        flex-wrap: nowrap;
        width: calc(705/ 1190 * 100vw);
        margin: 0; } }
    @media only screen and (min-width: 1190px) {
      #comic_index .comic_sort {
        width: 705px; } }
    #comic_index .comic_sort li {
      display: flex;
      width: 8em;
      text-align: center;
      justify-content: center;
      border-radius: 1em;
      padding: 0.25em;
      margin: 1em 0.3em 0;
      filter: none; }
      @media only screen and (min-width: 750px) {
        #comic_index .comic_sort li {
          text-align: left;
          cursor: pointer;
          margin: 0 0.4em 0; } }
    #comic_index .comic_sort .active {
      background-color: #468bc2;
      color: #FFF;
      pointer-events: none; }
    #comic_index .comic_sort .all {
      color: #468bc2;
      border: 1px solid #468bc2; }
      #comic_index .comic_sort .all.active {
        background-color: #468bc2;
        color: #FFF; }
    #comic_index .comic_sort .pedestrian {
      color: #d89b4a;
      border: 1px solid #d89b4a; }
      #comic_index .comic_sort .pedestrian.active {
        background-color: #d89b4a;
        color: #FFF; }
    #comic_index .comic_sort .bicycle {
      color: #129e90;
      border: 1px solid #129e90; }
      #comic_index .comic_sort .bicycle.active {
        background-color: #129e90;
        color: #FFF; }
    #comic_index .comic_sort .car {
      color: #c4656c;
      border: 1px solid #c4656c; }
      #comic_index .comic_sort .car.active {
        background-color: #c4656c;
        color: #FFF; }
    #comic_index .comic_sort .trivia {
      color: #4ca9cb;
      border: 1px solid #4ca9cb; }
      #comic_index .comic_sort .trivia.active {
        background-color: #4ca9cb;
        color: #FFF; }

/***********インデックス************/
#comic_index_ ul.comic_index {
  width: 90vw;
  margin: 10vw auto 0; }
  @media only screen and (min-width: 750px) {
    #comic_index_ ul.comic_index {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: calc(1020 / 1190 * 100vw);
      margin: calc(80 / 1190 * 100vw) auto 0; } }
  @media only screen and (min-width: 1190px) {
    #comic_index_ ul.comic_index {
      width: 1020px;
      margin: 80px auto 0; } }
  #comic_index_ ul.comic_index li {
    display: none;
    width: 100%;
    margin-bottom: 6em; }
    @media only screen and (min-width: 750px) {
      #comic_index_ ul.comic_index li {
        width: calc(490 / 1190 * 100vw);
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-end; } }
    @media only screen and (min-width: 1190px) {
      #comic_index_ ul.comic_index li {
        width: 490px; } }
    #comic_index_ ul.comic_index li.active {
      display: block; }
      @media only screen and (min-width: 750px) {
        #comic_index_ ul.comic_index li.active {
          display: flex; } }
  #comic_index_ ul.comic_index h4 {
    width: 100%;
    color: #4d4d4d;
    font-size: 1.6rem;
    margin: 0 0 0.7em 0;
    border-radius: 50rem; }
    @media only screen and (min-width: 750px) {
      #comic_index_ ul.comic_index h4 {
        font-size: calc(22 / 1190 * 100vw); } }
    @media only screen and (min-width: 1190px) {
      #comic_index_ ul.comic_index h4 {
        font-size: 2.2rem; } }
    #comic_index_ ul.comic_index h4 span {
      display: block;
      text-align: center;
      background: #4d4d4d;
      padding: 0.2em 0.6em;
      margin: 0em 0.2em 0.5em 0;
      color: #FFF;
      font-size: 1.6rem;
      font-weight: bold;
      border-radius: 50rem; }
      @media only screen and (min-width: 750px) {
        #comic_index_ ul.comic_index h4 span {
          font-size: calc(22 / 1190 * 100vw); } }
      @media only screen and (min-width: 1190px) {
        #comic_index_ ul.comic_index h4 span {
          font-size: 2.2rem; } }
    #comic_index_ ul.comic_index h4 .pedestrian {
      background-color: #d89b4a;
      width: 5em; }
    #comic_index_ ul.comic_index h4 .bicycle {
      background-color: #129e90;
      width: 5em; }
    #comic_index_ ul.comic_index h4 .car {
      background-color: #c4656c;
      width: 9em; }
    #comic_index_ ul.comic_index h4 .trivia {
      background-color: #4ca9cb;
      width: 5em; }
  #comic_index_ ul.comic_index .thum {
    width: 70%;
    margin: 0 auto 1.5em; }
    @media only screen and (min-width: 750px) {
      #comic_index_ ul.comic_index .thum {
        width: calc(278 / 1190 * 100vw);
        margin: 0; } }
    @media only screen and (min-width: 1190px) {
      #comic_index_ ul.comic_index .thum {
        width: 280px; } }
    #comic_index_ ul.comic_index .thum img {
      width: auto;
      height: auto; }
  #comic_index_ ul.comic_index .bt {
    width: 10em;
    display: block;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-size: 2.5vw 2.933vw;
    background-position: right 1em center;
    color: #74a1d5;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 9999px;
    border: 2px solid #74a1d5;
    padding: 1em 1em 1em 0em;
    margin: 0 auto;
    background-image: url("../img/common/arrow_b.svg"); }
    @media only screen and (min-width: 750px) {
      #comic_index_ ul.comic_index .bt {
        width: calc(178 / 1190 * 100vw);
        background-size: 15px 17px;
        font-size: 1.3rem;
        border: 3px solid #74a1d5;
        margin: 0; } }
    @media only screen and (min-width: 1190px) {
      #comic_index_ ul.comic_index .bt {
        width: 10em;
        font-size: 1.7rem;
        background-size: 16px 19px;
        border: 3px solid #74a1d5; } }
    #comic_index_ ul.comic_index .bt:hover {
      background-color: #74a1d5;
      color: #FFF;
      border: 2px solid #74a1d5;
      background-image: url("../img/common/arrow_w.svg"); }
      @media only screen and (min-width: 750px) {
        #comic_index_ ul.comic_index .bt:hover {
          border: 3px solid #74a1d5; } }