@charset "UTF-8";
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
#root{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}
.clearfix {zoom:1;}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.hiddenText{
  text-indent: -9999px;
}
h1,h2,h3,h4 {
  font-weight: normal;
}
img{
  vertical-align: bottom;
}
ul,li{
  list-style: none;
}
a{
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}
@font-face {
  font-family:'Circular';
  src:url(/font/Circular.eot);
  src:url(/font/Circular.woff) format('woff'),
      url(/font/Circular.svg#CircularStd-Book) format('svg'),
      url(/font/Circular.ttf) format('truetype'),
      url(/font/Circular.eot?#iefix) format('embedded-opentype');
  font-weight:400;
  font-style:normal;
  font-stretch:normal;
}

body {
  background: #15161b;
  color: #fff;
  overflow-y:scroll;
  width: 100%;
  min-height: 100%;
  font-size: 100%;
  font-family: "Circular",AppleGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "palt";
  -ms-font-feature-settings: "palt";
  -o-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt=1";
  padding: 0;
  margin: 0;
}

#root{
  top: 0;
  left: 0;
  position: fixed;
  margin: 0 auto;
  overflow: hidden;
}
#scrollMask{
  position: relative;
  margin: 0 auto;
}
#scrollMaster {
  width: 20px;
  position: relative;
  float: right;
  z-index: 10000;
  overflow-y: scroll;
}
#scrollBody{
  /*display: none;*/
}


header {
  visibility: hidden;
  position: relative;
  top: 0;
  width: 960px;
  height: 174px;
  z-index: 1000;
}
  header #logo{
    cursor: pointer;
    position: absolute;
    left: -4px;
    top: 59px;
    width: 147px;
    height: 58px;
    z-index: 20;
    background-position: -32px -115px;
  }
    header #logo #logoType{
      position: absolute;
      left: 0;
      top: 0;
      width: 62px;
      height: 46px;
      z-index: 20;
    }
      header #logo #logoType .type{
        position: absolute;
        width: 0;
        height: 10px;
        left: -16px;
        margin-top: -3px;
        overflow: hidden;
      }
      header #logo #logoType .type#logoType1{
        top: 0;
        background: url(/images/common/shared.png);
        background-position: -32px -115px;
      }
      header #logo #logoType .type#logoType2{
        top: 18px;
        background: url(/images/common/shared.png);
        background-position: -32px -133px;
      }
      header #logo #logoType .type#logoType3{
        top: 36px;
        background: url(/images/common/shared.png);
        background-position: -32px -151px;
      }
        header #logo #logoType .type .cover{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: #eda74c;
        }
        header #logo #logoType .type .cover.on{
          animation: coloring 600ms cubic-bezier(0.975, 0.005, 0.000, 1.000) normal forwards;
          -webkit-animation: coloring 600ms cubic-bezier(0.975, 0.005, 0.000, 1.000) normal forwards;
          -moz-animation: coloring 600ms cubic-bezier(0.975, 0.005, 0.000, 1.000) normal forwards;
          -ms-animation: coloring 600ms cubic-bezier(0.975, 0.005, 0.000, 1.000) normal forwards;
          -o-animation: coloring 600ms cubic-bezier(0.975, 0.005, 0.000, 1.000) normal forwards;
        }
          @keyframes coloring{
            0%   { background-color:#eda74c; }
            100%  { background-color:#29abe2; }
          }
          @-webkit-keyframes coloring{
            0%   { background-color:#eda74c; }
            100%  { background-color:#29abe2; }
          }
          @-moz-keyframes coloring{
            0%   { background-color:#eda74c; }
            100%  { background-color:#29abe2; }
          }
          @-ms-keyframes coloring{
            0%   { background-color:#eda74c; }
            100%  { background-color:#29abe2; }
          }
          @-o-keyframes coloring{
            0%   { background-color:#eda74c; }
            100%  { background-color:#29abe2; }
          }
    header #logoMark{
      position: absolute;
      left: 13px;
      top: 0;
      width: 134px;
      height: 58px;
      z-index: 15;
      background: url(data:image/png;base64,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);
    }
    header #logoMarkBG{
      overflow: hidden;
      position: absolute;
      left: 13px;
      top: 0;
      width: 134px;
      height: 58px;
      z-index: 10;
      background: url(data:image/png;base64,R0lGODlhhgA6AIAAAO2nTCmr4iH5BAAAAAAALAAAAACGADoAAALehI+py+0eopy02ouzlq/7D27iSJLgiaLlyrLpCzPtTGPxfdf6jvfpDpz5hp+gsURMQo5MjfKpaEov0Kphip1Yq9nuFtrNfp9h7FhZnp6Taema2G6+h3Hm3Fc/3nt54x7XF/SXE8gzCFNoePiTWLP40uj4qBIpNHlSaXlZlOmyydmJ9OkRujJKWmpy+pCqutrQOvK6FOs0K1NrexuVm7G70Ov7mxBsM4xQTHV8kGyxzNxM8XwVrTVdbf2MzXG9HTAN4P3dvQ0ubu6NXk6Ord7OXu0eDx8tX0/fbJ+Pn1wAADs=);
    }
    header #logoMarkBG figure{
      visibility: hidden;
      position: absolute;
    }
    header #logoMarkBG figure:last-child{
      visibility: visible;
    }
  #profile{
    position: absolute;
    right: 0;
    top: 50px;
    width: 410px;
    height: 65px;
  }
    #profile > p{
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      width: 293px;
      height: 27px;
      background: url(/images/common/shared.png);
      background-position: 0 0;
    }
    #profile #internet{
      position: absolute;
      left: 0;
      top: 41px;
      width: 183px;
      height: 24px;
      background: url(/images/common/shared.png);
      background-position: 0 -43px;
    }
      #profile #internet a{
        position: absolute;
        display: block;
        height: 22px;
        top: 1px;
      }
      #profile #internet a#vimeo{
        background: transparent;
        width: 26px;
        left: 68px;
      }
      #profile #internet a#youtube{
        background: transparent;
        width: 32px;
        left: 94px;
      }
      #profile #internet a#twitter{
        background: transparent;
        width: 28px;
        left: 126px;
      }
      #profile #internet a#tumblr{
        background: transparent;
        width: 28px;
        left: 154px;
      }
      #profile #internet a#vimeo:hover{
        background: url(/images/common/shared.png);
        background-position: -183px -44px;
      }
      #profile #internet a#youtube:hover{
        background: url(/images/common/shared.png);
        background-position: -209px -44px;
      }
      #profile #internet a#twitter:hover{
        background: url(/images/common/shared.png);
        background-position: -241px -44px;
      }
      #profile #internet a#tumblr:hover{
        background: url(/images/common/shared.png);
        background-position: -269px -44px;
      }
    #profile #mail{
      position: absolute;
      left: 199px;
      top: 41px;
      width: 211px;
      height: 24px;
    }
      #profile #mail a{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: url(/images/common/shared.png);
        background-position: 0 -67px;
      }
      #profile #mail a:hover{
        background-position: 0 -91px;
      }
    #profile .line{
      position: absolute;
      left: 182px;
      top: 52px;
      background: #fff;
      width: 18px;
      height: 1px;
    }

nav{
  visibility: hidden;
  width: 960px;
  position: relative;
  padding: 0;
  margin: 0 auto;
}
  nav h2{
    width: 100px;
    height: 14px;
    margin-bottom: 8px;
    background: url(/images/common/shared.png);
    background-position: -94px -143px;
  }
  nav ul#worksNav{

  }
    nav ul#worksNav li{
      float: left;
      display: inline-block;
      color: #d9d9d9;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0.06em;
    }
    nav ul#worksNav li a{
      cursor: pointer;
    }
    nav ul#worksNav li a:hover{
      opacity: 0.4;
    }
  nav .line{
    background: #5c5c60;
    width: 5px;
    height: 1px;
    position: absolute;
  }
  nav .line.left{
    left: -21px;
  }
  nav .line.right{
    right: -21px;
  }
  nav .line.top{
    top: 26px;
  }
  nav .line.bottom{
    bottom: 4px;
  }

#worksList {
  width: 960px;
  height: 100%;
  position: relative;
  padding: 0 0 80px;
  margin: 112px auto 0;
}
  .works{
    display: block;
    float: left;
    position: relative;
    margin-bottom: 112px;
    /*visibility: hidden;*/
  }
  .works.shown{
    visibility: visible;
  }
    .works h2{
      position: relative;
      height: 31px;
      letter-spacing: 0.06em;
      font-weight: normal;
      font-size: 18px;
      line-height: 18px;
      color: #fff;
    }
    .win .works h2{
      letter-spacing: 0.08em;
      font-size: 16px;
      line-height: 16px;
    }
    .works .thumb{
      width: 960px;
      height: 270px;
      position: relative;
    }
    .works .thumb .line{
      background: url(/images/common/line.gif);
      width: 5px;
      height: 270px;
      position: absolute;
      top: 0;
      z-index: 1;
    }
    .works .thumb .line.left{
      left: -21px;
    }
    .works .thumb .line.right{
      right: -21px;
    }
    .works .thumb .staffpicks{
      position: absolute;
      left: -48px;
      top: 29px;
      width: 32px;
      height: 32px;
      background: url(/images/common/shared.png);
      background-position: 0 -115px;
      overflow: hidden;
      z-index: 2;
    }
      .works .thumbLarge{
        cursor: pointer;
        background: url(/images/common/thumbLarge.gif);
        position: absolute;
        width: 480px;
        height: 270px;
        left: 0;
        top: 0;
      }
      .works .thumbLarge .playBtn{
        display: none;
        z-index: 10;
        position: absolute;
        left: 198px;
        top: 93px;
        width: 84px;
        height: 84px;
        background: url(/images/common/shared.png);
        background-position: -212px -67px;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
      }
      .works .thumbLarge.movie .playBtn{
        display: block;
      }
      .works .thumbLarge.movie:hover .playBtn{
        background-position: -297px -67px;
      }
      .works .thumbLarge.movie.over .playBtn{
        -webkit-animation:play 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -moz-animation:play 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -ms-animation:play 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -o-animation:play 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        animation:play 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        background-position: -297px -67px;
      }
      @keyframes play {
        0%   { transform: scale3d(1, 1, 1); }
        100% { transform: scale3d(0.9, 0.9, 1); }
      }
      @-webkit-keyframes play {
        0%   { -webkit-transform: scale3d(1, 1, 1); }
        100% { -webkit-transform: scale3d(0.9, 0.9, 1); }
      }
      @-moz-keyframes play {
        0%   { -moz-transform: scale3d(1, 1, 1); }
        100% { -moz-transform: scale3d(0.9, 0.9, 1); }
      }
      @-ms-keyframes play {
        0%   { -ms-transform: scale3d(1, 1, 1); }
        100% { -ms-transform: scale3d(0.9, 0.9, 1); }
      }
      @-o-keyframes play {
        0%   { -o-transform: scale3d(1, 1, 1); }
        100% { -o-transform: scale3d(0.9, 0.9, 1); }
      }
        .works .thumbLarge .player{
          position: absolute;
          left: 0;
          top: 0;
          z-index: 100;
        }
        .works .thumbLarge .thumbImage{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        .works .thumbLarge .thumbImage .gallerySlide{
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 270px;
            overflow: hidden;
            background: #eee;
          }
        .works .thumbLarge .thumbImage.anim .gallerySlide{
          -webkit-transition: width 650ms cubic-bezier(.72,.19,.17,.99);
          -moz-transition: width 650ms cubic-bezier(.72,.19,.17,.99);
          -ms-transition: width 650ms cubic-bezier(.72,.19,.17,.99);
          -o-transition: width 650ms cubic-bezier(.72,.19,.17,.99);
        }
          .works .thumbLarge .thumbImage .gallerySlide.on{
            width: 480px;
          }
            .works .thumbLarge .thumbImage .gallerySlide img{
              position: absolute;
              left: 0;
              top: 0;
            }
      .works .thumbLarge #gallerySlideBtn{
        display: none;
        position: absolute;
        left: 12px;
        bottom: 12px;
        z-index: 10;
      }
      .works .thumbLarge .gallerySlideBtnPrev{
        position: absolute;
        z-index: 10;
        left: 8px;
        top: 50%;
        margin-top: -21px;
        width: 40px;
        height: 42px;
        background: url(/images/common/shared.png) no-repeat;
        background-position: -299px 0;
        display: none;
      }
      .works .thumbLarge .gallerySlideBtnPrev.activated{
        display: block;
        opacity: 0.4;
      }
      .works .thumbLarge .gallerySlideBtnPrev.activated.on{
        display: block;
        opacity: 1;
      }
      .works .thumbLarge .gallerySlideBtnPrev.activated.over{
        -webkit-animation:prev 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -moz-animation:prev 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -ms-animation:prev 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -o-animation:prev 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        animation:prev 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
      }
      @keyframes prev {
        0%   { margin-left: 0; }
        100% { margin-left: -3px ; }
      }
      @-webkit-keyframes prev {
        0%   { margin-left: 0; }
        100% { margin-left: -3px ; }
      }
      @-moz-keyframes prev {
        0%   { margin-left: 0; }
        100% { margin-left: -3px ; }
      }
      @-ms-keyframes prev {
        0%   { margin-left: 0; }
        100% { margin-left: -3px ; }
      }
      @-o-keyframes prev {
        0%   { margin-left: 0; }
        100% { margin-left: -3px ; }
      }
      .works .thumbLarge .gallerySlideBtnNext{
        position: absolute;
        z-index: 10;
        right: 8px;
        top: 50%;
        margin-top: -21px;
        width: 40px;
        height: 42px;
        background: url(/images/common/shared.png) no-repeat;
        background-position: -341px 0;
        display: none;
      }
      .works .thumbLarge .gallerySlideBtnNext.activated{
        display: block;
        opacity: 0.4;
      }
      .works .thumbLarge .gallerySlideBtnNext.activated.on{
        display: block;
        opacity: 1;
      }
      .works .thumbLarge .gallerySlideBtnNext.activated.over{
        -webkit-animation:next 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -moz-animation:next 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -ms-animation:next 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        -o-animation:next 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
        animation:next 120ms cubic-bezier(0.23, 1, 0.32, 1) normal;
      }
      @keyframes next {
        0%   { margin-right: 0; }
        100% { margin-right: -3px ; }
      }
      @-webkit-keyframes next {
        0%   { margin-right: 0; }
        100% { margin-right: -3px ; }
      }
      @-moz-keyframes next {
        0%   { margin-right: 0; }
        100% { margin-right: -3px ; }
      }
      @-ms-keyframes next {
        0%   { margin-right: 0; }
        100% { margin-right: -3px ; }
      }
      @-o-keyframes next {
        0%   { margin-right: 0; }
        100% { margin-right: -3px ; }
      }


      .works .thumbLarge.gallery .gallerySlideBtn{
        display: block;
      }
        .works .thumbLarge .gallerySlideBtn li{
          display: none;
          margin-top: 10px;
          margin-right: 8px;
          float: left;
          width: 6px;
          height: 6px;
          border: 1px solid #15161b;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -o-border-radius: 4px;
          -ms-border-radius: 4px;
          border-radius: 4px;
        }
        .works .thumbLarge .gallerySlideBtn li.activated{
          display: block;
        }
        .works .thumbLarge .gallerySlideBtn li:hover{
          background: #fff;
        }
        .works .thumbLarge .gallerySlideBtn li.over{
          background: #fff;
        }

      .works .thumbSmall{
        background: url(/images/common/thumbSmall.gif);
        position: absolute;
        width: 480px;
        height: 270px;
        right: 0;
        top: 0;
      }
        .works .thumbSmall .thumbImage{
          position: absolute;
          width: 0;
          height: 90px;
          z-index: 10;
        }
        .works .thumbSmall .thumbImage:hover{
        }
        .works .thumbSmall .thumbImage.ths0{ left: 0; top: 0; }
        .works .thumbSmall .thumbImage.ths1{ left: 160px; top: 0; }
        .works .thumbSmall .thumbImage.ths2{ left: 320px; top: 0; }
        .works .thumbSmall .thumbImage.ths3{ left: 0; top: 90px; }
        .works .thumbSmall .thumbImage.ths4{ left: 160px; top: 90px; }
        .works .thumbSmall .thumbImage.ths5{ left: 320px; top: 90px; }
        .works .thumbSmall .thumbImage.ths6{ left: 0; top: 180px; }
        .works .thumbSmall .thumbImage.ths7{ left: 160px; top: 180px; }
        .works .thumbSmall .thumbImage.ths8{ left: 320px; top: 180px; }

        .works .thumbSmall .thumbImageCover{
          width: 160px;
          height: 90px;
          position: absolute;
          background: url(/images/common/shared.png);
          background-position: -383px 0;
          display: none;
          z-index: 11;
        }

        .gallery + .thumbSmall .thumbImage{
          cursor: pointer;
        }
          .gallery + .thumbSmall .thumbImage:hover{
          }
          .gallery + .thumbSmall .thumbImage.over{
          }
          .gallery + .thumbSmall.end .thumbImageCover{
            display: block;
          }

  .works .txt{
    position: relative;
    width: 960px;
    min-height: 80px;
    color: #d9d9d9;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.08em;
  }
    .works .txt .txtDescription{
      position: absolute;
      width: 480px;
      left: 0;
      top: 0;
    }
      .works .txt .txtDescription .txtDescriptionLabel{
        width: 100px;
        height: 14px;
        margin-top: 23px;
        margin-bottom: 8px;
        background: url(/images/common/shared.png);
        background-position: -94px -115px;
      }
      .works .txt .txtDescription p{
        width: 460px;
        word-wrap:break-word;
      }
      .works .txt .txtDescription p a{
        color: #d9d9d9;
        text-decoration: underline;
      }
    .works .txt .txtCredit{
      position: absolute;
      width: 480px;
      right: 0;
      top: 0;
    }
      .works .txt .txtCredit .txtCreditLabel{
        width: 60px;
        height: 14px;
        margin-top: 23px;
        margin-bottom: 8px;
        background: url(/images/common/shared.png);
        background-position: -94px -129px;
      }
      .works .txt .txtCredit p{
        text-align: left;
        word-wrap: break-word;
      }
      .works .txt .txtCredit ul li{
        float: left;
      }




.sp #root{
  position: relative;
  width: 640px;
  margin: 0 auto;
  background: #15161b;
  color: #fff;
}
.sp header.spHeader{
  width: 100%;
  height: 164px;
  visibility: visible;
  margin: 0;
  z-index: 1;
}
  .sp header.spHeader #logo{
    background: url(/images/common/sp/header.jpg);
    position: absolute;
    left: 34px;
    top: 51px;
    width: 136px;
    height: 60px;
    background-position: 0 0;
  }
  .sp header.spHeader ul li{
    position: absolute;
    background: url(/images/common/sp/header.jpg);
  }
    .sp header.spHeader ul li#vimeo{
      width: 50px;
      height: 50px;
      right:  167px;
      top: 58px;
      background-position: -136px -7px;
    }
    .sp header.spHeader ul li#youtube{
      width: 50px;
      height: 50px;
      right:  117px;
      top: 58px;
      background-position: -186px -7px;
    }
    .sp header.spHeader ul li#twitter{
      width: 51px;
      height: 50px;
      right:  66px;
      top: 58px;
      background-position: -236px -7px;
    }
    .sp header.spHeader ul li#tumblr{
      width: 40px;
      height: 50px;
      right:  26px;
      top: 58px;
      background-position: -287px -7px;
    }
    .sp header.spHeader ul li a{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .sp header.spHeader ul li.over{
      opacity: 0.6;
    }
.sp #worksList{
  margin: 0;
  padding: 0;
}
.sp .works{
  width: 100%;
  height: 90px;
  margin: 0;
}
  .sp .works .arrow{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 36px;
    top: 35px;
    z-index: 2;
    background: url(/images/common/sp/arrow.png);
  }
  .sp .works h3{
    position: absolute;
    z-index: 2;
    font-size: 18px;
    letter-spacing: 0.03em;
    left: 67px;
    top: 32px;
  }
  .sp .works h3.half{
    top: 34px;
  }
  .sp .works .slide{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 90px;
    background-position: 0px 0px;
    background-repeat: repeat-x;
    -webkit-transition: opacity 1050ms cubic-bezier(0.145, 0.885, 0.770, 1);
    -moz-transition: opacity 1050ms cubic-bezier(0.145, 0.885, 0.770, 1);
    -ms-transition: opacity 1050ms cubic-bezier(0.145, 0.885, 0.770, 1);
    -o-transition: opacity 1050ms cubic-bezier(0.145, 0.885, 0.770, 1);
    transition: opacity 1050ms cubic-bezier(0.145, 0.885, 0.770, 1);
  }
  .sp .works .slide.loaded{
    opacity: 0.4;
  }
  .sp .works.movie.over .slide.loaded{
    opacity: 1;
  }
    @keyframes animatedBackground1{ from { background-position: 0 0; } to { background-position: 160px 0; } }
    @-webkit-keyframes animatedBackground1{ from { background-position: 0 0; } to { background-position: 160px 0; } }
    @-ms-keyframes animatedBackground1{ from { background-position: 0 0; } to { background-position: 160px 0; } }
    @-moz-keyframes animatedBackground1{ from { background-position: 0 0; } to { background-position: 160px 0; } }

    @keyframes animatedBackground2{ from { background-position: 0 0; } to { background-position: 320px 0; } }
    @-webkit-keyframes animatedBackground2{ from { background-position: 0 0; } to { background-position: 320px 0; } }
    @-ms-keyframes animatedBackground2{ from { background-position: 0 0; } to { background-position: 320px 0; } }
    @-moz-keyframes animatedBackground2{ from { background-position: 0 0; } to { background-position: 320px 0; } }

    @keyframes animatedBackground3{ from { background-position: 0 0; } to { background-position: 480px 0; } }
    @-webkit-keyframes animatedBackground3{ from { background-position: 0 0; } to { background-position: 480px 0; } }
    @-ms-keyframes animatedBackground3{ from { background-position: 0 0; } to { background-position: 480px 0; } }
    @-moz-keyframes animatedBackground3{ from { background-position: 0 0; } to { background-position: 480px 0; } }

    @keyframes animatedBackground4{ from { background-position: 0 0; } to { background-position: 640px 0; } }
    @-webkit-keyframes animatedBackground4{ from { background-position: 0 0; } to { background-position: 640px 0; } }
    @-ms-keyframes animatedBackground4{ from { background-position: 0 0; } to { background-position: 640px 0; } }
    @-moz-keyframes animatedBackground4{ from { background-position: 0 0; } to { background-position: 640px 0; } }

    @keyframes animatedBackground5{ from { background-position: 0 0; } to { background-position: 800px 0; } }
    @-webkit-keyframes animatedBackground5{ from { background-position: 0 0; } to { background-position: 800px 0; } }
    @-ms-keyframes animatedBackground5{ from { background-position: 0 0; } to { background-position: 800px 0; } }
    @-moz-keyframes animatedBackground5{ from { background-position: 0 0; } to { background-position: 800px 0; } }

    @keyframes animatedBackground6{ from { background-position: 0 0; } to { background-position: 960px 0; } }
    @-webkit-keyframes animatedBackground6{ from { background-position: 0 0; } to { background-position: 960px 0; } }
    @-ms-keyframes animatedBackground6{ from { background-position: 0 0; } to { background-position: 960px 0; } }
    @-moz-keyframes animatedBackground6{ from { background-position: 0 0; } to { background-position: 960px 0; } }

    @keyframes animatedBackground7{ from { background-position: 0 0; } to { background-position: 1120px 0; } }
    @-webkit-keyframes animatedBackground7{ from { background-position: 0 0; } to { background-position: 1120px 0; } }
    @-ms-keyframes animatedBackground7{ from { background-position: 0 0; } to { background-position: 1120px 0; } }
    @-moz-keyframes animatedBackground7{ from { background-position: 0 0; } to { background-position: 1120px 0; } }

    @keyframes animatedBackground8{ from { background-position: 0 0; } to { background-position: 1280px 0; } }
    @-webkit-keyframes animatedBackground8{ from { background-position: 0 0; } to { background-position: 1280px 0; } }
    @-ms-keyframes animatedBackground8{ from { background-position: 0 0; } to { background-position: 1280px 0; } }
    @-moz-keyframes animatedBackground8{ from { background-position: 0 0; } to { background-position: 1280px 0; } }

    @keyframes animatedBackground9{ from { background-position: 0 0; } to { background-position: 1440px 0; } }
    @-webkit-keyframes animatedBackground9{ from { background-position: 0 0; } to { background-position: 1440px 0; } }
    @-ms-keyframes animatedBackground9{ from { background-position: 0 0; } to { background-position: 1440px 0; } }
    @-moz-keyframes animatedBackground9{ from { background-position: 0 0; } to { background-position: 1440px 0; } }

.sp #overlay{
  position: fixed;
  z-index: 10;
  left: 50%;
  margin-left: -320px;
  top: 0;
  background: rgba(0,0,0,0.85);
  width: 640px;
  height: 100%;
  display: none;
  overflow: hidden;
}
.sp #overlayBG{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 11;
}
.sp #overlayInner{
  position: absolute;
  left: 0;
  width: 100%;
  height: 458px;
  z-index: 12;
  overflow: hidden;
}
  .sp #overlay #close{
    position: absolute;
    width: 53px;
    height: 30px;
    background: url(/images/common/sp/close.png);
    right: 44px;
    top: 0;
  }
  .sp #overlay #spPlayer{
    position: absolute;
    left: 0;
    top: 98px;
    width: 100%;
    height: 360px;
    background: #000;
  }
  .sp #overlay #spGallery{
    position: absolute;
    left: 0;
    top: 143px;
    width: 100%;
    height: 270px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sp #overlay #spGallery #spGalleryRale{
    height: 270px;
    background: url(/images/common/thumbLarge.gif) repeat-x;
  }
  .sp #overlay #spGallery #spGalleryRale.one{
    position: absolute;
    left: 50%;
    margin-left: -240px;
  }
  .sp #overlay #spGallery #spGalleryRale img{
    float: left;
  }
  .sp #overlay #spPlayer.invisible, .sp #overlay #spGallery.invisible{
    visibility: hidden;
  }
.sp #spFooter{
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 0 36px;
  line-height: 164px;
  width: 468px;
  height: 164px;
  margin: 0;
  z-index: 1;
}