@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);
}

.delay01 {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.delay015 {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.delay02 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.delay03 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.delay04 {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.delay05 {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.delay06 {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.delay08 {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

/* ------------------------------------
  font
------------------------------------ */
.f_abo,
.f_hel {
//  font-family: "abolition-soft",sans-serif;
//  font-family: 'Helvetica Neue',sans-serif;
  font-family: 'Didact Gothic', sans-serif;
}

/* ------------------------------------
  common
------------------------------------ */
/* #load */
#load {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
#load:before,
#load:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#load:before {
  background-color: #fff;
  z-index: 5;
}
#load:after {
  background-color: #DE6244;
  z-index: 1;
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}
#load.end:before,
#load.end:after {
//  -webkit-transform: translate3d(0,100%,0);
//  transform: translate3d(0,100%,0);
}

#load .icn {
  width: 55px;
  height: 55px;
  position: absolute;
  top: -50px;
  left: -50px;
  bottom: 0;
  right: 0;
  z-index: 10;
  margin: auto;
  -webkit-transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#load .icn.i2 {
  width: 50px;
  height: 50px;
  top: 50px;
  left: 50px;
}
#load.end .icn.i1 {
  -webkit-transform: scale3d(0,0,0) rotate(360deg)!important;
  transform: scale3d(0,0,0) rotate(360deg)!important;
}
#load.end .icn.i2 {
  -webkit-transform: scale3d(0,0,0) rotate(-360deg)!important;
  transform: scale3d(0,0,0) rotate(-360deg)!important;
}

#load .icn span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#load .icn.i1 span {
  background-image: url("../img/icn_load1.png");
}
#load .icn.i2 span {
  background-image: url("../img/icn_load2.png");
}
#load.action .icn.i1 span {
  -webkit-animation: pads_anime1 1.5s infinite;
  animation: pads_anime1 1.5s infinite;
}
#load.action .icn.i2 span {
  -webkit-animation: pads_anime2 1.5s infinite -0.1s;
  animation: pads_anime2 1.5s infinite -0.1s;
}

@-webkit-keyframes pads_anime1 {
  0%,50%,100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  15% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }
  20% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  25% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }
  32% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }
  37% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }
}
@keyframes pads_anime1 {
  0%,50%,100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  15% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }
  20% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  25% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }
  32% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }
  37% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }
}
@-webkit-keyframes pads_anime2 {
  0%,50%,100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  15% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }
  20% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  25% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }
  32% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }
  37% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }
}
@keyframes pads_anime2 {
  0%,50%,100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  15% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }
  20% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  25% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }
  32% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }
  37% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }
}


/* #page_trans */
#page_trans {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
}
#page_trans:before,
#page_trans:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
#page_trans:before {
  background-color: #fff;
  z-index: 5;
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}
#page_trans:after {
  background-color: #DE6244;
  z-index: 1;
}

#page_trans.start:before,
#page_trans.start:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#page_trans.end:before,
#page_trans.end:after {
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}
#page_trans.end:before {
  -webkit-transition-delay: 0ms!important;
  transition-delay: 0ms!important;
}
#page_trans.end:after {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}


/* #popup */
#popup,
#popup_meet {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 888;
  background-color: #F7F7F7;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  display: none;
}

#popup .popup_close_area,
#popup_meet .popup_close_area {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ------------------------------------
  anime
------------------------------------ */
.js-fade,
.js-fade_h {
  -webkit-transform: translate3d(0,100px,0) scale(0.6);
  transform: translate3d(0,100px,0) scale(0.6);
  -webkit-border-radius: 100px 100px;
  border-radius: 100px 100px;
  opacity: 0;
  -webkit-transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000),border-radius 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000),border-radius 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#thum_list .grid-item:nth-child(2n) .js-fade_h {
  -webkit-transform: translate3d(100px,0,0) scale(0.6);
  transform: translate3d(100px,0,0) scale(0.6);
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}
#thum_list .grid-item:nth-child(3n) .js-fade_h {
  -webkit-transform: translate3d(-100px,0,0) scale(0.6);
  transform: translate3d(-100px,0,0) scale(0.6);
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}
.js-fade.on,
.on .js-fade_h {
  -webkit-transform: translate3d(0,0,0) scale(1)!important;
  transform: translate3d(0,0,0) scale(1)!important;
  -webkit-border-radius: 0 0!important;
  border-radius: 0 0!important;
  opacity: 1!important;
}