:root {
  --main-color: #5dcdad;
  --text-color: #131313;
  --header-height: 80px;
}
#wrap {overflow:hidden}
.mb {display:none}
.pc {display:block}
h2 {font-size:38px;font-weight:700;color:var(--text-color);line-height:53.2px}
h2 span {color:var(--main-color)}
.cont {width:100%;margin:0 auto;max-width:910px}
.btn-wrap {display:flex;align-items:center}
.btn-wrap a {display:block;padding:19px 44px 17px;font-size:16px;font-weight:600;border-radius:10px;transition:all .2s;background:#fff;color:var(--main-color)}
.btn-wrap a:hover {background:#DFFAF4}
.btn-wrap a:first-child {margin-right:20px}
.btn-wrap a img {height:20px;margin-right:14px;position:relative;top:-2px}
.btn-wrap.v2 {justify-content:center}
.btn-wrap.v2 a {background:var(--main-color);color:#fff}
.btn-wrap.v2 a img {top:0}
.btn-wrap.v2 a:hover {background: #4bb597;}

header {z-index:9999;background: var(--main-color);position:fixed;top:0;left:0;height:var(--header-height);width:100%;display:flex;align-items:center;justify-content:center}
header img {height:35px}

#visual {background: var(--main-color);color:#fff;padding-top:var(--header-height)}
#visual h3 {font-size:40px;font-weight:700}
#visual .cont {max-width:1200px;padding:0 5%;background:url('../img/visual-bg.png') no-repeat right center;background-size:contain}
#visual .logo {height:57px;margin:27px 0 60px}
#visual .right img {height:574px}
#visual .right img {position:relative;left:-22%}

#cont01,
#cont02,
#cont03,
#cont04,
#cont05,
#cont06 {background:#F8F8F8;padding:87px 0 0 }

#cont02,
#cont04,
#cont06 {background:#fff}

#visual .cont,
#cont01 .cont,
#cont02 .cont,
#cont03 .cont,
#cont04 .cont,
#cont05 .cont{display:flex;align-items:center;justify-content:center}

#cont01 p {margin-top:24px;font-size:16px;font-weight:700;color:#828282}

.screen {height:575px}

#cont01 .screen,
#cont03 .screen,
#cont05 .screen {position:relative;left:-20%}

#cont03 .character {height:148px;margin-top:102px}
#cont04 .character {height:140px;margin-top:124px}
#cont05 .character {height:175px;margin-top:96px}

#cont06 {text-align:center;padding-bottom:74px}
#cont06 h2 {margin-bottom:43px}

#cont06 .pc-swiper {position:relative;max-width:748px;margin:0 auto}
#cont06 .mb-swiper {position:relative;max-width:100%;margin:0 auto}
#cont06 .swiper-slide {position:relative;height:0;overflow:hidden}
#cont06 .pc-swiper .swiper-slide {padding-bottom:56.25%;}
#cont06 .mb-swiper .swiper-slide {padding-bottom:42.25%;}
#cont06 .swiper-slide iframe {position:absolute;width:100%;height:100%;top:0;left:0;}
#cont06 .swiper-button-next:after,
#cont06 .swiper-button-prev:after {display:none}
#cont06 .swiper-button-next,
#cont06 .swiper-button-prev {width:64px;height:64px;background-repeat:no-repeat;background-size:contain;background-position:center}
#cont06 .swiper-button-next {background-image:url("../img/swiper-right.png");right:-102px}
#cont06 .swiper-button-prev {background-image:url("../img/swiper-left.png");left:-102px}
#cont06 .swiper-pagination {margin-top:28px;position:relative}
#cont06 .swiper-pagination-bullet-active {background:#646464}

#banner {background:#DFFAF4;color:var(--text-color);padding:123px 0 122px;text-align:center}
#banner .logo {height:57px;margin-bottom:16px}
#banner .download-box {margin:40px auto 0 auto;display:inline-flex;align-items:center}
#banner .qr {width:150px;margin-right:20px}
#banner .qr img {width:100%;}
#banner .btn-wrap {width:206px;flex-direction:column}
#banner .btn-wrap a {display:flex;align-items:center;justify-content:center;width:100%;height:62px;padding:0}
#banner .btn-wrap a:first-child {margin: 0 0 20px 0}

footer {background:#2E3239;padding:56px 0 70px;color:#fff}
footer .cont {max-width:1000px;margin: 0 auto}
footer .logo {height:24px;margin-bottom:52px}
footer .flex {display:flex;align-items:flex-start;justify-content:space-between}
footer .left {font-size:14px}
footer .left h5 {font-weight:800;margin-bottom:12px;font-size:19px}
footer .left div {line-height:2;margin-bottom:40px}
footer .right {display:flex;align-items:flex-start;font-size:14px}
footer .right div {margin-left:90px}
footer .right p {font-weight: bold;margin-bottom:20px}
footer .right a {display:block;margin-bottom:15px;transition:all .2s}
footer .right a:hover {opacity:0.5}
footer .right a img {height:16px}

.fix-button {transition:all .2s;box-shadow:1px 1px 10px rgba(0,0,0,.1);height:86px;background:#fff;position:fixed;bottom:-100%;left:0;width:100%;display:flex;align-items:center;justify-content:center}
.fix-button.on {bottom:0}

@media screen and (max-width: 1200px) {
  #visual .right img {left:0}
}

@media screen and (max-width: 1080px) {
  :root {
    --header-height: 70px;
  }
  #wrap {padding-bottom:80px;}
  .mb {display:block}
  .pc {display:none}
  header {height:70px}
  header img {height:29px}

  .btn-wrap a {padding:19px 24px 17px;}
  .btn-wrap a:first-child {margin-right:14px}
  .btn-wrap a img {height:19px}

  .cont {max-width:90%;display:block}
  h2 {font-size:27px;line-height:140%}

  #visual {padding-top:var(--header-height);text-align:center}
  #visual h3 {font-size:28px;margin-top:56px}
  #visual .cont {max-width:91%;padding:0;background:url('../img/visual-bg.png') no-repeat center bottom;background-size:contain}
  #visual .logo {height:42px;margin:24px 0 0}
  #visual .right img {width:95%;height:auto;max-width:320px;left:50%;transform:translateX(-50%)}

  #cont01,
  #cont02,
  #cont03,
  #cont04,
  #cont05 {text-align:center}

  #visual .cont,
  #cont01 .cont,
  #cont02 .cont,
  #cont03 .cont,
  #cont04 .cont,
  #cont05 .cont {display:block}


  #cont01 h2,
  #cont02 h2,
  #cont03 h2,
  #cont04 h2,
  #cont05 h2 {margin-bottom:20px}


  #cont01 h2,
  #cont02 h2,
  #cont03 h2,
  #cont04 h2,
  #cont05 h2 {margin-bottom:20px}

  .screen {height:350px;display:inline-block}


  #cont01 .screen {left:-11px}
  #cont03 .screen {left:-16px}
  #cont04 .screen,
  #cont05 .screen {position:relative;left:-14px}

  #banner .logo {height:40px}
  #banner .download-box {flex-direction: column;display:flex}
  #banner .qr {margin-right:0}
  #banner .btn-wrap {width:100%;flex-direction:row}
  #banner .btn-wrap a {width:100%;max-width: 164px;padding:19px 0 17px}
  #banner .btn-wrap a:first-child {margin: 0 8px 0 0}

  footer .cont {max-width:90%}
  footer .flex {flex-direction: column}
  footer .left div {margin-bottom:40px}
  footer .right {flex-direction:column}
  footer .right div {margin-left:0;margin-bottom:30px}

  #banner {padding:101px 0}
  #banner .btn-wrap {margin-top:40px;}

  .fix-button .btn-wrap a {padding:19px 0 17px;flex:1;display:flex;align-items:center;justify-content:center}
  .fix-button .btn-wrap a img {margin-right:8px}
}

@media screen and (max-width: 321px) {
  h2 {font-size:23px}
}