/*----------Don't edit css----------*/
.index {
  padding: 0; }
  .index .main-inner {
    padding: 0 0 160px; }
  .index .hero {
    width: 100%; }
    .index .hero .hero-inner {
      max-width: 1080px;
      height: 572px;
      margin: 0 auto 0;
      padding: 20px 0 0;
      position: relative;
      overflow: hidden; }
  .index .hero-img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4; }
  .index .logo-pub {
    position: absolute;
    top: 20px;
    left: 633px; }
  .index .product {
    width: 420px;
    position: absolute;
    bottom: 17px;
    left: 530px; }
    .index .product .product-inner {
      position: relative; }
    .index .product .product-list {
      text-align: left;
      vertical-align: bottom;
      letter-spacing: -.4em; }
      .index .product .product-list li {
        display: inline-block;
        letter-spacing: normal;
        margin: 0 0 0 12px;
        vertical-align: top; }
        .index .product .product-list li:first-child {
          margin: 0 0 0 0; }
        .index .product .product-list li:nth-child(4) {
          margin: 24px 0 0 12px; }
    .index .product .icon-new1 {
      position: absolute;
      top: -20px;
      left: -62px; }
    .index .product .icon-new2 {
      position: absolute;
      top: -10px;
      left: 310px; }
    .index .product .text-limit {
      position: absolute;
      top: 40px;
      left: 376px; }
  .index .bnr {
    width: 100%;
    height: 84px;
    position: relative;
    margin: -84px 0 0;
    z-index: 3;
    background: #db81b3; }
    .index .bnr .bnr-inner {
      width: 1080px;
      margin: 0 auto 0;
      position: relative; }
    .index .bnr .bnr-suda {
      position: absolute;
      top: -92px;
      right: 0; }
    .index .bnr .bnr-suda2 {
      position: absolute;
      top: -92px;
      right: -94px; }
    .index .bnr .text-link, .index .bnr .text-link2 {
      width: 430px;
      margin: 0 0 0 480px;
      padding: 15px 0 0;
      position: relative;
      z-index: 4; }
      .index .bnr .text-link a, .index .bnr .text-link2 a {
        display: block;
        position: relative; }
        .index .bnr .text-link a:after, .index .bnr .text-link2 a:after {
          width: 21px;
          height: 29px;
          content: '';
          background: url(/2017/index/images/arrow.png) no-repeat 0 0;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 96%;
          margin: auto;
          -webkit-transition: all .5s;
          transition: all .5s; }
        .index .bnr .text-link a:hover:after, .index .bnr .text-link2 a:hover:after {
          -webkit-animation: arrow .5s;
                  animation: arrow .5s; }
    .index .bnr .text-link2 {
      width: 404px;
      margin: 0 0 0 520px;
      padding: 9px 0 0; }
  .index .about {
    width: 720px;
    margin: 330px auto 0;
    background: #fff;
    padding: 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .index .about .about-inner {
      width: 700px;
      height: 543px;
      background: url(/2017/index/images/about_bg.png) no-repeat 0 0;
      position: relative; }
    .index .about .about-sound {
      position: absolute;
      top: -308px;
      left: 120px; }
    .index .about .about-suda {
      position: absolute;
      top: -154px;
      left: 335px; }
    .index .about .about-text1 {
      position: absolute;
      top: -82px;
      left: 82px; }
    .index .about .about-text2 {
      position: absolute;
      top: 93px;
      left: 455px; }
    .index .about .about-deco1 {
      position: absolute;
      top: 63px;
      left: 656px; }
    .index .about .about-deco2 {
      position: absolute;
      top: 93px;
      left: 434px; }
    .index .about .about-deco3 {
      position: absolute;
      top: 312px;
      left: 660px; }
    .index .about .about-deco4 {
      position: absolute;
      top: 222px;
      left: 401px; }
    .index .about .about-deco5 {
      position: absolute;
      top: 252px;
      left: 302px; }
    .index .about .about-deco6 {
      position: absolute;
      top: 288px;
      left: 104px; }
    .index .about .detail-heading {
      text-align: center;
      position: relative;
      z-index: 2; }
  .index .ch {
    margin: 80px 0 0; }
    .index .ch .ch-inner {
      width: 720px;
      background: #fff;
      padding: 10px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      margin: 30px 0 0; }
    .index .ch .ch-heading {
      text-align: center;
      margin: 0 auto 0; }
    .index .ch .ch-slice {
      position: relative; }
      .index .ch .ch-slice.box1 {
        width: 700px;
        height: 619px;
        background: url(/2017/index/images/ch_bg1.png) no-repeat 0 0; }
      .index .ch .ch-slice.box2 {
        width: 700px;
        height: 646px;
        background: url(/2017/index/images/ch_bg2.png) no-repeat 0 0; }
    .index .ch .ch-text1 {
      position: absolute;
      top: -40px;
      left: 341px; }
    .index .ch .ch-text2 {
      position: absolute;
      top: 196px;
      left: 65px;
      z-index: 2; }
    .index .ch .ch-text3 {
      position: absolute;
      top: 3px;
      left: 20px;
      z-index: 3; }
    .index .ch .ch-text5 {
      position: absolute;
      top: 301px;
      left: 25px; }
    .index .ch .ch-deco1 {
      position: absolute;
      top: 465px;
      left: 497px; }
    .index .ch .ch-deco2 {
      position: absolute;
      top: 278px;
      left: 449px; }
    .index .ch .ch-deco3 {
      position: absolute;
      top: 393px;
      left: 465px; }
    .index .ch .ch-deco4 {
      position: absolute;
      top: 550px;
      left: 207px; }
    .index .ch .ch-mock {
      position: absolute;
      top: 203px;
      left: 238px;
      z-index: 1; }
    .index .ch .ch-products {
      position: absolute;
      top: 338px;
      left: 30px;
      z-index: 3; }
    .index .ch .detail-heading {
      margin: 0 0 0 187px;
      z-index: 3;
      position: relative; }
    .index .ch .btn-detail {
      margin: 20px 0 0 230px;
      display: inline-block; }
    .index .ch .btn-tw {
      margin: 20px 0 0 20px;
      display: inline-block; }
    .index .ch .ch-second-heading {
      position: absolute;
      top: 34px;
      left: 147px; }
    .index .ch .end-text {
      text-align: center; }
      .index .ch .end-text + .btn-detail {
        margin: 20px auto 0 auto; }
  .index .ch2 {
    margin: 80px 0 0; }
    .index .ch2 .ch2-inner {
      width: 720px;
      background: #fff;
      padding: 10px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      margin: 30px 0 0; }
      .index .ch2 .ch2-inner.mt-top {
        margin: -1px 0 0 0; }
      .index .ch2 .ch2-inner.btm-slant {
        padding: 10px 10px 25px; }
    .index .ch2 .other {
      z-index: 2; }
    .index .ch2 .ch2-heading {
      text-align: center;
      margin: 0 auto 0; }
    .index .ch2 .ch2-slice {
      position: relative; }
      .index .ch2 .ch2-slice.bg1 {
        height: 729px;
        background: url(/2017/index/images/ch2_bg1.png) no-repeat 0 0; }
      .index .ch2 .ch2-slice.bg2 {
        height: 586px;
        background: url(/2017/index/images/ch2_bg2.png) no-repeat 0 0; }
      .index .ch2 .ch2-slice > div, .index .ch2 .ch2-slice > p {
        position: absolute; }
    .index .ch2 .ch2-heading {
      text-align: center; }
    .index .ch2 .ch2-text1 {
      top: -33px;
      left: -33px; }
    .index .ch2 .ch2-f {
      top: 341px;
      left: 240px; }
    .index .ch2 .ch2-suda1 {
      top: 329px;
      left: 250px; }
    .index .ch2 .ch2-heading2 {
      top: 241px;
      left: 96px;
      position: absolute;
      z-index: 2; }
    .index .ch2 .ch2-deco1 {
      top: 14px;
      left: 255px; }
    .index .ch2 .ch2-deco2 {
      top: 340px;
      left: 425px;
      z-index: 2; }
    .index .ch2 .ch2-deco3 {
      top: 600px;
      left: 188px; }
    .index .ch2 .ch2-deco4 {
      top: 357px;
      left: 115px; }
    .index .ch2 .ch2-deco5 {
      top: 578px;
      left: 333px; }
    .index .ch2 .ch2-deco6 {
      top: 302px;
      left: 372px; }
    .index .ch2 .ch2-deco7 {
      top: 441px;
      left: 423px; }
    .index .ch2 .ch2-deco8 {
      top: 653px;
      left: 57px;
      z-index: 5; }
    .index .ch2 .ch2-text2 {
      margin: 0 0 0 270px;
      padding: 10px 0 0;
      position: relative;
      z-index: 2; }
    .index .ch2 .ch2-balloon {
      position: absolute;
      top: 47px;
      left: 60px;
      z-index: 2; }
    .index .ch2 p.ch2-text3 {
      padding: 90px 0 0;
      text-align: center;
      position: relative; }
    .index .ch2 .ch2-text5 {
      top: 308px;
      left: 130px; }
    .index .ch2 .ch2-deco9 {
      top: 309px;
      left: 66px; }
    .index .ch2 .ch2-deco10 {
      top: 289px;
      left: 138px; }
    .index .ch2 .ch2-deco11 {
      top: 460px;
      left: 500px; }
    .index .ch2 .ch2-deco12 {
      top: 190px;
      left: 174px; }
    .index .ch2 .ch2-deco13 {
      top: 396px;
      left: 553px; }
    .index .ch2 .ch2-date {
      text-align: center;
      margin: 15px auto 0;
      position: relative;
      z-index: 2; }
  .index .cm {
    margin: 80px 0 0; }
    .index .cm .cm-inner {
      width: 720px;
      background: #fff;
      padding: 10px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      margin: 30px 0 0; }
    .index .cm .cm-heading {
      text-align: center;
      margin: 0 auto 0; }
    .index .cm .cm-slice {
      position: relative;
      width: 700px;
      height: 569px;
      background: url(/2017/index/images/cm_bg.png) no-repeat 0 0; }
    .index .cm .cm-text1 {
      position: absolute;
      top: -23px;
      left: 10px; }
    .index .cm .cm-text2 {
      position: absolute;
      top: 421px;
      left: 515px; }
    .index .cm .cm-deco1 {
      position: absolute;
      top: 195px;
      left: 500px; }
    .index .cm .cm-deco2 {
      position: absolute;
      top: 268px;
      left: 551px; }
    .index .cm .cm-deco3 {
      position: absolute;
      top: 302px;
      left: 481px; }
    .index .cm .cm-deco4 {
      position: absolute;
      top: 436px;
      left: 230px; }
    .index .cm .cm-deco5 {
      position: absolute;
      top: 357px;
      left: 76px; }
    .index .cm .cm-deco6 {
      position: absolute;
      top: 300px;
      left: 147px; }
    .index .cm .cm-deco7 {
      position: absolute;
      top: 360px;
      left: 200px; }
    .index .cm .btn-detail {
      margin: 0 auto 0;
      padding: 10px 0 5px; }
  .index .pinfo {
    margin: 80px 0 0; }
    .index .pinfo .pinfo-inner {
      width: 720px;
      background: #fff;
      padding: 10px 10px 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      margin: 30px 0 0; }
    .index .pinfo .pinfo-heading {
      text-align: center;
      margin: 0 auto 0; }
    .index .pinfo .pinfo-slice {
      position: relative;
      width: 700px;
      height: 578px;
      background: url(/2017/index/images/pinfo_bg.png) no-repeat 0 0; }
    .index .pinfo .pinfo-text1 {
      position: absolute;
      top: -39px;
      left: 420px; }
    .index .pinfo .pinfo-img1 {
      position: absolute;
      top: 251px;
      left: -15px; }
    .index .pinfo .pinfo-img2 {
      position: absolute;
      top: 243px;
      left: 143px; }
    .index .pinfo .pinfo-img3 {
      position: absolute;
      top: 227px;
      left: 317px; }
    .index .pinfo .pinfo-img4 {
      position: absolute;
      top: 211px;
      left: 495px; }
    .index .pinfo .pinfo-deco1 {
      position: absolute;
      top: -20px;
      left: 181px; }
    .index .pinfo .pinfo-deco2 {
      position: absolute;
      top: 36px;
      left: 98px; }
    .index .pinfo .pinfo-deco3 {
      position: absolute;
      top: 258px;
      left: 0; }
    .index .pinfo .pinfo-deco4 {
      position: absolute;
      top: 410px;
      left: 460px; }
    .index .pinfo .pinfo-deco5 {
      position: absolute;
      top: 271px;
      left: 618px; }
    .index .pinfo .pinfo-deco6 {
      position: absolute;
      top: 450px;
      left: 70px; }
    .index .pinfo .pinfo-deco7 {
      position: absolute;
      top: 417px;
      left: 130px; }
    .index .pinfo .btn-detail {
      margin: 0 auto 0;
      padding: 10px 0 5px; }
  .index .sns {
    margin: 180px 0 0; }
    .index .sns .sns-inner {
      width: 720px;
      background: #fff;
      padding: 10px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      margin: 30px 0 0; }
    .index .sns .sns-slice {
      position: relative;
      width: 700px;
      height: 696px;
      background: url(/2017/index/images/sns_bg.png) no-repeat 0 0; }
    .index .sns .sns-heading {
      width: 100%;
      position: absolute;
      top: 37px;
      left: 4px; }
    .index .sns .btn-twitter {
      width: 305px;
      height: 67px;
      position: absolute;
      top: 214px;
      left: 80px; }
      .index .sns .btn-twitter a {
        width: 305px;
        height: 67px;
        display: block;
        overflow: hidden;
        text-indent: -9999px;
        background: url(/2017/index/images/btn_twitter.png) no-repeat 0 0; }
        .index .sns .btn-twitter a:hover {
          background: url(/2017/index/images/btn_twitter.png) no-repeat 0 -67px; }
    .index .sns .btn-line {
      width: 305px;
      position: absolute;
      top: 290px;
      left: 80px; }
      .index .sns .btn-line a {
        width: 305px;
        height: 67px;
        display: block;
        overflow: hidden;
        text-indent: -9999px;
        background: url(/2017/index/images/btn_line.png) no-repeat 0 0; }
        .index .sns .btn-line a:hover {
          background: url(/2017/index/images/btn_line.png) no-repeat 0 -67px; }
    .index .sns .sns-text1 {
      position: absolute;
      top: -138px;
      left: 354px; }
    .index .sns .sns-suda {
      position: absolute;
      top: -113px;
      left: 439px; }
    .index .sns .sns-deco1 {
      position: absolute;
      top: 24px;
      left: -3px; }
    .index .sns .sns-deco2 {
      position: absolute;
      top: 150px;
      left: 408px; }
    .index .sns .sns-deco3 {
      position: absolute;
      top: 434px;
      left: 536px; }
    .index .sns .sns-deco4 {
      position: absolute;
      top: 479px;
      left: 255px; }
    .index .sns .sns-deco5 {
      position: absolute;
      top: 480px;
      left: 576px; }
    .index .sns .sns-deco6 {
      position: absolute;
      top: 486px;
      left: 497px; }
    .index .sns .sns-balloon {
      width: 337px;
      position: absolute;
      top: 532px;
      left: 40px; }
    .index .sns .sns-balloon-inner {
      position: relative; }
    .index .sns .sns-share-heading {
      position: absolute;
      top: 55px;
      left: 70px; }
    .index .sns .sns-list {
      width: 250px;
      position: absolute;
      top: 134px;
      left: 46px; }
      .index .sns .sns-list:after {
        content: '';
        display: block;
        clear: both; }
      .index .sns .sns-list li {
        width: 72px;
        float: left;
        margin: 0 0 0 15px; }
        .index .sns .sns-list li:first-child {
          margin: 0 0 0 0; }
        .index .sns .sns-list li a {
          display: block;
          -webkit-transition: all .2s;
          transition: all .2s; }
          .index .sns .sns-list li a:hover {
            opacity: 0.7;
            -ms-filter: "alpha(opacity=70)"; }
  .index .btn-detail {
    width: 213px;
    margin: 0 auto 0;
    position: relative;
    z-index: 2; }
    .index .btn-detail a {
      width: 213px;
      height: 53px;
      text-indent: -9999px;
      overflow: hidden;
      display: block;
      background: url(/2017/index/images/btn_detail.png) no-repeat 0 0; }
      .index .btn-detail a:hover {
        background: url(/2017/index/images/btn_detail.png) no-repeat 0 -53px; }
  .index .btn-tw {
    width: 213px;
    height: 53px;
    margin: 15px auto 0;
    position: relative;
    z-index: 2;
    vertical-align: top; }
    .index .btn-tw a {
      width: 213px;
      height: 53px;
      display: block;
      text-indent: -9999px;
      overflow: hidden;
      background: url(/2017/index/images/btn_tw.png) no-repeat 0 0; }
      .index .btn-tw a:hover {
        background: url(/2017/index/images/btn_tw.png) no-repeat 0 -53px; }
  .index .bnr-2020 {
    width: 100%;
    background: #e0031b; }
    .index .bnr-2020 .bnr-2020-inner {
      width: 580px;
      margin: 0 auto 0;
      position: relative; }
    .index .bnr-2020 .btn-2020 {
      position: absolute;
      top: 211px;
      left: 194px; }
  .index .info-text {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #ffffff;
    text-align: left;
    margin: 15px 0 0;
    padding: 0 20px 0;
    position: relative;
    z-index: 2; }

@-webkit-keyframes arrow {
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg); } }

@keyframes arrow {
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg); } }