@media (max-width: 973px) {
                          header {
                              background-position: center -50px;
                          }
                          header .container {
                          }
                          .wrap {
                            max-width: 800px;
                          }
                          .content {
                            max-width: 650px;
                          }
                          .content .container {
                            justify-content: space-around;
                          }
                          .content .container article {
                            margin: 50px 0 0 0;
                          }
                          header nav {
                          	float: none;
                          }
                          header nav a {
                          	color: #fff;
                          }
                          header nav ul {
                          	position: none;
                          }
                          header nav ul li {
                          	float: none;
                          }
                          header button {
                          	display: block;
                          }
                          .drawer-brand {
                          		display: block;
                          }
                          table {
                            max-width: 90%;
                          }
                          table tr {
                            height: 80px;
                            margin: 0;
                          }
                          table tr th {
                          	width: 13%;
                          }
                          table tr td {
                          	width: 87%;
                            margin: 0;
                          }
                        }
          @media (max-width: 769px) {
            body {
              z-index: -5;
            }
            header {
              z-index: 0;
            }
            header .container {
            }
            body a .logo {
              width: 90%;
              top: 234px;
              background-size: contain;
            }
            body a .logo:hover {
              width: 90%;
              top: 234px;
              background-size: contain;
            }
            .content {
              width: 95%;
              max-width: 95%;
              margin: 0 auto;
            }
            .content .container {
              flex-direction: row;
            }
            .thumbnail {
              width: 45%;
              height: auto;
            }
            .thumbnail .inner {
              width: 100%;
              height: 100%;
            }
            .thumbnail .inner:hover {
              padding: 0;
              bottom: 0;
              height: 100%;
            }
            .thumbnail .caption {
              font-size: 15px;
              font-weight: bold;
              padding: 23px 0 0 0;
            }
            .thumbnail .time {
              padding: 0;
              line-height: 1.5em;
              position: absolute;
              bottom: 16px;
              left: 33%;
            }
            .cl-effect-14 .inner::before {
              top: 26px;
            }
            .cl-effect-14 .inner::after {
              bottom: 26px;
            }
            .content .container article {
              margin: 10px 0 30px 0;
            }
            .content .container article a figure img {
              width: 100%;
            }
            .work {
              background-position: 0,center 40px;
              background-size: auto,cover;
              background-attachment: fixed;
            }
            .news {
            	width: 100%;
            	text-align: center;
            	margin: 150px auto 0;
              background: url(img/bg_line_white.png), url(img/bg_body_sp.png) repeat-y;
            	background-position: center center;
        	    background-size: 170% 170%;
            	background-attachment: fixed;
            	padding: 0 0 100px 0;
              position: relative;
              display: block;
              z-index: 0;
            }
          }
@media (max-width: 615px) {
  header {
    width: 100%;
    height: 400px;
    background-position: center -20px;
  }
  header .container {
    max-width: 100%;
  }
  .logo {
    width: 90%;
    height: 190px;
    top: 30%;
    background-position: contain;
    margin: 0 auto;
  }
  .logo:hover {
    width: 90%;
    height: 190px;
    margin: 0 auto;
    background-position: contain;
  }
  .news h1 {
    padding: 50px 0 50px 0;
  }
  table, tbody, tr, th, td {
  display: block;
  }
  table {
    font-size: 0.9em;
  }
  table tr {
    height: auto;
  }
  table tr th {
    font-family: 'Saira Semi Condensed', serif;
    width: 100%;
    font-size: 0.8em;
  }
  table tr td {
    width: 100%;
    padding: 0 20px 10px 20px;
    text-align: center;
  }
  .random {
    background-position: 0,center 0;
  }
}
@media (max-width: 501px) {
  .content {
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
  }
  .iphone .news {
    background: url(img/bg_line_white.png), url(img/bg_body_sp.png) repeat-y;
    background-position: center center;
    background-size: 300% 130%;
    background-attachment: scroll;
  }
  .iphone .work {
    background-attachment: scroll;
    background-position: top center;
  }
}