/*-------------
contents
---------------*/
.border {
  text-decoration: underline; }

#wrapper {
  position: relative;
  z-index: 1; }

/* =================================
  bg
================================= */
#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../img/top/bg_pc.jpg") no-repeat center center;
  background-size: cover;
  z-index: 0;
  overflow: hidden; }
  @media (max-width: 768px) {
    #bg {
      background: url("../img/top/bg_sp.jpg") no-repeat center center;
      background-size: cover; } }

/* =================================
  mainvisual
================================= */
#mainvisual {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  z-index: 2; }
  @media (max-width: 768px) {
    #mainvisual {
      min-width: 100%; } }
  #mainvisual .mainvisual_s {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0; }
    @media (max-width: 768px) {
      #mainvisual .mainvisual_s {
        overflow: inherit; } }
    #mainvisual .mainvisual_s .dot {
      position: absolute;
      background: url("../img/top/dot.png") repeat left top;
      width: 100%;
      height: 100%;
      z-index: 1; }
    #mainvisual .mainvisual_s .gra_top {
      position: absolute;
      background: url("../img/top/shadow_top.png") repeat-x left bottom;
      width: 100%;
      height: 100%;
      z-index: 2; }
      @media (max-width: 768px) {
        #mainvisual .mainvisual_s .gra_top {
          background: url("../img/top/shadow_top.png") repeat-x left bottom;
          background-size: auto 31.25vw; } }
    #mainvisual .mainvisual_s .main_s {
      position: absolute;
      width: 580px;
      height: 706px;
      top: 45%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
      z-index: 48; }
      @media (max-width: 768px) {
        #mainvisual .mainvisual_s .main_s {
          top: 43%;
          width: 83.33333vw;
          height: 112.5vw; } }
      #mainvisual .mainvisual_s .main_s .main_img {
        position: relative;
        width: 100%;
        margin: 0 auto 0;
        top: 30px;
        opacity: 0; }
        @media (max-width: 768px) {
          #mainvisual .mainvisual_s .main_s .main_img {
            width: 100%;
            top: 7.8125vw; } }
      @media (max-width: 768px) {
        #mainvisual .mainvisual_s .main_s .main_tit {
          position: absolute;
          width: 100%;
          top: 66.14583vw;
          margin-top: -7.8125vw;
          opacity: 0;
          z-index: 3; } }
      #mainvisual .mainvisual_s .main_s .date {
        display: inline-block;
        text-align: center;
        position: relative;
        left: 50%;
        -webkit-transform: translate3d(-50%, 0%, 0);
        transform: translate3d(-50%, 0%, 0);
        z-index: 5;
        top: -48px; }
        @media (max-width: 768px) {
          #mainvisual .mainvisual_s .main_s .date {
            top: -13.02083vw; } }
        #mainvisual .mainvisual_s .main_s .date .date_s {
          opacity: 0;
          width: 500px;
          height: 124px;
          background: rgba(0, 0, 0, 0.7) url("../img/top/date_bg_pc.png") no-repeat left top;
          background-size: 100% auto; }
          @media (max-width: 768px) {
            #mainvisual .mainvisual_s .main_s .date .date_s {
              width: 94.79167vw;
              height: 24.21875vw;
              background: rgba(0, 0, 0, 0.7) url("../img/top/date_bg_sp.png") no-repeat left top;
              background-size: 100% auto; } }
          #mainvisual .mainvisual_s .main_s .date .date_s .txt {
            padding: 10px 0 0;
            font-size: 2.4rem;
            line-height: 1; }
            @media (max-width: 768px) {
              #mainvisual .mainvisual_s .main_s .date .date_s .txt {
                padding: 2.60417vw 0 0;
                font-size: 4.6875vw; } }
          #mainvisual .mainvisual_s .main_s .date .date_s .app_box {
            text-align: center;
            margin-top: 10px;
            width: 100%; }
            @media (max-width: 768px) {
              #mainvisual .mainvisual_s .main_s .date .date_s .app_box {
                margin-top: 2.60417vw; } }
            #mainvisual .mainvisual_s .main_s .date .date_s .app_box .app_btn {
              display: inline-block;
              width: 189px; }
              @media (max-width: 768px) {
                #mainvisual .mainvisual_s .main_s .date .date_s .app_box .app_btn {
                  width: 36.97917vw; } }
              #mainvisual .mainvisual_s .main_s .date .date_s .app_box .app_btn.app_btn2 {
                margin-left: 18px; }
                @media (max-width: 768px) {
                  #mainvisual .mainvisual_s .main_s .date .date_s .app_box .app_btn.app_btn2 {
                    margin-left: 2.34375vw; } }
              #mainvisual .mainvisual_s .main_s .date .date_s .app_box .app_btn a {
                display: block;
                position: relative;
                font-size: 2.88rem;
                letter-spacing: 0.1em;
                font-weight: 500;
                color: #fff;
                text-align: left;
                width: 100%;
                height: 108px;
                padding: 5px; }
                @media (max-width: 768px) {
                  #mainvisual .mainvisual_s .main_s .date .date_s .app_box .app_btn a {
                    font-size: 4.6875vw;
                    height: 20.83333vw;
                    padding: 0.65104vw; } }
        #mainvisual .mainvisual_s .main_s .date .obi {
          position: absolute;
          background: #f00;
          width: 0%;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 1; }
      #mainvisual .mainvisual_s .main_s .btn_roadmap {
        width: 364px;
        margin: 0 auto; }
        @media (max-width: 768px) {
          #mainvisual .mainvisual_s .main_s .btn_roadmap {
            width: 71.09375vw;
            margin-top: -5.20833vw; } }
        #mainvisual .mainvisual_s .main_s .btn_roadmap img {
          opacity: 0;
          cursor: pointer; }
    #mainvisual .mainvisual_s .announce_wrap {
      position: absolute;
      width: 156px;
      height: 36px;
      left: 10px;
      bottom: 24px;
      z-index: 10; }
      @media (max-width: 768px) {
        #mainvisual .mainvisual_s .announce_wrap {
          width: 33.85417vw;
          height: 7.8125vw;
          left: 1.30208vw;
          bottom: 0vw; } }
      #mainvisual .mainvisual_s .announce_wrap .announce {
        position: absolute;
        width: 156px;
        height: 36px;
        top: 0;
        left: -200px; }
        @media (max-width: 768px) {
          #mainvisual .mainvisual_s .announce_wrap .announce {
            width: 33.85417vw;
            height: 7.8125vw;
            left: -46.875vw; } }
        #mainvisual .mainvisual_s .announce_wrap .announce.announce2 {
          top: -15px;
          width: 171px;
          height: 51px; }
          @media (max-width: 768px) {
            #mainvisual .mainvisual_s .announce_wrap .announce.announce2 {
              top: -2.21354vw;
              width: 33.46354vw;
              height: 10.02604vw; } }
      #mainvisual .mainvisual_s .announce_wrap.hide {
        display: none; }
  #mainvisual .bar {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 98px;
    width: 1px;
    margin-left: -1px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    opacity: 0;
    z-index: 10;
    display: none; }
    @media (max-width: 768px) {
      #mainvisual .bar {
        height: 16.92708vw;
        bottom: -10.9375vw;
        display: block; } }
    #mainvisual .bar .bar_scroll_inner {
      overflow: hidden;
      height: 110px; }
      @media (max-width: 768px) {
        #mainvisual .bar .bar_scroll_inner {
          height: 19.53125vw; } }
      #mainvisual .bar .bar_scroll_inner .border {
        width: 2px;
        height: 110px;
        background: #fff;
        text-align: center;
        margin: 0 auto;
        -webkit-transform: translate(0, 101%);
                transform: translate(0, 101%); }
        @media (max-width: 768px) {
          #mainvisual .bar .bar_scroll_inner .border {
            height: 19.53125vw; } }
    #mainvisual .bar.active .bar_scroll_inner {
      -webkit-animation: bar_scroll_inner 2800ms infinite cubic-bezier(0.74, 0, 0.26, 1);
              animation: bar_scroll_inner 2800ms infinite cubic-bezier(0.74, 0, 0.26, 1); }
      @media (max-width: 768px) {
        #mainvisual .bar.active .bar_scroll_inner {
          -webkit-animation: bar_scroll_inner_sp 2800ms infinite cubic-bezier(0.74, 0, 0.26, 1);
                  animation: bar_scroll_inner_sp 2800ms infinite cubic-bezier(0.74, 0, 0.26, 1); } }
      #mainvisual .bar.active .bar_scroll_inner .border {
        -webkit-animation: bar_scroll_inner_border 2800ms infinite cubic-bezier(0.74, 0, 0.26, 1);
                animation: bar_scroll_inner_border 2800ms infinite cubic-bezier(0.74, 0, 0.26, 1); }

@-webkit-keyframes bar_scroll_inner_border {
  0% {
    -webkit-transform: translate(0, 103%);
            transform: translate(0, 103%); }
  60%,
  80% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(0, 103%);
            transform: translate(0, 103%); } }

@keyframes bar_scroll_inner_border {
  0% {
    -webkit-transform: translate(0, 103%);
            transform: translate(0, 103%); }
  60%,
  80% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(0, 103%);
            transform: translate(0, 103%); } }

@-webkit-keyframes bar_scroll_inner {
  0%,
  45% {
    height: 110px; }
  70%,
  100% {
    height: 0px; } }

@keyframes bar_scroll_inner {
  0%,
  45% {
    height: 110px; }
  70%,
  100% {
    height: 0px; } }

@-webkit-keyframes bar_scroll_inner_sp {
  0%,
  45% {
    height: 19.53125vw; }
  70%,
  100% {
    height: 0px; } }

@keyframes bar_scroll_inner_sp {
  0%,
  45% {
    height: 19.53125vw; }
  70%,
  100% {
    height: 0px; } }

@-webkit-keyframes boo_left_appear {
  0% {
    width: 0%;
    margin-left: 0%; }
  45% {
    width: 100%;
    margin-left: 0%; }
  55% {
    width: 100%;
    margin-left: 0%; }
  100% {
    width: 0%;
    margin-left: 100%; } }

@keyframes boo_left_appear {
  0% {
    width: 0%;
    margin-left: 0%; }
  45% {
    width: 100%;
    margin-left: 0%; }
  55% {
    width: 100%;
    margin-left: 0%; }
  100% {
    width: 0%;
    margin-left: 100%; } }

@-webkit-keyframes boo_right_appear {
  0% {
    width: 0%;
    margin-left: 100%; }
  45% {
    width: 100%;
    margin-left: 0%; }
  55% {
    width: 100%;
    margin-left: 0%; }
  100% {
    width: 0%;
    margin-left: 0%; } }

@keyframes boo_right_appear {
  0% {
    width: 0%;
    margin-left: 100%; }
  45% {
    width: 100%;
    margin-left: 0%; }
  55% {
    width: 100%;
    margin-left: 0%; }
  100% {
    width: 0%;
    margin-left: 0%; } }

@-webkit-keyframes boo_top_appear {
  0% {
    height: 0%;
    top: 0%; }
  45% {
    height: 100%;
    top: 0%; }
  55% {
    height: 100%;
    top: 0%; }
  100% {
    height: 0%;
    top: 100%; } }

@keyframes boo_top_appear {
  0% {
    height: 0%;
    top: 0%; }
  45% {
    height: 100%;
    top: 0%; }
  55% {
    height: 100%;
    top: 0%; }
  100% {
    height: 0%;
    top: 100%; } }

@-webkit-keyframes boo_bottom_appear {
  0% {
    height: 0%;
    top: 100%; }
  45% {
    height: 100%;
    top: 0%; }
  55% {
    height: 100%;
    top: 0%; }
  100% {
    height: 0%;
    top: 0%; } }

@keyframes boo_bottom_appear {
  0% {
    height: 0%;
    top: 100%; }
  45% {
    height: 100%;
    top: 0%; }
  55% {
    height: 100%;
    top: 0%; }
  100% {
    height: 0%;
    top: 0%; } }

.contents {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.8;
  z-index: 1; }
  @media (max-width: 768px) {
    .contents {
      width: 100%; } }
  .contents .gra_bottom {
    position: relative;
    width: 100%;
    height: 160px;
    background: url("../img/top/shadow_bottom.png") repeat-x left top;
    z-index: 100; }
    @media (max-width: 768px) {
      .contents .gra_bottom {
        height: 20.83333vw;
        background: url("../img/top/shadow_bottom.png") repeat-x left top;
        background-size: auto 20.83333vw; } }
  .contents .boo {
    position: absolute; }
    .contents .boo .boo_f {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.24);
      z-index: 1; }
    .contents .boo .boo_s {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #fff;
      z-index: 2; }
  .contents .content_inner {
    position: relative;
    width: 768px;
    margin: 0 auto; }
    @media (max-width: 768px) {
      .contents .content_inner {
        width: 100%; } }
    .contents .content_inner .bd div {
      background: #fff;
      position: absolute; }
    .contents .content_inner .bd div.bdT {
      width: 100%;
      height: 1px;
      top: 0;
      left: 0; }
    .contents .content_inner .bd div.bdB {
      width: 100%;
      height: 1px;
      bottom: 0;
      right: 0; }
    .contents .content_inner .bd div.bdR {
      height: 100%;
      width: 1px;
      right: 0;
      top: 0; }
    .contents .content_inner .bd div.bdL {
      height: 100%;
      width: 1px;
      left: 0;
      bottom: 0; }
    .contents .content_inner .txt {
      text-align: left;
      font-size: 34px;
      font-weight: 500;
      line-height: 2.3;
      word-break: break-all; }
      @media (max-width: 768px) {
        .contents .content_inner .txt {
          font-size: 3.125vw;
          line-height: 2; } }
    .contents .content_inner .sp_waku {
      position: relative; }
    .contents .content_inner .bg_txt {
      position: absolute;
      width: 85px;
      top: 0px;
      z-index: 0; }
      @media (max-width: 768px) {
        .contents .content_inner .bg_txt {
          width: 14.71354vw; } }
  .contents .sec1 .sp_waku {
    padding-top: 34px;
    padding-bottom: 170px; }
    @media (max-width: 768px) {
      .contents .sec1 .sp_waku {
        padding-top: 2.34375vw;
        padding-bottom: 19.53125vw; } }
    .contents .sec1 .sp_waku .p_txt {
      position: relative;
      margin-top: 51px;
      clear: both;
      display: inline-block; }
      @media (max-width: 768px) {
        .contents .sec1 .sp_waku .p_txt {
          margin-top: 10.28646vw; } }
      .contents .sec1 .sp_waku .p_txt .p_wrap {
        display: inline-block;
        padding: 2px; }
        @media (max-width: 768px) {
          .contents .sec1 .sp_waku .p_txt .p_wrap {
            padding: 0.52083vw; } }
        .contents .sec1 .sp_waku .p_txt .p_wrap .p_txt_s {
          position: relative;
          display: inline-block;
          font-size: 2.16rem;
          letter-spacing: 0.03em;
          line-height: 1;
          z-index: 0; }
          @media (max-width: 768px) {
            .contents .sec1 .sp_waku .p_txt .p_wrap .p_txt_s {
              font-size: 4.6875vw; } }
          .contents .sec1 .sp_waku .p_txt .p_wrap .p_txt_s span.b1 {
            display: inline-block;
            font-size: 2.6rem; }
            @media (max-width: 768px) {
              .contents .sec1 .sp_waku .p_txt .p_wrap .p_txt_s span.b1 {
                font-size: 5.59896vw; } }
        .contents .sec1 .sp_waku .p_txt .p_wrap .p_obi {
          position: absolute;
          width: 100%;
          height: 40px;
          top: 0;
          left: 0;
          background: #fff;
          z-index: 1; }
          @media (max-width: 768px) {
            .contents .sec1 .sp_waku .p_txt .p_wrap .p_obi {
              height: 9.11458vw; } }
      .contents .sec1 .sp_waku .p_txt.p_txt1 {
        margin-top: 0; }
        .contents .sec1 .sp_waku .p_txt.p_txt1 .p_wrap .p_txt_s {
          display: inline-block;
          font-size: 2.4rem;
          line-height: 1; }
          @media (max-width: 768px) {
            .contents .sec1 .sp_waku .p_txt.p_txt1 .p_wrap .p_txt_s {
              font-size: 5.20833vw; } }
          .contents .sec1 .sp_waku .p_txt.p_txt1 .p_wrap .p_txt_s span.b1 {
            display: inline-block;
            font-size: 3.6rem; }
            @media (max-width: 768px) {
              .contents .sec1 .sp_waku .p_txt.p_txt1 .p_wrap .p_txt_s span.b1 {
                font-size: 7.8125vw; } }
    .contents .sec1 .sp_waku .moreBtn {
      margin: 96px auto 0;
      width: 300px;
      height: 50px; }
      @media (max-width: 768px) {
        .contents .sec1 .sp_waku .moreBtn {
          margin-top: 24.73958vw;
          width: 78.125vw;
          height: 13.02083vw; } }
      .contents .sec1 .sp_waku .moreBtn a {
        display: block;
        position: relative;
        width: 300px;
        height: 50px; }
        @media (max-width: 768px) {
          .contents .sec1 .sp_waku .moreBtn a {
            width: 78.125vw;
            height: 13.02083vw; } }
        .contents .sec1 .sp_waku .moreBtn a .txt {
          position: relative;
          text-align: center;
          letter-spacing: 0.1em;
          font-weight: 500;
          font-size: 2rem;
          line-height: 50px;
          opacity: 1;
          transition: all 0.3s;
          transition-delay: 0.9s;
          z-index: 1; }
          @media (max-width: 768px) {
            .contents .sec1 .sp_waku .moreBtn a .txt {
              font-size: 4.6875vw;
              line-height: 12.23958vw; } }
        .contents .sec1 .sp_waku .moreBtn a .white {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.3);
          z-index: 0;
          opacity: 0; }
          .contents .sec1 .sp_waku .moreBtn a .white.loop {
            -webkit-animation: more_btn_loop 4000ms infinite;
                    animation: more_btn_loop 4000ms infinite; }
        .contents .sec1 .sp_waku .moreBtn a .bd2 div {
          transition: all 0.2s; }
          .contents .sec1 .sp_waku .moreBtn a .bd2 div.bdT {
            transition-delay: 0.6s; }
          .contents .sec1 .sp_waku .moreBtn a .bd2 div.bdL {
            transition-delay: 0.4s; }
          .contents .sec1 .sp_waku .moreBtn a .bd2 div.bdB {
            transition-delay: 0.2s; }
          .contents .sec1 .sp_waku .moreBtn a .bd2 div.bdR {
            transition-delay: 0s; }
        .contents .sec1 .sp_waku .moreBtn a.active .txt {
          opacity: 0; }
        .contents .sec1 .sp_waku .moreBtn a.active .bd2 div.bdT {
          width: 0; }
        .contents .sec1 .sp_waku .moreBtn a.active .bd2 div.bdL {
          height: 0; }
        .contents .sec1 .sp_waku .moreBtn a.active .bd2 div.bdB {
          width: 0; }
        .contents .sec1 .sp_waku .moreBtn a.active .bd2 div.bdR {
          height: 0; }

@-webkit-keyframes more_btn_loop {
  0%,
  2% {
    opacity: 0%; }
  48% {
    opacity: 100%; }
  52% {
    opacity: 100%; }
  98%,
  100% {
    opacity: 0%; } }

@keyframes more_btn_loop {
  0%,
  2% {
    opacity: 0%; }
  48% {
    opacity: 100%; }
  52% {
    opacity: 100%; }
  98%,
  100% {
    opacity: 0%; } }
  .contents .sec2 {
    position: relative;
    width: 100%; }
    @media (min-width: 769px) {
      .contents .sec2 {
        background: url("../img/top/chara_gra_pc.png") repeat-x left top; } }
    @media (max-width: 768px) {
      .contents .sec2 {
        background: url("../img/top/chara_gra.png") repeat-x left top;
        background-size: auto 97.78646vw; } }
    .contents .sec2 .content_inner .bg_txt {
      margin-top: 270px;
      right: 0; }
      @media (max-width: 768px) {
        .contents .sec2 .content_inner .bg_txt {
          margin-top: 35.15625vw; } }
    .contents .sec2 .content_inner .sp_waku {
      padding-top: 100px; }
      @media (max-width: 768px) {
        .contents .sec2 .content_inner .sp_waku {
          padding-top: 8.85417vw; } }
    .contents .sec2 .content_inner .boo1 {
      top: 229px;
      right: 0px;
      width: 768px;
      height: 1px; }
      @media (max-width: 768px) {
        .contents .sec2 .content_inner .boo1 {
          top: 29.6875vw;
          width: 100vw; } }
      .contents .sec2 .content_inner .boo1 .boo_f {
        opacity: 0; }
      .contents .sec2 .content_inner .boo1 .boo_s {
        width: 0%; }
    .contents .sec2 .content_inner .boo2 {
      top: 60px;
      left: 20px;
      width: 1px;
      height: 1294px; }
      @media (max-width: 768px) {
        .contents .sec2 .content_inner .boo2 {
          top: 7.8125vw;
          left: 2.60417vw;
          height: 191.92708vw; } }
      .contents .sec2 .content_inner .boo2 .boo_f {
        opacity: 0; }
      .contents .sec2 .content_inner .boo2 .boo_s {
        height: 0%; }
    .contents .sec2 .content_inner .boo3 {
      top: 122px;
      left: 30px;
      width: 1px;
      height: 1292px; }
      @media (max-width: 768px) {
        .contents .sec2 .content_inner .boo3 {
          top: 15.88542vw;
          left: 3.90625vw;
          height: 191.66667vw; } }
      .contents .sec2 .content_inner .boo3 .boo_f {
        opacity: 0; }
      .contents .sec2 .content_inner .boo3 .boo_s {
        height: 0%; }
    .contents .sec2 .content_inner.active .boo .boo_f {
      opacity: 1;
      transition: opacity 0s;
      transition-delay: 0.5s; }
    .contents .sec2 .content_inner.active .boo1 .boo_f {
      transition-delay: 0.5s; }
    .contents .sec2 .content_inner.active .boo1 .boo_s {
      -webkit-animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
              animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
    .contents .sec2 .content_inner.active .boo2 .boo_f {
      transition-delay: 0.8s; }
    .contents .sec2 .content_inner.active .boo2 .boo_s {
      -webkit-animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.3s;
              animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.3s; }
    .contents .sec2 .content_inner.active .boo3 .boo_f {
      transition-delay: 1.1s; }
    .contents .sec2 .content_inner.active .boo3 .boo_s {
      -webkit-animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.6s;
              animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.6s; }
    .contents .sec2 .comment_wrap {
      position: absolute;
      width: 174px;
      top: 279px;
      left: 68px;
      z-index: 20; }
      @media (max-width: 768px) {
        .contents .sec2 .comment_wrap {
          width: 22.65625vw;
          top: 36.32812vw;
          left: 8.85417vw; } }
      .contents .sec2 .comment_wrap .comment_wrap_s .comment {
        position: absolute;
        width: 124px;
        top: 0;
        left: 0;
        opacity: 0;
        display: none; }
        @media (max-width: 768px) {
          .contents .sec2 .comment_wrap .comment_wrap_s .comment {
            width: 16.14583vw; } }
        .contents .sec2 .comment_wrap .comment_wrap_s .comment.comment_w_174 {
          width: 174px; }
          @media (max-width: 768px) {
            .contents .sec2 .comment_wrap .comment_wrap_s .comment.comment_w_174 {
              width: 22.65625vw; } }
        .contents .sec2 .comment_wrap .comment_wrap_s .comment.comment_w_174 {
          width: 174px; }
          @media (max-width: 768px) {
            .contents .sec2 .comment_wrap .comment_wrap_s .comment.comment_w_174 {
              width: 22.65625vw; } }
    .contents .sec2 .txt_wrap {
      position: absolute;
      width: 700px;
      top: 1035px;
      left: 50px;
      z-index: 20; }
      @media (max-width: 768px) {
        .contents .sec2 .txt_wrap {
          width: 91.14583vw;
          top: 149.73958vw;
          left: 6.51042vw; } }
      .contents .sec2 .txt_wrap .txt_wrap_s {
        position: relative; }
        .contents .sec2 .txt_wrap .txt_wrap_s .txt {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          display: none; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice {
            position: absolute;
            top: 0;
            right: 0;
            width: 64px;
            height: 64px; }
            @media (max-width: 768px) {
              .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice {
                width: 10.41667vw;
                height: 10.41667vw; } }
            .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s {
              display: block;
              width: 100%;
              width: 64px;
              height: 64px; }
              @media (max-width: 768px) {
                .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s {
                  width: 10.41667vw;
                  height: 10.41667vw; } }
              .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .ico, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .ico {
                position: absolute;
                top: 0;
                left: 0;
                width: 64px;
                height: 64px;
                z-index: 1; }
                @media (max-width: 768px) {
                  .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .ico, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .ico {
                    width: 10.41667vw;
                    height: 10.41667vw; } }
                .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .ico img, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .ico img {
                  vertical-align: top; }
              .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .btn_bg, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .btn_bg {
                position: absolute;
                z-index: 0;
                top: 0;
                left: 0; }
                .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .btn_bg .btn_bg_s, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .btn_bg .btn_bg_s {
                  width: 64px;
                  height: 64px;
                  background: #dc0103; }
                  @media (max-width: 768px) {
                    .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .btn_bg .btn_bg_s, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .btn_bg .btn_bg_s {
                      width: 10.41667vw;
                      height: 10.41667vw; } }
                .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice a .btn_bg.gray .btn_bg_s, .contents .sec2 .txt_wrap .txt_wrap_s .txt .voice div.voice_s .btn_bg.gray .btn_bg_s {
                  background: #444444; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .tit {
            position: relative;
            font-weight: 900;
            font-size: 5rem;
            line-height: 1.1; }
            @media (max-width: 768px) {
              .contents .sec2 .txt_wrap .txt_wrap_s .txt .tit {
                font-size: 7.8125vw; } }
            .contents .sec2 .txt_wrap .txt_wrap_s .txt .tit .kakko {
              display: inline-block;
              position: relative;
              font-size: 90%;
              top: -0.1em;
              z-index: 0; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .sub {
            position: relative;
            color: #dc0103;
            font-weight: 700;
            font-size: 2.4rem;
            line-height: 1;
            letter-spacing: 0.1em; }
            @media (max-width: 768px) {
              .contents .sec2 .txt_wrap .txt_wrap_s .txt .sub {
                font-size: 3.64583vw; } }
            .contents .sec2 .txt_wrap .txt_wrap_s .txt .sub .tt_s {
              padding-top: 14px; }
              @media (max-width: 768px) {
                .contents .sec2 .txt_wrap .txt_wrap_s .txt .sub .tt_s {
                  padding-top: 1.82292vw; } }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .txt_s {
            position: relative;
            font-size: 1.6rem;
            line-height: 2.2;
            margin-top: 30px; }
            @media (max-width: 768px) {
              .contents .sec2 .txt_wrap .txt_wrap_s .txt .txt_s {
                font-size: 3.125vw;
                margin-top: 4.6875vw;
                line-height: 1.7; } }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .tt {
            position: relative;
            display: inline-block; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .tt_s {
            opacity: 1; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt span.red {
            color: #dc0103; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .obi {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #dc0103;
            z-index: 1; }
          .contents .sec2 .txt_wrap .txt_wrap_s .txt .txt_s .obi {
            background: #fff; }
  .contents .sec3 {
    position: relative;
    width: 100%; }
    @media (min-width: 769px) {
      .contents .sec3 {
        height: 2234px;
        background: url("../img/top/bg_campaign_pc.png") no-repeat center top; } }
    @media (max-width: 768px) {
      .contents .sec3 {
        height: 286.97917vw;
        background: url("../img/top/bg_campaign_sp.png") no-repeat center top;
        background-size: 100% auto; } }
    .contents .sec3 .content_inner .bg_txt {
      width: 606px;
      margin-top: 58px;
      right: 0; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .bg_txt {
          width: 98.95833vw;
          margin-top: 1.30208vw; } }
    .contents .sec3 .content_inner .sp_waku {
      padding-top: 175px; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .sp_waku {
          padding-top: 21.35417vw; } }
    .contents .sec3 .content_inner .boo1 {
      top: 154px;
      right: 0px;
      width: 768px;
      height: 1px; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .boo1 {
          top: 18.75vw;
          width: 100vw; } }
      .contents .sec3 .content_inner .boo1 .boo_f {
        opacity: 0; }
      .contents .sec3 .content_inner .boo1 .boo_s {
        width: 0%; }
    .contents .sec3 .content_inner .boo2 {
      top: -15px;
      left: 110px;
      width: 1px;
      height: 2154px; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .boo2 {
          top: -3.38542vw;
          left: 14.0625vw;
          height: 276.5625vw; } }
      .contents .sec3 .content_inner .boo2 .boo_f {
        opacity: 0; }
      .contents .sec3 .content_inner .boo2 .boo_s {
        height: 0%; }
    .contents .sec3 .content_inner .boo3 {
      top: 50px;
      left: 119px;
      width: 1px;
      height: 2152px; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .boo3 {
          top: 4.81771vw;
          left: 15.36458vw;
          height: 276.30208vw; } }
      .contents .sec3 .content_inner .boo3 .boo_f {
        opacity: 0; }
      .contents .sec3 .content_inner .boo3 .boo_s {
        height: 0%; }
    .contents .sec3 .content_inner .tit_tate {
      position: absolute;
      width: 93px;
      top: 142px;
      left: 18px;
      z-index: 6;
      opacity: 0; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .tit_tate {
          width: 15.10417vw;
          top: 16.92708vw;
          left: 0vw; } }
    .contents .sec3 .content_inner .cp_wrap {
      margin-left: 120px;
      width: 630px; }
      @media (max-width: 768px) {
        .contents .sec3 .content_inner .cp_wrap {
          margin-left: 15.625vw;
          width: 82.03125vw; } }
      .contents .sec3 .content_inner .cp_wrap img {
        vertical-align: top;
        margin: 0; }
      .contents .sec3 .content_inner .cp_wrap .tit {
        position: relative;
        margin-left: -1px; }
        .contents .sec3 .content_inner .cp_wrap .tit .tit_s {
          position: relative;
          z-index: 2; }
        .contents .sec3 .content_inner .cp_wrap .tit .bg_s {
          position: absolute;
          display: inline-block;
          width: 627px;
          height: 162px;
          top: 20px;
          left: 0;
          z-index: 1; }
          @media (max-width: 768px) {
            .contents .sec3 .content_inner .cp_wrap .tit .bg_s {
              width: 81.64062vw;
              height: 21.09375vw;
              top: 2.60417vw; } }
          .contents .sec3 .content_inner .cp_wrap .tit .bg_s .bg_ss {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.36);
            border: 1px solid rgba(255, 255, 255, 0.6); }
      .contents .sec3 .content_inner .cp_wrap .pre_wrap {
        margin-top: 40px; }
        @media (max-width: 768px) {
          .contents .sec3 .content_inner .cp_wrap .pre_wrap {
            margin-top: 5.20833vw; } }
        .contents .sec3 .content_inner .cp_wrap .pre_wrap .left {
          float: left;
          width: 190px; }
          @media (max-width: 768px) {
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .left {
              width: 24.73958vw; } }
          .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 80px;
            line-height: 70px;
            font-weight: 900;
            font-size: 3.8rem; }
            @media (max-width: 768px) {
              .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu {
                height: 10.41667vw;
                line-height: 9.11458vw;
                font-size: 4.94792vw; } }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu span.small {
              font-size: 2.4rem; }
              @media (max-width: 768px) {
                .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu span.small {
                  font-size: 3.125vw; } }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu .pre_s {
              position: relative;
              z-index: 1; }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu .bg_s {
              position: absolute;
              display: inline-block;
              width: 100%;
              height: 80px;
              top: 0;
              left: 0;
              z-index: 0; }
              @media (max-width: 768px) {
                .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu .bg_s {
                  height: 10.41667vw; } }
              .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .ninzu .bg_s .bg_ss {
                width: 100%;
                height: 100%;
                background: #000; }
          .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .break {
            position: relative;
            z-index: 1;
            width: 130px;
            height: 60px;
            margin-left: 60px; }
            @media (max-width: 768px) {
              .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .break {
                width: 16.92708vw;
                height: 7.8125vw;
                margin-left: 7.8125vw; } }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .break .pre_s {
              position: relative;
              width: 100%;
              height: 60px;
              z-index: 1;
              background: url("../img/top/cp/none.png") no-repeat left top;
              background-size: 100% auto; }
              @media (max-width: 768px) {
                .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .break .pre_s {
                  height: 7.8125vw; } }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .break .bg_s {
              position: absolute;
              display: inline-block;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 0; }
              .contents .sec3 .content_inner .cp_wrap .pre_wrap .left .break .bg_s .bg_ss {
                width: 100%;
                height: 100%;
                background: #fff; }
        .contents .sec3 .content_inner .cp_wrap .pre_wrap .pre {
          float: left;
          position: relative;
          z-index: 1;
          width: 437px; }
          @media (max-width: 768px) {
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .pre {
              width: 56.90104vw; } }
          .contents .sec3 .content_inner .cp_wrap .pre_wrap .pre .pre_s {
            position: relative;
            z-index: 2; }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .pre .pre_s img {
              vertical-align: top; }
          .contents .sec3 .content_inner .cp_wrap .pre_wrap .pre .bg_s {
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1; }
            .contents .sec3 .content_inner .cp_wrap .pre_wrap .pre .bg_s .bg_ss {
              width: 50%;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.36);
              border: 1px solid rgba(255, 255, 255, 0.6); }
        .contents .sec3 .content_inner .cp_wrap .pre_wrap.done .left .break .pre_s {
          background: url("../img/top/cp/done.png") no-repeat left top;
          background-size: 100% auto; }
        .contents .sec3 .content_inner .cp_wrap .pre_wrap.done .pre .bg_s .bg_ss {
          background: rgba(220, 1, 3, 0.36); }
    .contents .sec3 .content_inner.active .boo .boo_f {
      opacity: 1;
      transition: opacity 0s;
      transition-delay: 0.5s; }
    .contents .sec3 .content_inner.active .boo1 .boo_f {
      transition-delay: 0.5s; }
    .contents .sec3 .content_inner.active .boo1 .boo_s {
      -webkit-animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
              animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
    .contents .sec3 .content_inner.active .boo2 .boo_f {
      transition-delay: 0.8s; }
    .contents .sec3 .content_inner.active .boo2 .boo_s {
      -webkit-animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.3s;
              animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.3s; }
    .contents .sec3 .content_inner.active .boo3 .boo_f {
      transition-delay: 1.1s; }
    .contents .sec3 .content_inner.active .boo3 .boo_s {
      -webkit-animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.6s;
              animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.6s; }
    .contents .sec3 .content_inner.active .tit_tate {
      opacity: 1;
      transition: opacity 0.4s;
      transition-delay: 1s; }
  .contents .sec4 {
    position: relative;
    padding-bottom: 100px; }
    @media (max-width: 768px) {
      .contents .sec4 {
        padding-bottom: 13.02083vw; } }
    .contents .sec4 .content_inner .bg_txt {
      margin-top: 170px;
      width: 116px;
      z-index: 10;
      pointer-events: none; }
      @media (max-width: 768px) {
        .contents .sec4 .content_inner .bg_txt {
          margin-top: 13.02083vw;
          width: 15.36458vw; } }
    .contents .sec4 .content_inner .sp_waku {
      padding-top: 94px; }
      @media (max-width: 768px) {
        .contents .sec4 .content_inner .sp_waku {
          padding-top: 17.70833vw; } }
      .contents .sec4 .content_inner .sp_waku .movie {
        position: relative;
        margin-left: 82px;
        width: 614px;
        height: 486px;
        margin-top: -62px; }
        @media (max-width: 768px) {
          .contents .sec4 .content_inner .sp_waku .movie {
            margin-left: 0.65104vw;
            width: 99.34896vw;
            height: 79.16667vw;
            margin-top: -6.77083vw; } }
        .contents .sec4 .content_inner .sp_waku .movie:first-child {
          margin-top: 0; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie:first-child {
              margin-top: 0vw; } }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo .boo_f {
          opacity: 1;
          transition: opacity 0s;
          transition-delay: 0.5s; }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo1 .boo_s {
          -webkit-animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                  animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo2 .boo_s {
          -webkit-animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                  animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo3 .boo_s {
          -webkit-animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                  animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo4 .boo_s {
          -webkit-animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                  animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo5 .boo_s {
          -webkit-animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                  animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
        .contents .sec4 .content_inner .sp_waku .movie.active .boo6 .boo_s {
          -webkit-animation: boo_left_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                  animation: boo_left_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
        .contents .sec4 .content_inner .sp_waku .movie.active .movieBtn a .img {
          -webkit-transform: scale(1, 1);
                  transform: scale(1, 1);
          transition: -webkit-transform 0.6s cubic-bezier(0.74, 0, 0.26, 1);
          transition: transform 0.6s cubic-bezier(0.74, 0, 0.26, 1);
          transition: transform 0.6s cubic-bezier(0.74, 0, 0.26, 1), -webkit-transform 0.6s cubic-bezier(0.74, 0, 0.26, 1);
          transition-delay: 0.8s; }
        .contents .sec4 .content_inner .sp_waku .movie.active .movieBtn a .title .obi {
          -webkit-animation: boo_left_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 1.2s;
                  animation: boo_left_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 1.2s; }
        .contents .sec4 .content_inner .sp_waku .movie.active .movieBtn a .title .title_s {
          opacity: 1;
          transition: opacity 0s;
          transition-delay: 1.7s; }
        .contents .sec4 .content_inner .sp_waku .movie.active .movieBtn a .playBtn {
          opacity: 1;
          transition: opacity 0.3s;
          transition-delay: 2s; }
        .contents .sec4 .content_inner .sp_waku .movie .sp_waku {
          position: relative;
          padding-top: 0;
          width: 614px;
          height: 486px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .sp_waku {
              padding-top: 0vw;
              width: 99.34896vw;
              height: 79.16667vw; } }
        .contents .sec4 .content_inner .sp_waku .movie .boo1 {
          top: 42px;
          left: 10px;
          width: 1px;
          height: 398px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .boo1 {
              top: 6.77083vw;
              left: 1.5625vw;
              height: 64.84375vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .boo1 .boo_f {
            opacity: 0; }
          .contents .sec4 .content_inner .sp_waku .movie .boo1 .boo_s {
            height: 0%; }
        .contents .sec4 .content_inner .sp_waku .movie .boo2 {
          top: 0px;
          right: 28px;
          width: 1px;
          height: 364px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .boo2 {
              right: 3.77604vw;
              height: 59.375vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .boo2 .boo_f {
            opacity: 0; }
          .contents .sec4 .content_inner .sp_waku .movie .boo2 .boo_s {
            height: 0%; }
        .contents .sec4 .content_inner .sp_waku .movie .boo3 {
          bottom: 0px;
          left: 17px;
          width: 1px;
          height: 364px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .boo3 {
              left: 2.86458vw;
              height: 59.375vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .boo3 .boo_f {
            opacity: 0; }
          .contents .sec4 .content_inner .sp_waku .movie .boo3 .boo_s {
            height: 0%; }
        .contents .sec4 .content_inner .sp_waku .movie .boo4 {
          bottom: 42px;
          right: 20px;
          width: 1px;
          height: 398px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .boo4 {
              bottom: 6.77083vw;
              right: 2.60417vw;
              height: 64.84375vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .boo4 .boo_f {
            opacity: 0; }
          .contents .sec4 .content_inner .sp_waku .movie .boo4 .boo_s {
            height: 0%; }
        .contents .sec4 .content_inner .sp_waku .movie .boo5 {
          top: 80px;
          right: 0px;
          width: 614px;
          height: 1px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .boo5 {
              top: 12.76042vw;
              width: 99.34896vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .boo5 .boo_f {
            opacity: 0; }
          .contents .sec4 .content_inner .sp_waku .movie .boo5 .boo_s {
            width: 0%; }
        .contents .sec4 .content_inner .sp_waku .movie .boo6 {
          bottom: 80px;
          left: 0px;
          width: 614px;
          height: 1px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .boo6 {
              bottom: 12.76042vw;
              width: 99.34896vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .boo6 .boo_f {
            opacity: 0; }
          .contents .sec4 .content_inner .sp_waku .movie .boo6 .boo_s {
            width: 0%; }
        .contents .sec4 .content_inner .sp_waku .movie .movieBtn {
          position: relative;
          margin: 0 0 0 30px;
          top: 88px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie .movieBtn {
              margin-left: 5.07812vw;
              top: 14.84375vw; } }
          .contents .sec4 .content_inner .sp_waku .movie .movieBtn a {
            display: block;
            position: relative;
            width: 544px;
            height: 306px; }
            @media (max-width: 768px) {
              .contents .sec4 .content_inner .sp_waku .movie .movieBtn a {
                width: 88.54167vw;
                height: 49.73958vw; } }
            .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .img {
              position: relative;
              width: 100%;
              height: 100%;
              -webkit-transform: scale(1, 0);
                      transform: scale(1, 0); }
            .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .img_s {
              position: relative;
              z-index: 1; }
            .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .dot {
              position: absolute;
              z-index: 2;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.5); }
            .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .title {
              position: absolute;
              z-index: 3;
              top: 50%;
              left: 50%;
              -webkit-transform: translate3d(-50%, -50%, 0);
              transform: translate3d(-50%, -50%, 0);
              width: 200px;
              height: 50px; }
              @media (max-width: 768px) {
                .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .title {
                  width: 32.55208vw;
                  height: 7.8125vw; } }
              .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .title .obi {
                position: absolute;
                width: 0%;
                height: 100%;
                background: #fff;
                z-index: 2; }
              .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .title .title_s {
                position: relative;
                text-align: center;
                background: #000;
                font-size: 2rem;
                line-height: 50px;
                z-index: 1;
                opacity: 0; }
                @media (max-width: 768px) {
                  .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .title .title_s {
                    font-size: 3.125vw;
                    line-height: 7.8125vw; } }
            .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .playBtn {
              position: absolute;
              z-index: 4;
              bottom: 10px;
              left: 20px;
              width: 116px;
              height: 36px;
              opacity: 0; }
              @media (max-width: 768px) {
                .contents .sec4 .content_inner .sp_waku .movie .movieBtn a .playBtn {
                  bottom: 5.20833vw;
                  left: 1.95312vw;
                  width: 15.10417vw;
                  height: 4.6875vw; } }
        .contents .sec4 .content_inner .sp_waku .movie.movie3 .movieBtn .title {
          width: 300px; }
          @media (max-width: 768px) {
            .contents .sec4 .content_inner .sp_waku .movie.movie3 .movieBtn .title {
              width: 45.57292vw; } }
  .contents .sec5 {
    position: relative;
    width: 100%;
    height: 826px;
    margin-top: -50px;
    padding-bottom: 100px;
    background: url("../img/top/bg_system_pc.png") no-repeat center top; }
    @media (max-width: 768px) {
      .contents .sec5 {
        height: 132.8125vw;
        padding-bottom: 13.02083vw;
        background: url("../img/top/bg_system_sp.png") no-repeat center top;
        background-size: 100% auto; } }
    .contents .sec5 .content_inner {
      width: 768px; }
      @media (max-width: 768px) {
        .contents .sec5 .content_inner {
          width: 100%; } }
      .contents .sec5 .content_inner .bg_txt {
        margin-top: 170px;
        margin-left: -3px;
        width: 86px;
        z-index: 30;
        pointer-events: none; }
        @media (max-width: 768px) {
          .contents .sec5 .content_inner .bg_txt {
            margin-top: 18.22917vw;
            margin-left: 0vw;
            width: 16.14583vw; } }
      .contents .sec5 .content_inner .sp_waku {
        padding-top: 94px; }
        @media (max-width: 768px) {
          .contents .sec5 .content_inner .sp_waku {
            padding-top: 17.70833vw; } }
      .contents .sec5 .content_inner .boo1 {
        top: 202px;
        right: 0px;
        width: 768px;
        height: 1px; }
        @media (max-width: 768px) {
          .contents .sec5 .content_inner .boo1 {
            top: 28.38542vw;
            width: 100vw; } }
        .contents .sec5 .content_inner .boo1 .boo_f {
          opacity: 0; }
        .contents .sec5 .content_inner .boo1 .boo_s {
          width: 0%; }
      .contents .sec5 .content_inner .boo2 {
        top: 30px;
        right: 20px;
        width: 1px;
        height: 634px; }
        @media (max-width: 768px) {
          .contents .sec5 .content_inner .boo2 {
            top: 6.51042vw;
            right: 2.60417vw;
            height: 82.55208vw; } }
        .contents .sec5 .content_inner .boo2 .boo_f {
          opacity: 0; }
        .contents .sec5 .content_inner .boo2 .boo_s {
          height: 0%; }
      .contents .sec5 .content_inner .boo3 {
        top: 92px;
        right: 30px;
        width: 1px;
        height: 632px; }
        @media (max-width: 768px) {
          .contents .sec5 .content_inner .boo3 {
            top: 14.58333vw;
            right: 3.90625vw;
            height: 82.29167vw; } }
        .contents .sec5 .content_inner .boo3 .boo_f {
          opacity: 0; }
        .contents .sec5 .content_inner .boo3 .boo_s {
          height: 0%; }
      .contents .sec5 .content_inner.active .boo .boo_f {
        opacity: 1;
        transition: opacity 0s;
        transition-delay: 0.5s; }
      .contents .sec5 .content_inner.active .boo1 .boo_f {
        transition-delay: 0.5s; }
      .contents .sec5 .content_inner.active .boo1 .boo_s {
        -webkit-animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1);
                animation: boo_right_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1); }
      .contents .sec5 .content_inner.active .boo2 .boo_f {
        transition-delay: 0.8s; }
      .contents .sec5 .content_inner.active .boo2 .boo_s {
        -webkit-animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.3s;
                animation: boo_bottom_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.3s; }
      .contents .sec5 .content_inner.active .boo3 .boo_f {
        transition-delay: 1.1s; }
      .contents .sec5 .content_inner.active .boo3 .boo_s {
        -webkit-animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.6s;
                animation: boo_top_appear 1s 1 cubic-bezier(0.74, 0, 0.26, 1) 0.6s; }
      .contents .sec5 .content_inner.active .tit_tate {
        opacity: 1;
        transition: opacity 0.4s;
        transition-delay: 1s; }

/************************************
	slide_wrap
************************************/
#slide_wrap {
  position: relative;
  width: 768px;
  height: 1360px;
  margin: 0 auto;
  z-index: 10; }
  @media (max-width: 768px) {
    #slide_wrap {
      width: 100vw;
      height: 217.44792vw; } }
  #slide_wrap .swiper-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
  #slide_wrap .swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
  #slide_wrap .gallery-top {
    position: relative;
    height: 982px;
    width: 768px;
    margin-top: 0; }
    @media (max-width: 768px) {
      #slide_wrap .gallery-top {
        width: 100vw;
        height: 127.86458vw;
        margin-top: 0vw;
        margin-left: auto;
        margin-right: auto; } }
  #slide_wrap .gallery-thumbs {
    width: 720px;
    height: 131px;
    margin-left: 38px;
    box-sizing: border-box;
    overflow: hidden; }
    @media (max-width: 768px) {
      #slide_wrap .gallery-thumbs {
        width: 94.79167vw;
        height: 21.22396vw;
        margin-left: 5.20833vw; } }
    #slide_wrap .gallery-thumbs .swiper-wrapper {
      width: 720px !important;
      height: 131px;
      margin-left: 2px;
      box-sizing: border-box; }
      @media (max-width: 768px) {
        #slide_wrap .gallery-thumbs .swiper-wrapper {
          width: 94.53125vw !important;
          height: 21.22396vw;
          margin-left: 0vw; } }
    #slide_wrap .gallery-thumbs .swiper-slide {
      position: relative;
      width: 90px !important;
      height: 131px;
      opacity: 1; }
      @media (max-width: 768px) {
        #slide_wrap .gallery-thumbs .swiper-slide {
          width: 14.32292vw !important;
          height: 21.22396vw; } }
      #slide_wrap .gallery-thumbs .swiper-slide.new:after {
        display: block;
        content: "";
        position: absolute;
        width: 32px;
        height: 20.8px;
        background: url("../img/top/chara/ico_new.png") no-repeat center center;
        background-size: contain;
        bottom: 11px;
        right: 10px;
        z-index: 10;
        pointer-events: none; }
        @media (max-width: 768px) {
          #slide_wrap .gallery-thumbs .swiper-slide.new:after {
            width: 5.20833vw;
            height: 3.38542vw;
            bottom: 1.82292vw;
            right: 1.30208vw; } }
      #slide_wrap .gallery-thumbs .swiper-slide .swiper-slide_s {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 0;
        left: -27.6px;
        background-size: 100% auto;
        cursor: pointer; }
        @media (max-width: 768px) {
          #slide_wrap .gallery-thumbs .swiper-slide .swiper-slide_s {
            width: 19.53125vw;
            height: 19.53125vw;
            left: -4.42708vw; } }
        #slide_wrap .gallery-thumbs .swiper-slide .swiper-slide_s.on {
          opacity: 0; }
        #slide_wrap .gallery-thumbs .swiper-slide .swiper-slide_s.off {
          opacity: 1; }
      #slide_wrap .gallery-thumbs .swiper-slide .thum_bar {
        position: absolute;
        top: 128px;
        left: 0px;
        width: 80px;
        height: 3px; }
        @media (max-width: 768px) {
          #slide_wrap .gallery-thumbs .swiper-slide .thum_bar {
            top: 20.83333vw;
            left: 0vw;
            width: 13.02083vw;
            height: 0.39062vw; } }
        #slide_wrap .gallery-thumbs .swiper-slide .thum_bar .thum_bar_s {
          width: 0%;
          height: 100%;
          background: #dc0103; }
      #slide_wrap .gallery-thumbs .swiper-slide.active .thum_bar .thum_bar_s {
        -webkit-animation: thum_bar_inner 8600ms;
                animation: thum_bar_inner 8600ms; }
      #slide_wrap .gallery-thumbs .swiper-slide.thum_big .swiper-slide_s {
        width: 124.8px;
        left: -32.4px;
        cursor: pointer; }
        @media (max-width: 768px) {
          #slide_wrap .gallery-thumbs .swiper-slide.thum_big .swiper-slide_s {
            width: 20.3125vw;
            left: -5.20833vw; } }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail1 {
        z-index: 99; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail2 {
        z-index: 98; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail3 {
        z-index: 97; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail4 {
        z-index: 96; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail5 {
        z-index: 95; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail6 {
        z-index: 94; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail7 {
        z-index: 93; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail8 {
        z-index: 92; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail9 {
        z-index: 91; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail10 {
        z-index: 90; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail11 {
        z-index: 89; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail12 {
        z-index: 88; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail13 {
        z-index: 87; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail14 {
        z-index: 86; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail15 {
        z-index: 85; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail16 {
        z-index: 84; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail17 {
        z-index: 83; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail18 {
        z-index: 82; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail19 {
        z-index: 81; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail20 {
        z-index: 80; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail21 {
        z-index: 79; }
      #slide_wrap .gallery-thumbs .swiper-slide.thumbnail22 {
        z-index: 78; }
    #slide_wrap .gallery-thumbs .swiper-slide-thumb-active .swiper-slide_s.on,
    #slide_wrap .gallery-thumbs .swiper-slide:hover .swiper-slide_s.on {
      transition: opacity 0.2s;
      opacity: 1; }

#charaBack {
  position: absolute;
  top: 70px;
  width: 100%;
  height: 1380px;
  overflow: hidden;
  z-index: 1; }
  @media (max-width: 768px) {
    #charaBack {
      height: 179.6875vw;
      top: 9.11458vw; } }
  #charaBack .charaBack_s {
    position: absolute;
    top: 0px;
    width: 1680px;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0%, 0);
    transform: translate3d(-50%, 0%, 0); }
    @media (max-width: 768px) {
      #charaBack .charaBack_s {
        width: 218.75vw; } }
    #charaBack .charaBack_s .chara {
      position: absolute;
      top: 0;
      left: 0;
      width: 1224px;
      opacity: 0;
      display: none; }
      @media (max-width: 768px) {
        #charaBack .charaBack_s .chara {
          width: 159.375vw; } }
      #charaBack .charaBack_s .chara.chara1 {
        opacity: 0;
        display: block; }

@-webkit-keyframes thum_bar_inner {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@keyframes thum_bar_inner {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

/************************************
	slide2_wrap
************************************/
#slide2_wrap {
  position: relative;
  width: 100%;
  height: 550px;
  margin: 0 auto;
  padding-top: 35px;
  z-index: 10;
  opacity: 0; }
  @media (max-width: 768px) {
    #slide2_wrap {
      padding-top: 1.30208vw; } }
  #slide2_wrap .swiper-outter {
    width: 768px;
    margin: 0 auto; }
    @media (max-width: 768px) {
      #slide2_wrap .swiper-outter {
        width: 100vw; } }
  #slide2_wrap .swiper-container {
    width: 600px;
    height: 594px;
    overflow: hidden;
    margin: 0 auto; }
    @media (max-width: 768px) {
      #slide2_wrap .swiper-container {
        width: 78.125vw;
        height: 101.5625vw; } }
  #slide2_wrap .swiper-slide {
    width: 600px;
    height: 594px; }
    @media (max-width: 768px) {
      #slide2_wrap .swiper-slide {
        width: 78.125vw;
        height: 101.5625vw; } }
    #slide2_wrap .swiper-slide .system_tit {
      text-align: center;
      font-size: 3.2rem;
      font-weight: 500;
      line-height: 1.5;
      word-break: break-all;
      height: 113px; }
      @media (max-width: 768px) {
        #slide2_wrap .swiper-slide .system_tit {
          font-size: 4.16667vw;
          line-height: 1.5;
          height: 15.10417vw; } }
    #slide2_wrap .swiper-slide .video-container {
      width: 100%;
      height: 0;
      position: relative;
      padding-bottom: 56.25%; }
      #slide2_wrap .swiper-slide .video-container iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0; }
    #slide2_wrap .swiper-slide .mv_txt {
      text-align: left;
      font-size: 1.6rem;
      font-weight: 500;
      line-height: 1.9;
      word-break: break-all;
      margin-top: 26px; }
      @media (max-width: 768px) {
        #slide2_wrap .swiper-slide .mv_txt {
          font-size: 2.99479vw;
          line-height: 2;
          margin-top: 5.98958vw; } }

/************************************
	pop
************************************/
#wrapper.fixed {
  width: 100%;
  height: 100%;
  overflow: hidden; }

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  overflow: hidden;
  display: none; }
  .modal .bg {
    position: fixed;
    background: url("../img/top/menu_bg.jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 0; }
  .modal .popBox {
    position: absolute;
    width: 768px;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    display: none; }
    @media (max-width: 768px) {
      .modal .popBox {
        width: 100%; } }
    .modal .popBox .pop_inner {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding-bottom: 56.25%; }
      .modal .popBox .pop_inner .pop_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("") no-repeat center;
        background-size: cover; }
      .modal .popBox .pop_inner iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none; }
  .modal .mfp-close {
    position: fixed;
    display: block;
    z-index: 100000;
    top: 0;
    right: -150px;
    width: 60px;
    height: 50px;
    padding: 0;
    overflow: hidden;
    cursor: pointer; }
    @media (max-width: 768px) {
      .modal .mfp-close {
        width: 10.41667vw;
        height: 9.11458vw; } }
    .modal .mfp-close .close-trigger,
    .modal .mfp-close .close-trigger p.close-btn_s span {
      display: inline-block;
      box-sizing: border-box; }
    .modal .mfp-close .close-trigger {
      position: relative;
      top: 0;
      left: 0;
      width: 60px;
      height: 50px; }
      @media (max-width: 768px) {
        .modal .mfp-close .close-trigger {
          position: absolute;
          top: 2.60417vw;
          width: 7.8125vw;
          height: 5.46875vw; } }
      .modal .mfp-close .close-trigger p.close-btn_s {
        position: relative;
        margin-top: 20px;
        margin-left: 2px;
        width: 38px;
        height: 22px; }
        @media (max-width: 768px) {
          .modal .mfp-close .close-trigger p.close-btn_s {
            margin-top: 0vw;
            margin-left: 0vw;
            width: 7.8125vw;
            height: 5.46875vw; } }
        .modal .mfp-close .close-trigger p.close-btn_s span {
          position: absolute;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #fff;
          transition: background-color 0.3s; }
          @media (max-width: 768px) {
            .modal .mfp-close .close-trigger p.close-btn_s span {
              height: 0.52083vw; } }

#pop1 .popBox {
  width: 980px; }
  @media (min-width: 769px) and (max-width: 980px) {
    #pop1 .popBox {
      width: 100%; } }
  @media (max-width: 768px) {
    #pop1 .popBox {
      width: 100%; } }

#pop1 .bg {
  background: rgba(0, 0, 0, 0.85); }

#pop2 .bg {
  background: rgba(0, 0, 0, 0.85); }

#pop2 .txt_box {
  display: none; }

#pop2 .tit {
  text-align: center;
  color: #fff;
  font-size: 4rem;
  letter-spacing: 0.2em;
  line-height: 1; }
  @media (max-width: 768px) {
    #pop2 .tit {
      font-size: 9.11458vw; } }

#pop2 .attention2 {
  text-align: center;
  margin: 60px 0 60px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2; }
  @media (max-width: 768px) {
    #pop2 .attention2 {
      margin: 10.41667vw 2.60417vw 10.41667vw;
      font-size: 3.38542vw; } }
  #pop2 .attention2 span.large {
    font-size: 150%; }

#pop2 .attention {
  width: 600px;
  margin: 30px auto 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2; }
  @media (max-width: 768px) {
    #pop2 .attention {
      width: 80%;
      margin: 7.8125vw auto 0;
      font-size: 3.125vw; } }
  #pop2 .attention dt {
    float: left;
    width: 1em; }
  #pop2 .attention dd {
    padding-left: 1em; }

#pop3 .popBox {
  width: 640px;
  max-height: 90%;
  overflow: auto; }
  @media (max-width: 768px) {
    #pop3 .popBox {
      width: 100%; } }
  #pop3 .popBox .popBox_inn {
    width: 600px;
    margin: 0 auto; }
    @media (max-width: 768px) {
      #pop3 .popBox .popBox_inn {
        width: 90%; } }

#pop3 .txt_box .red {
  color: #dc0103; }

#pop3 .txt_box .large {
  font-size: 150%; }

#pop3 .txt_box .date {
  text-align: left;
  margin: 0 0 20px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.12em;
  color: #dc0103; }
  @media (max-width: 768px) {
    #pop3 .txt_box .date {
      width: 100%;
      margin: 0 auto 2.60417vw;
      font-size: 3.38542vw; } }

#pop3 .txt_box .tit {
  text-align: left;
  color: #fff;
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 1.6; }
  @media (max-width: 768px) {
    #pop3 .txt_box .tit {
      font-size: 5.20833vw;
      width: 100%; } }

#pop3 .txt_box .txt {
  text-align: left;
  margin: 50px 0 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2; }
  @media (max-width: 768px) {
    #pop3 .txt_box .txt {
      width: 100%;
      margin: 6.51042vw auto 0;
      font-size: 3.38542vw;
      padding-bottom: 7.8125vw; } }
  #pop3 .txt_box .txt a {
    text-decoration: underline; }
    @media (min-width: 769px) {
      #pop3 .txt_box .txt a:hover {
        text-decoration: none; } }

/************************************
    fadein
************************************/
.fadein-- {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  transition: opacity 0.8s linear, -webkit-transform 0.8s ease-out;
  transition: opacity 0.8s linear, transform 0.8s ease-out;
  transition: opacity 0.8s linear, transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
  transition-delay: 0.3s; }
  @media (max-width: 768px) {
    .fadein-- {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      transition: opacity 0.8s linear, -webkit-transform 0.6s ease-out;
      transition: opacity 0.8s linear, transform 0.6s ease-out;
      transition: opacity 0.8s linear, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
      transition-delay: 0.6s; } }

.fadein2-- {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  transition: opacity 0.8s linear, -webkit-transform 0.8s ease-out;
  transition: opacity 0.8s linear, transform 0.8s ease-out;
  transition: opacity 0.8s linear, transform 0.8s ease-out, -webkit-transform 0.8s ease-out; }

/************************************
    btn
************************************/
.btn_wrap *,
.btn_wrap *:before,
.btn_wrap *:after {
  box-sizing: border-box; }

.btn {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none; }
  .btn:before, .btn:after,
  .btn .btn--inner:before,
  .btn .btn--inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: #000;
    transition: 0.3s ease-in-out; }

.btn--ccw:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto; }

.btn--ccw .btn--inner:before {
  right: 0;
  left: auto; }

.btn--ccw .btn--inner:after {
  top: auto;
  bottom: 0; }

.btn--ccw:before, .btn--ccw:after {
  width: 1px;
  height: 100%; }

.btn--ccw .btn--inner:before,
.btn--ccw .btn--inner:after {
  width: 100%;
  height: 1px; }

@media (min-width: 769px) {
  .btn--ccw:hover:before, .btn--ccw:hover:after {
    height: 100%;
    -webkit-animation: heightAnime 0.4s 0.1s;
            animation: heightAnime 0.4s 0.1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  .btn--ccw:hover .btn--inner:before,
  .btn--ccw:hover .btn--inner:after {
    width: 100%;
    -webkit-animation: widthAnime 0.4s 0.1s;
            animation: widthAnime 0.4s 0.1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; } }

@-webkit-keyframes widthAnime {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@keyframes widthAnime {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@-webkit-keyframes heightAnime {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }

@keyframes heightAnime {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }