@charset "UTF-8";

@import url("./pc.css") screen and (min-width: 701px);
@import url("./sp.css") screen and (max-width: 700px);

/* ------------------------------------
  transiton
------------------------------------ */
.tra03 {
  -webkit-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra05 {
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra08 {
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra10 {
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra15 {
  -webkit-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra20 {
  -webkit-transition: all 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra30 {
  -webkit-transition: all 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tra40 {
  -webkit-transition: all 4000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 4000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.delay01 {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}

.delay02 {
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}

.delay03 {
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms;
}

.delay04 {
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
}

.delay05 {
  -webkit-transition-delay: 500ms;
  transition-delay: 500ms;
}

.delay06 {
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}

.delay08 {
  -webkit-transition-delay: 800ms;
  transition-delay: 800ms;
}


/* ------------------------------------
  font
------------------------------------ */
.f_dupla { 
  font-family: Dupla;
  font-weight: normal;
  font-style: normal;
}

/* ------------------------------------
  #common
------------------------------------ */
#load {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1111;
  background-color: #F4F4F4;
}

.js-skew,
.js-skew_h {
  -webkit-transform: translate3d(0,100px,0) skewY(-8deg);
  transform: translate3d(0,100px,0) skewY(-8deg);
  opacity: 0;
}
.js-skew.on,
.on .js-skew_h {
  -webkit-transform: translate3d(0,0,0) skewY(0deg);
  transform: translate3d(0,0,0) skewY(0deg);
  opacity: 1;
}

.js-appear,
.js-appear_h {
  -webkit-transform: translate3d(0,100px,0);
  transform: translate3d(0,100px,0);
  opacity: 0;
  -webkit-transition-property: transform,opacity!important;
  transition-property: transform,opacity!important;
}
.js-appear.on,
.on .js-appear_h {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}

.js-pic,
.js-pic_h {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.js-pic.on,
.on .js-pic_h {
  -webkit-transform: scale(1);
  transform: scale(1);
}