html { height:100%; }

body {
  width: 100%;
  height:100%;
  font-size: 13px;
  background-color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  line-height: 1.5;
}

.u-clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.header {
  width: 800px;
  margin: 0 auto 22px;
}

.container {
  width: 800px;
  margin:0 auto 25px;
}

.footer {
  width: 800px;
  margin: 0 auto 30px;
}

.logo {
  float: left;
  margin: 27px 0 0 29px;
}

.logo img {
  width: 56px;
  height: auto;
}

.ig {
  float: right;
  margin: 39px 39px 0 0;
}

.ig img {
  width: 31px;
  height: auto;
}

.copyright {
  font-size: 10px;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: 0.1em;
  margin:0;
}

.unit01 {
  display: table;
  width: 100%;
  height: 420px;
}

.box-01 {
  position: relative;
  display: table-cell;
  width: 14.285%;
  height: 100%;
  overflow: hidden;
  transition-property: width;  
  transition-duration: 0.3s;  
  transition-timing-function: ease-out; 
}

.box-01 > a {
  position: absolute;
  top:0;
  left:50%;
  transition-property: width;  
  transition-duration: 0.3s;  
  transition-timing-function: ease-out; 
}

.box-01 > a > img {
  position: absolute;
  top:0;
  left:-325px;
  display: block;
  opacity: 0;
  transition-property: opacity;  
  transition-duration: 0.3s;  
  transition-timing-function: ease-in; 
}

.box-01 > a:hover > img {
  opacity: 1;
}

.unit02 {
  display: table;
  width: 100%;
  height: 37px;
}

.unit03 {
  display: table;
  width: 100%;
  height: 131px;
}

.unit04 {
  display: table;
  width: 100%;
  height: 100%;
}

.unit05 {
  display: table;
  width: 100%;
  height: 100%;
}

.box-02 {
  width: 14.285%;
}

.box-02,
.box-03,
.box-04,
.box-05 {
  display: table-cell;
  height: 100%;
}

.box7-5 {
  width: 71.42%;
}

.box-04 {
  width: 17.855%;
}

.box-05 {
  width: 4.763%;
}

.box7-2 {
  width: 14.29%;
}

.box-11 { background-color: #ffffff; }
.box-12 { background-color: #fff85d; }
.box-13 { background-color: #61faff; }
.box-14 { background-color: #8cff5f; }
.box-15 { background-color: #ff63ee; }
.box-16 { background-color: #ff6866; }
.box-17, .unit01 { background-color: #686fff; }
.box-21 { background-color: #6671ff; }
.box-22 { background-color: #595959; }
.box-23 { background-color: #fe68f4; }
.box-24 { background-color: #595959; }
.box-25 { background-color: #6afaff; }
.box-26 { background-color: #595959; }
.box-27 { background-color: #ffffff; }
.box-31 { background-color: #316b9d; }
.box-32 { background-color: #ffffff; }
.box-33 { background-color: #8a67ff; }
.box-34 { background-color: #595959; }
.box-351 { background-color: #333333; }
.box-352 { background-color: #595959; }
.box-353 { background-color: #828282; }
.box-36 { background-color: #595959; }


@media screen and (max-width: 768px){
  .header {
    position: relative;
    width: auto;
    margin: 0 20px;
  }

  .container {
    width: auto;
    margin:0 20px;
  }

  .footer {
    width: auto;
    margin: 0 10px;
    clear: both;
  }

  .logo {
    float: none;
    width: 56px;
    margin: 0 auto;
    padding: 15px 0 25px 
  }

  .logo img {
    display: block;
    width: 100%;
  }

  .ig {
    position: absolute;
    float: none;
    top: 10px;
    right: 0;
    margin: 0;
  }

  .ig img {
    width: 24px;
    height: auto;
  }

  .copyright {
    font-size: 9px;
    padding: 15px 0 20px;
  }

  .unit01 {
    display: block;
    width: 77%;
    height: 888px;
    float: left;
  }

  .box-01 {
    display: block;
    top:0;
    left:0;
    width: 100%;
    height: 14.285%;
    transition-property: height;  
    transition-duration: 0.3s;  
    transition-timing-function: ease-out; 
  }

  .box-01 > a {
    display: block;
    position: relative;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    transition-property: height;  
  }

  .box-01 > a > img {
    position: absolute;
    width: 100%;
    height: auto;
    top:0;
    left:0;
    display: block;
    opacity: 0;
    transition-property: opacity;  
    transition-duration: 0.3s;  
    transition-timing-function: ease-in; 
  }

  .box-01 > a:hover > img {
    opacity: 0;
  }

  .box-01 > a.js-is-active > img {
    opacity: 1;
  }

  .unit02 {
    display: block;
    width: 7%;
    height: 888px;
    float: left;
  }

  .unit03 {
    display: block;
    width: 16%;
    height: 888px;
    float: left;
  }

  .unit04 {
    display: block;
    width: 100%;
    height: 100%;
  }

  .unit05 {
    display: block;
    width: 100%;
    height: 100%;
  }

  .box-02 {
    display: block;
    width: 100%;
    height: 14.285%;
  }

  .box-03 {
    display: block;
    height: 14.285%;
  }

  .box-04 {
    display: block;
    width: 100%;
    height: 25%;
  }

   .box-05 {
    display: block;
    width: 100%;
    height: 33.3333%;
   }

  .box7-5 {
    width: 100%;
    height: 71.42%;
  }

  .box7-2 {
    width: 100%;
    height: 14.29%;
  }

}