.works {
  background: url(/common/img/bg_quilt.png) #1f83bd; }
  .works .hero {
    background: url(/works/img/bg_works.jpg) no-repeat center;
    background-size: cover; }
  .works footer {
    background: #fff; }
  .works section[class^="contents"] {
    width: 100%;
    position: relative;
    margin: 0 0 50px;
    padding: 100px 0; }
    .works section[class^="contents"] .inner {
      max-width: 1160px;
      margin-left: auto;
      margin-right: auto;
      display: flex; }
      .works section[class^="contents"] .inner div {
        padding: 2em 1em;
        margin-left: auto;
        margin-right: auto; }
        .works section[class^="contents"] .inner div p img {
          margin-bottom: 1em; }
    .works section[class^="contents"] h2, .works section[class^="contents"] h3, .works section[class^="contents"] h4 {
      text-align: center; }
    .works section[class^="contents"] h2 {
      margin-top: 30px;
      line-height: 40px; }
      .works section[class^="contents"] h2::before {
        content: '';
        background: url(/works/img/ico_nanten.png) no-repeat;
        background-size: 30px;
        width: 40px;
        height: 40px;
        display: inline-block;
        vertical-align: sub; }
      .works section[class^="contents"] h2::after {
        content: '';
        background: url(/works/img/ico_nanten.png) no-repeat;
        background-size: 30px;
        width: 40px;
        height: 40px;
        display: inline-block;
        vertical-align: sub;
        transform: rotateY(180deg); }
      .works section[class^="contents"] h2 + p {
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 14px; }
        .works section[class^="contents"] h2 + p span {
          display: inline-block; }
    .works section[class^="contents"] h3 {
      margin: 0;
      font-size: 22px; }
    .works section[class^="contents"] h4 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 14px; }
      .works section[class^="contents"] h4::before, .works section[class^="contents"] h4::after {
        content: '-';
        width: 14px;
        height: 14px; }
    .works section[class^="contents"]::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 150%;
      height: 85%;
      margin: 50px -10% 0;
      background-color: #fff;
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
      z-index: -1; }
    .works section[class^="contents"]::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 120%;
      height: 85%;
      margin: 100px -10%;
      background-color: #1f83bd;
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      z-index: -2; }
  .works .contents01 .inner div {
    width: 45%;
    width: calc(100% / 2 - 2em); }
  .works .contents02 .inner div {
    width: 30%;
    width: calc(100% / 3 - 2em); }
    .works .contents02 .inner div h3 {
      margin-bottom: 10px; }

@media (min-width: 768px) and (max-width: 1160px) {
  .works section[class^="contents"] h2 + p {
    width: 90%;
    margin-bottom: 30px; }
  .works section[class^="contents"] .inner div {
    padding: 10px; }
  .works .contents01 .inner div {
    width: calc(100% / 2 - 20px); }
  .works .contents02 .inner div {
    width: calc(100% / 3 - 20px); } }
@media (max-width: 767px) {
  .works section[class^="contents"] .inner {
    display: inherit; }
    .works section[class^="contents"] .inner div {
      width: 100%; } }
@media (max-width: 750px) {
  .works section[class^="contents"] .inner div p {
    font-size: 14px; } }
@media screen and (max-width: 480px) {
  .works .hero {
    background: url(/works/img/bg_works_sp.jpg) no-repeat center;
    background-size: cover; }

  section[class^="contents"] h2 {
    font-size: 24px; } }
@media (max-width: 425px) {
  .works section[class^="contents"]::before, .works section[class^="contents"]::after {
    height: 90%;
    margin-left: -15%; }
  .works .contents02 .inner div:last-of-type p:last-of-type {
    margin-bottom: 30px; } }