@charset "UTF-8";

/* ------ all reset ------*/
body {
  margin: 0;
  padding: 0;
  word-break: break-all;
  word-wrap: break-word;
  -moz-word-wrap: break-word;
  font-size: 14px;
  color: #333333;
}
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, p, blockquote, fieldset, div, select, input, option {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

ul li, ol li {
  list-style: none; }

table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%; }

caption {
  text-align: left; }

table, pre, code, select, input, textarea, kbd, var, ins, del, samp {
  font-size: 100%; }

address, cite, dfn, em, strong, var, th, ins, del, samp {
  font-weight: normal;
  font-style: normal; }

a img {
  border: 0; }

table, pre, code, select, input, textarea, kbd, var, ins, del, samp {
  font-size: 100%; }

input, button {
  word-break: break-all;
  word-wrap: break-word; }

img {
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic; }

  @media screen and (min-width: 320px) and (max-width: 640px) {
    .contents {
      width: 100%; } }
  @media screen and (min-width: 640px) {
    .contents {
      width: 640px; } }
    @media screen and (min-width: 1020px) and (max-width: 1350px) {
    .contents {
      width: 1020px; } }
  @media screen and (min-width: 1350px) and (max-width: 1680px) {
    .contents {
      width: 1360px; } }
  @media screen and (min-width: 1680px) {
    .contents {
      width: 1700px; } }

a{
  text-decoration: none;
}

/*--contents--*/
.contents {
  width: 1080px;
  margin: 0 auto;
}

.articles__list {
  display: -webkit-flex; /* Safari */
  display: flex;

  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

.articles__list li {
  width: 23%;
  padding: 0 1%;
  position:relative;
  background-color: #f7faff;
  border-radius: 10px;
  margin-bottom: 10px;
}