@supports (-webkit-overflow-scrolling: touch) {

  /* CSS specific to iOS devices */
  div.work-nav {
    width: 90% !important;
  }
}

@media screen and (max-width: 600px) {
  div.grid-works-1-3 {
    grid-template-columns: 50% 50% !important;
    padding-top: 0% !important;
    margin: 0 11% 0 7% !important;
    grid-row-gap: 1.5% !important;
    margin-bottom: 37.5% !important;
  }

  div.grid-works-1-2 {
    display: block !important;
  }

  div.work-info {
    padding: 21.7% 7.7% 0 7.7% !important;
    position: relative !important;
    margin-bottom: 10%;
  }

  div.nav-for-smartphone {
    display: block !important;
    margin: 10% 0;
  }

  div.smartphone-nav {
    width: 80% !important;
    margin-top: 10% !important;
    margin-left: 10% !important;
  }

  div.work-nav {
    margin-top: 32% !important;
    position: absolute !important;
    width: 80% !important;
    top: 17% !important;
    left: 9% !important;
  }

  h2.works {
    padding: 41.5% 0 19% 7% !important;
  }

  h2.work {
    margin: 6.5% 0 20% 0% !important;
  }

  h5.work-title {
    margin-top: 25%;
  }

  table.work-detail-short {
    margin-bottom: 0 !important;
  }
}

h2 {
  letter-spacing: 2px;
}

h2.works {
  padding: 18.5% 0 7% 9%;
}

h2.work {
  padding: 18.5% 0 9% 0;
}

h5.work-title {
  font-family: a-otf-ud-shin-go-pr6n;
  color: #000000;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  margin-bottom: 5%;
}

div.grid-works-1-3 {
  display: grid;
  grid-template-columns: 31% 31% 31%;
  grid-column-gap: 5%;
  margin: 0 9.8% 0 25%;
  grid-row-gap: 3.5%;
  margin-bottom: 21.5%;
  object-fit: fill;
}

div.grid-works-1-2 {
  display: grid;
  grid-template-columns: 50% 50%;
  object-fit: fill;
  margin-bottom: 8.2%;
}

div.work-info {
  padding: 21.7% 20.7% 0 15.4%;
}

div.work-info a {
  text-decoration: underline;
  color: #000;
  font-size: 12px;
  font-family: a-otf-ud-shin-go-pr6n;
}

div.nav-for-smartphone {
  display: none;
}

div.work-nav {
  margin-top: 32%;
  text-align: center;
  display: table;
  width: 100%;
}

div.smartphone-nav {
  margin-top: 32%;
  text-align: center;
  display: table;
  width: 100%;
}

div.work-nav a,
div.smartphone-nav a {
  color: #000;
}

div.work-nav a.work-arrow-left,
div.smartphone-nav a.work-arrow-left {
  display: table-cell;
  width: 33%;
  text-align: left;
}

div.work-nav a.work-arrow-right,
div.smartphone-nav a.work-arrow-right {
  display: table-cell;
  width: 33%;
  text-align: right;
}

div.work-nav div.grid-icon-wrapper,
div.smartphone-nav div.grid-icon-wrapper {
  width: 33%;
  vertical-align: middle;
  margin: 0 auto;
}

div.work-nav div svg.grid-icon,
div.smartphone-nav div svg.grid-icon {
  width: 60%;
  opacity: 0.5;
}

div.shop-link {
  margin-top: 2%;
}

div.shop-link span {
  font-size: 12px;
}

div.arrow-left:before {
  left: 0px;
  width: 18px;
  height: 18px;
  border-top: 2px solid #555555;
  border-right: 2px solid #555555;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

div.arrow-right:before {
  left: 0px;
  width: 18px;
  height: 18px;
  border-top: 2px solid #555555;
  border-right: 2px solid #555555;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

div.arrow-right-mini:before {
  left: 0px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #555555;
  border-right: 2px solid #555555;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

p.work-msg {
  font-family: a-otf-ud-shin-go-pr6n;
  color: #000000;
  font-size: 14px;
  font-weight: 300;
  line-height: 28px;
}

p.work-msg a {
  text-decoration: underline;
  color: #000;
}

p.work-detail {
  font-family: a-otf-ud-shin-go-pr6n;
  font-size: 12px;
  line-height: 28px;
  font-weight: 300;
}

table.work-detail {
  margin-top: 14.5%;
}

table.work-detail td {
  font-family: UDShinGoPr6N;
  color: #000000;
  font-size: 12px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 1px;
}

table.work-detail td.work-detail-left {
  width: 13%;
}

table.work-detail td.work-detail-middle {
  width: 6%;
}

table.work-detail-short {
  margin-bottom: 55%;
}

img.works-img,
img.work-img {
  width: 100%;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

img.works-img:hover {
  opacity: 0.8;
}

img.work-img2-left,
img.work-img2-right {
  width: 50%;
}

img.work-img2-right {
  float: right;
}

span.small-font {
  font-size: 12px;
}

a.apps {
  font-size: 45px !important;
  opacity: 0.6;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .grid-works-1-3 {
    display: grid;
    grid-template-columns: 31% 31% 31%;
    grid-column-gap: 5%;
    margin: 0 9.8% 0 25%;
    grid-row-gap: 3.5%;
    margin-bottom: 21.5%;
    object-fit: fill;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .grid-works-1-3 {
    display: grid;
    grid-template-columns: 31% 31% 31%;
    grid-column-gap: 5%;
    margin: 0 9.8% 0 25%;
    object-fit: fill;
    margin-bottom: 10%;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .works-a {
    margin-bottom: 14%;
  }

  .work-nav {
    margin-top: 32%;
    text-align: center;
    display: table;
    width: 100%;
  }

  .work-detail td {
    font-family: UDShinGoPr6N;
    color: #000000;
    font-size: 12px;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 600px) {

  _::-webkit-full-page-media,
  _:future,
  :root .grid-works-1-3 {
    margin-bottom: 14.5% !important;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .works-a {
    margin-bottom: 7.5%;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .work-nav {
    width: 95% !important;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .work-detail td {
    font-family: unset;
    font-weight: 100;
  }
}