@media screen and (max-width: 600px) {
  div.grid-cmfffs-1-2 {
    display: block !important;
    padding-top: 50% !important; }
  div.grid-cmfffs-1-3 {
    grid-template-columns: 50% 50% !important;
    grid-column-gap: 0 !important;
    margin: 5% 0 25% 0 !important;
    grid-row-gap: 1% !important; }
  div.cmfffs-info {
    padding: 0 8.6% !important;
    margin-bottom: 6.5%; }
  div.cmfffs-idea {
    padding: 8.5% 0% 8.5% 30.5% !important; }
  div.smartphone-caption {
    display: block !important; }
  div.caption-div {
    padding-top: 13%;
    height: 87%; }
  div.COLOR {
    background-color: #794d8b; }
  div.MATERIAL {
    background-color: #6d473e; }
  div.FINISH {
    background-color: #383f4a; }
  div.FORM {
    background-color: #455452; }
  div.FUNCTION {
    background-color: #45557e; }
  div.STATE {
    background-color: #c7819d; }

  h2.caption-1, h2.caption-2 {
    transform: scale(0.8, 0.8); }
  h2.caption-1 {
    margin-bottom: 3% !important; }
  h2.caption-2 {
    margin-bottom: 3% !important; }

  p.cmfffs-info {
    transform: scale(0.8, 0.8); } }
div.grid-cmfffs-1-2 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 0;
  margin-bottom: 6.5%; }
div.grid-cmfffs-1-3 {
  display: grid;
  grid-template-columns: 31% 31% 31%;
  grid-column-gap: 5%;
  margin: 0 9.8% 0 9%;
  grid-row-gap: 6.5%;
  margin-bottom: 10%; }
div.cmfffs-info {
  padding: 33.6% 16% 0 18%; }
div.cmfffs-idea {
  background-color: #f7f7f7;
  padding: 36.5% 0% 1% 49.5%; }
  div.cmfffs-idea p {
    font-size: 30px;
    line-height: 60px;
    text-align: left;
    letter-spacing: 3px; }
div.cmfffs {
  overflow: hidden;
  position: relative; }
  div.cmfffs .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(41, 41, 41, 0.8);
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease; }
  div.cmfffs:hover .mask {
    opacity: 1; }
div.caption {
  padding: 25% 5%; }
div.smartphone-caption {
  display: none; }

h2.cmfffs {
  margin-bottom: 9%; }
h2.caption-1, h2.caption-2 {
  color: #ffffff;
  font-weight: 300;
  line-height: 35px;
  font-size: 30px;
  letter-spacing: 2px;
  text-align: center; }
h2.caption-1 {
  margin-bottom: 10%; }
h2.caption-2 {
  font-family: a-otf-ud-shin-go-pr6n;
  margin-bottom: 5%; }

p.cmfffs-msg {
  font-family: a-otf-ud-shin-go-pr6n;
  color: #000000;
  font-size: 14px;
  font-weight: 300;
  line-height: 28px; }
p.msg1 {
  margin-bottom: 5%; }
p.cmfffs-info {
  font-family: a-otf-ud-shin-go-pr6n;
  color: #ffffff;
  font-weight: 300;
  line-height: 35px;
  font-size: 15px;
  text-align: center;
  letter-spacing: 1px; }
p.black {
  display: inline-block; }
p.light-gray {
  display: inline-block;
  color: #cdcdcd; }

img.cmfffs-img {
  width: 100%; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .grid-cmfffs-1-3 {
    display: grid;
    grid-template-columns: 31% 31% 31%;
    grid-column-gap: 5%;
    margin: 0 9.8% 0 9%;
    grid-row-gap: 6.5%;
    margin-bottom: 10%; }

  _::-webkit-full-page-media, _:future, :root div.grid-cmfffs-1-3 {
    margin-bottom: 4.3%; }

  .cmfffs {
    position: relative; }

  _::-webkit-full-page-media, _:future, :root div.cmfffs {
    margin-bottom: 13%; } }
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
  _::-webkit-full-page-media, _:future, :root div.cmfffs {
    margin-bottom: 6.1%; }

  _::-webkit-full-page-media, _:future, :root div.smartphone-caption {
    margin-bottom: 6.1%; }

  _::-webkit-full-page-media, _:future, :root div.grid-cmfffs-1-3 {
    margin: 5% 0 7% 0 !important; } }