main .boxes {
  display: block;
  position: relative;
  float: left;
  box-sizing: border-box;
}

main .boxes img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

main .box-L {
  width: 49.99%;
}

main .box-L:before {
  content: '';
  display: block;
  padding-top: 100%;
}

main .box-M {
  width: 25%;
}

main .box-M:before {
  content: '';
  display: block;
  padding-top: 100%;
}

main .box-M-in {
  width: 25%;
}

main .box-S {
  width: 50%;
}

main .box-S:before {
  content: '';
  display: block;
  padding-top: 100%;
}

main .visual_text {
  position: absolute;
  top: 36.7%;
  right: 0;
  left: 0;
  width: 50%;
  margin: 0 auto;
}

main .visual_text img {
  width: 100%;
}

main .boxes .js-color-box {
  position: absolute;
  top: 0;
  left: 0;
  /*
			border-left: #e7e2dc solid 1px;
			border-bottom: #e7e2dc solid 1px;
			*/
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: white;
  -webkit-transition: opacity 1s ease-out;
          transition: opacity 1s ease-out;
}

main .boxes .js-color-box.c1 {
  background-color: white;
  /*
				background-color:rgba(138,124,98,.5);
				*/
}

main .boxes .js-color-box.c2 {
  background-color: white;
}

main .boxes .js-color-box.c3 {
  background-color: white;
}

main .boxes .js-color-box.c4 {
  background-color: white;
}

main .boxes .js-color-box.c5 {
  background-color: white;
}

main .boxes .js-color-box.c6 {
  background-color: white;
}

main .boxes .js-color-box.c7 {
  background-color: white;
}

main .boxes .js-color-box.c8 {
  background-color: white;
}

main .boxes .js-color-box.c9 {
  background-color: white;
}

main .boxes .js-color-box.c10 {
  background-color: white;
}

main .boxes .js-color-box.is_hide {
  opacity: 0;
}

@media screen and (max-width: 767px) {
  main .box-L {
    width: 74.99%;
  }

  main .SPM {
    width: 50%;
  }

  main .visual_text {
    width: 90%;
  }
}