/* reset_setting */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap");
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, a {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
  list-style: none;
  vertical-align: baseline;
  text-decoration: none;
}

html.is-fixed body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #202E42;
  overflow-x: hidden;
}

a:hover {
  opacity: .8;
}

br.pc {
  display: block;
}

@media screen and (max-width: 768px) {
  br.pc {
    display: none;
  }
}

br.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  br.sp {
    display: block;
  }
}

img {
  max-width: 100%;
  height: auto;
}

img.pc {
  display: block !important;
}

@media screen and (max-width: 768px) {
  img.pc {
    display: none !important;
  }
}

img.sp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  img.sp {
    display: block !important;
  }
}

.section {
  width: 1170px;
  max-width: 100%;
  margin: 0 auto 192px;
}

@media screen and (max-width: 1200px) {
  .section {
    width: 90%;
  }
}

@media screen and (max-width: 768px) {
  .section {
    margin: 0 auto 108px;
  }
}

.section__title {
  text-align: center;
  font-size: 36px;
  line-height: 1.19333333;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .section__title {
    font-size: 24px;
  }
}

.section__title p {
  opacity: .75;
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.19357143;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .section__title p {
    margin-top: 24px;
    font-size: 12px;
    line-height: 2;
  }
}

main {
  position: relative;
}

.header {
  padding: 42px 135px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .header {
    padding: 84px 0 32px 0;
    width: 87.2%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .header--second {
    padding: 30px 0 32px 0;
  }
}

@media screen and (max-width: 768px) {
  .header__logo img {
    width: 124px;
  }
}

.header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .header__menu {
    display: none;
  }
}

.header__item a {
  border-radius: 32px;
  font-size: 12px;
  line-height: 1.19333333;
  padding: 9px 33px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.header__item a.login {
  border: solid 1px #0095FF;
  color: #0095FF;
}

.header__item a.new {
  background: #0095FF;
  color: #fff;
  margin-left: 20px;
}

.parallax2 {
  content: "";
  background: url("../img/circle__02.png") no-repeat;
  background-position: center;
  background-size: cover;
  top: 0;
  left: 33.263889%;
  display: block;
  width: 56px;
  height: 56px;
  position: absolute;
  z-index: -2;
}

@media screen and (max-width: 768px) {
  .parallax2 {
    left: 72%;
  }
}

.parallax1 {
  content: "";
  background: url("../img/circle__01.png") no-repeat;
  background-position: center;
  background-size: cover;
  top: 74px;
  left: 0;
  display: block;
  width: 1199px;
  height: 673px;
  position: absolute;
  z-index: -1;
}

@media screen and (max-width: 1200px) {
  .parallax1 {
    width: 100%;
    background-size: contain;
  }
}

@media screen and (max-width: 768px) {
  .parallax1 {
    width: 100%;
    top: -4vw;
    height: 126.133333vw;
    background: url("../img/circle__01--sp.svg") no-repeat;
    background-size: contain 120%;
    background-position: top center;
  }
}

.catch {
  background: url("../img/expand-yourself.svg") no-repeat;
  background-size: contain;
  background-position: center bottom;
  padding-left: 135px;
  margin-bottom: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .catch {
    background: none;
    padding-left: 0;
    margin-bottom: 97.5px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 0;
  }
}

.catch__text {
  width: 50%;
  padding-top: 160px;
  padding-bottom: 160px;
}

@media screen and (max-width: 768px) {
  .catch__text {
    width: 87.2%;
    padding-bottom: 48px;
    padding-top: 0;
  }
}

.catch__img {
  width: 50%;
  padding-bottom: 60px;
  position: absolute;
  left: 55%;
  width: 970px;
}

@media screen and (max-width: 1420px) {
  .catch__img {
    padding-left: 50px;
  }
}

@media screen and (max-width: 768px) {
  .catch__img {
    width: 129.333333vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-left: 0;
    position: relative;
    left: 0;
  }
}

.catch__img img {
  -webkit-box-shadow: 0px 1.63037px 7.1555px 0px rgba(0, 0, 0, 0.0279), 0px 4.50776px 19.78405px 0px rgba(0, 0, 0, 0.04), 0px 10.85295px 47.63237px 0px rgba(0, 0, 0, 0.0521), 0px 36px 40px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 1.63037px 7.1555px 0px rgba(0, 0, 0, 0.0279), 0px 4.50776px 19.78405px 0px rgba(0, 0, 0, 0.04), 0px 10.85295px 47.63237px 0px rgba(0, 0, 0, 0.0521), 0px 36px 40px 0px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 768px) {
  .catch__img img {
    min-width: 75.733333%;
    width: 129.333333vw;
    height: intrinsic;
  }
}

.catch__title {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 32px;
}

@media screen and (max-width: 960px) {
  .catch__title {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .catch__title {
    width: 87.2%;
    margin-bottom: 32px;
  }
}

.catch__title span {
  color: #0095FF;
}

@media screen and (max-width: 1200px) {
  .catch__title span br.sp {
    display: block;
  }
}

.catch p {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .catch p {
    font-size: 12px;
  }
}

.catch p br.tb {
  display: none;
}

@media screen and (max-width: 1200px) {
  .catch p br.tb {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .catch p br.tb {
    display: none;
  }
}

.catch a {
  border-radius: 32px;
  font-size: 14px;
  line-height: 1.19357143;
  padding: 15.5px 16px 15.5px 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .catch a {
    font-size: 10px;
    padding: 10px 12px 10px 32px;
  }
}

.catch a span {
  margin-right: 12px;
}

.catch a.beta {
  background: #0095FF;
  color: #fff;
  margin-right: 32px;
}

@media screen and (max-width: 768px) {
  .catch a.beta {
    margin-right: 16px;
  }
}

.catch a.download {
  border: solid 1px #0095FF;
  color: #0095FF;
}

.catch__scroll {
  position: absolute;
  left: 57px;
  bottom: 150px;
}

@media screen and (max-width: 768px) {
  .catch__scroll {
    display: none;
  }
}

.catch__scroll:after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 1px;
  height: 72px;
  background: #000;
  -webkit-animation: pathmove 1.4s ease-in-out infinite;
          animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

.ability {
  width: 100%;
  overflow: hidden;
  padding-bottom: 130px;
}

@media screen and (max-width: 768px) {
  .ability {
    padding-bottom: 140px;
  }
}

.ability__wrap {
  position: relative;
}

@media screen and (max-width: 768px) {
  .ability__wrap {
    display: none;
  }
}

.ability__wrap .parallax3 {
  content: "";
  background: url("../img/circle__03.png") no-repeat;
  background-position: center;
  background-size: cover;
  top: 45px;
  left: 45px;
  display: block;
  width: 48px;
  height: 48px;
  position: absolute;
  z-index: -3;
}

.ability__wrap .parallax4 {
  content: "";
  background: url("../img/circle__03.png") no-repeat;
  background-position: center;
  background-size: cover;
  top: 195px;
  right: 93px;
  display: block;
  width: 48px;
  height: 48px;
  position: absolute;
  z-index: -3;
}

.ability__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  right: 6.25%;
  position: relative;
  padding: 70px 0;
}

@media screen and (max-width: 1200px) {
  .ability__list {
    right: 0;
    padding: 70px 0 0;
  }
}

.ability__img img {
  -webkit-box-shadow: 0px 36px 158px rgba(0, 0, 0, 0.08), 0px 10.8529px 47.6324px rgba(0, 0, 0, 0.0521271), 0px 4.50776px 19.7841px rgba(0, 0, 0, 0.04), 0px 1.63037px 7.1555px rgba(0, 0, 0, 0.0278729);
          box-shadow: 0px 36px 158px rgba(0, 0, 0, 0.08), 0px 10.8529px 47.6324px rgba(0, 0, 0, 0.0521271), 0px 4.50776px 19.7841px rgba(0, 0, 0, 0.04), 0px 1.63037px 7.1555px rgba(0, 0, 0, 0.0278729);
  display: block;
}

@media screen and (max-width: 1200px) {
  .ability__img {
    display: none;
  }
}

.ability__txt {
  background: #f6f7f7;
  border-radius: 16px;
  padding: 48px;
  width: 32.638889%;
  min-width: 470px;
  margin-left: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

@media screen and (max-width: 1200px) {
  .ability__txt {
    border-radius: 0;
    padding: 0;
    width: 100%;
    min-width: 100%;
    margin-left: 0;
    background: none;
    display: block;
    z-index: 2;
    position: relative;
  }
}

.ability__txt-title {
  font-size: 36px;
  line-height: 1.47222222;
  font-weight: 700;
  margin-bottom: 32px;
}

@media screen and (max-width: 1200px) {
  .ability__txt-title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 48px;
    text-align: center;
  }
}

.ability__txt-img {
  display: none;
}

@media screen and (max-width: 1200px) {
  .ability__txt-img {
    display: block;
    padding-bottom: 31px;
    position: relative;
  }
  .ability__txt-img::before {
    content: "";
    width: 100%;
    height: 20vw;
    position: absolute;
    background: #f3f4f4;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .ability__txt-img img {
    display: block;
    width: 75.733333%;
    margin: 0 auto;
    -webkit-box-shadow: 0px 1.63037px 7.1555px 0px rgba(0, 0, 0, 0.0279), 0px 4.50776px 19.78405px 0px rgba(0, 0, 0, 0.04), 0px 10.85295px 47.63237px 0px rgba(0, 0, 0, 0.0521), 0px 36px 158px 0px rgba(0, 0, 0, 0.08);
            box-shadow: 0px 1.63037px 7.1555px 0px rgba(0, 0, 0, 0.0279), 0px 4.50776px 19.78405px 0px rgba(0, 0, 0, 0.04), 0px 10.85295px 47.63237px 0px rgba(0, 0, 0, 0.0521), 0px 36px 158px 0px rgba(0, 0, 0, 0.08);
  }
}

.ability__txt-txt {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  margin-bottom: 90px;
}

@media screen and (max-width: 1200px) {
  .ability__txt-txt {
    width: 100%;
    padding: 0 6.4vw 32px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 12px;
    margin: 0 auto;
    background: #f3f4f4;
  }
  .ability__txt-txt img {
    width: 100%;
  }
}

.ability__txt-code {
  font-size: 12px;
  line-height: 1.19333333;
  font-weight: 400;
  margin-bottom: 16px;
}

.ability__txt-code img {
  margin-top: 16px;
}

.ability__txt-code span {
  opacity: .5;
}

@media screen and (max-width: 1200px) {
  .ability__txt-code {
    font-size: 12px;
    width: 100%;
    margin: 0 auto;
    background: #f3f4f4;
    padding: 0 6.4vw 16px;
  }
  .ability__txt-code img {
    left: -6.4vw;
    width: 100vw;
    position: relative;
    margin-top: 16px;
  }
}

.function {
  padding-bottom: 100px;
}

@media screen and (max-width: 1200px) {
  .function {
    padding-bottom: 0;
    width: 100%;
  }
}

.function__title {
  margin-bottom: 96px;
}

@media screen and (max-width: 1200px) {
  .function__title {
    margin-bottom: 48px;
  }
}

.function__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  margin-bottom: 201px;
  min-height: 417px;
}

@media screen and (max-width: 1200px) {
  .function__item {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: auto;
  }
}

@media screen and (max-width: 1200px) {
  .function__item {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 88px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.function__item:last-child {
  margin-bottom: 0;
}

.function__item:nth-child(even) .function__text {
  right: 0;
  position: absolute;
  padding-left: 21.538462%;
  top: 73px;
}

@media screen and (max-width: 1200px) {
  .function__item:nth-child(even) .function__text {
    position: relative;
    padding-left: 0;
    top: 0;
  }
}

.function__item:nth-child(even) .function__img {
  left: 0;
  position: relative;
}

.function__item:nth-child(odd) .function__text {
  left: 0;
  position: relative;
  padding-right: 21.538462%;
}

@media screen and (max-width: 1200px) {
  .function__item:nth-child(odd) .function__text {
    padding-right: 0;
  }
}

.function__item:nth-child(odd) .function__img {
  right: 0;
  position: absolute;
  top: 73px;
}

@media screen and (max-width: 1200px) {
  .function__item:nth-child(odd) .function__img {
    position: relative;
    top: 0;
    left: 0;
  }
}

.function__item:nth-child(odd) .function__img-phone {
  -webkit-filter: drop-shadow(0px 1.63037px 7.1555px rgba(0, 0, 0, 0.0279)) drop-shadow(0px 4.50776px 19.78405px rgba(0, 0, 0, 0.04)) drop-shadow(0px 10.85295px 47.63237px rgba(0, 0, 0, 0.0521)) drop-shadow(0px 36px 158px rgba(0, 0, 0, 0.08));
          filter: drop-shadow(0px 1.63037px 7.1555px rgba(0, 0, 0, 0.0279)) drop-shadow(0px 4.50776px 19.78405px rgba(0, 0, 0, 0.04)) drop-shadow(0px 10.85295px 47.63237px rgba(0, 0, 0, 0.0521)) drop-shadow(0px 36px 158px rgba(0, 0, 0, 0.08));
  width: 25.37%;
  right: 50px;
  position: absolute;
  top: 120px;
}

@media screen and (max-width: 1200px) {
  .function__item:nth-child(odd) .function__img-phone {
    width: 17%;
    top: 32.63%;
    right: 14.256%;
  }
}

.function__img {
  width: 57.264957%;
  z-index: 2;
}

@media screen and (max-width: 1200px) {
  .function__img {
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    position: relative;
  }
  .function__img::before {
    content: "";
    width: 100vw;
    height: 20vw;
    position: absolute;
    background: #f3f4f4;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}

.function__img-pc {
  display: block;
  -webkit-box-shadow: 0px 1.63037px 7.1555px 0px rgba(0, 0, 0, 0.0279), 0px 4.50776px 19.78405px 0px rgba(0, 0, 0, 0.04), 0px 10.85295px 47.63237px 0px rgba(0, 0, 0, 0.0521), 0px 36px 158px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 1.63037px 7.1555px 0px rgba(0, 0, 0, 0.0279), 0px 4.50776px 19.78405px 0px rgba(0, 0, 0, 0.04), 0px 10.85295px 47.63237px 0px rgba(0, 0, 0, 0.0521), 0px 36px 158px 0px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 1200px) {
  .function__img-pc {
    width: 75.733333%;
    margin: 0 auto;
  }
}

.function__text {
  width: 57.264957%;
  padding-top: 54px;
  background: #f6f7f7;
  border-radius: 16px;
  padding: 48px;
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 417px;
}

@media screen and (max-width: 1200px) {
  .function__text {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    background: none;
    min-height: auto;
    padding: 32px 0 0;
    background: #f3f4f4;
    border-radius: 0;
    width: 100vw;
  }
}

@media screen and (max-width: 1200px) {
  .function__text-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.function__text-title img {
  margin-bottom: 24px;
}

@media screen and (max-width: 1200px) {
  .function__text-title img {
    margin-right: 16px;
  }
}

.function__text-title h3 {
  font-size: 18px;
  line-height: 1.19333333;
  color: #0095FF;
  margin-bottom: 24px;
  font-weight: 600;
}

.function__text p {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
}

@media screen and (max-width: 1200px) {
  .function__text p {
    font-size: 12px;
    padding: 0 5vw 24px;
  }
}

.function__text p span {
  font-size: 10px;
  opacity: .7;
}

.function__text-link {
  margin-top: 32px;
}

@media screen and (max-width: 1200px) {
  .function__text-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 24px;
    margin-top: 0;
  }
}

.function__text-link a {
  border-radius: 32px;
  font-size: 14px;
  line-height: 1.19357143;
  padding: 15.5px 16px 15.5px 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.function__text-link a span {
  margin-right: 12px;
}

.function__text-link a.demo-link {
  background: #0095FF;
  color: #fff;
}

.function__text-code {
  display: block;
  margin-top: 76px;
  font-size: 12px;
  line-height: 1.19333333;
  position: relative;
}

@media screen and (max-width: 1200px) {
  .function__text-code {
    margin-top: 32px;
    width: 100vw;
    left: 0vw;
    background: #f3f4f4;
    padding-bottom: 24px;
  }
}

.function__text-code span {
  opacity: .5;
}

@media screen and (max-width: 1200px) {
  .function__text-code span {
    width: 90%;
    margin: 0 auto;
    display: block;
  }
}

.function__text-code img {
  position: absolute;
  width: 385px;
  height: 70px;
  top: 20px;
  left: -50%;
}

@media screen and (max-width: 1200px) {
  .function__text-code img {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 16px;
    top: 0;
    left: 0;
  }
}

.function__text:nth-child(even) {
  padding-left: 130px;
}

@media screen and (max-width: 1200px) {
  .function__text:nth-child(even) {
    padding-left: 0;
  }
}

.function__text:nth-child(odd) {
  padding-right: 130px;
}

@media screen and (max-width: 1200px) {
  .function__text:nth-child(odd) {
    padding-right: 0;
  }
}

.demo {
  background-color: #f6f7f7;
  width: 100%;
  padding: 96px 0;
}

.demo__title {
  margin-bottom: 96px;
}

.demo__teams {
  width: 1170px;
  max-width: 100%;
  margin: 0 auto 96px;
}

@media screen and (max-width: 1200px) {
  .demo__teams {
    width: 90%;
    margin: 0 auto 96px;
  }
}

.demo__teams h3 {
  font-size: 18px;
  line-height: 1.19333333;
  color: #0095FF;
  font-weight: 600;
}

.demo__teams-sales {
  margin-bottom: 50px;
}

.demo__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.demo__link a {
  border-radius: 32px;
  font-size: 14px;
  line-height: 1.19357143;
  padding: 15.5px 16px 15.5px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #0095FF;
  color: #fff;
}

.demo__link a span {
  margin-right: 12px;
}

.howto__title {
  margin-bottom: 74px;
}

.howto__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 768px) {
  .howto__list {
    display: none;
  }
}

.howto__item p {
  text-align: center;
  margin-top: 49.75px;
  font-size: 18px;
  line-height: 1.19333333;
  font-weight: 700;
  padding: 40px 0 10px;
}

.howto__item01 p {
  background: url("../img/howto__num-01.svg") no-repeat;
  background-position: center;
}

.howto__item02 p {
  background: url("../img/howto__num-02.svg") no-repeat;
  background-position: center;
}

.howto__item03 p {
  background: url("../img/howto__num-03.svg") no-repeat;
  background-position: center;
}

.howto__item04 p {
  background: url("../img/howto__num-04.svg") no-repeat;
  background-position: center;
}

.howto__arrow {
  padding: 25px;
}

.howto__slider {
  display: none;
}

@media screen and (max-width: 768px) {
  .howto__slider {
    display: block;
    width: 60.8%;
    margin: 0 auto;
  }
  .howto__slider .slick-list {
    padding: 0 !important;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .howto__slider .slick-counter {
    text-align: center;
    font-size: 14px;
    line-height: 1;
  }
  .howto__slider .slick-slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .howto__slider .slick-slider .prev-arrow {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    position: absolute;
    bottom: -18px;
    left: 30px;
  }
  .howto__slider .slick-slider .next-arrow {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    position: absolute;
    bottom: -18px;
    right: 30px;
  }
  .howto__slider .js-slider {
    padding-bottom: 48px;
  }
  .howto__slider .js-slider li img {
    margin-bottom: 24px;
  }
  .howto__slider .slider__step {
    font-size: 12px;
    color: #0095FF;
    font-weight: 700;
    line-height: 1.19333333;
    margin-bottom: 4px;
  }
  .howto__slider .slider__title {
    font-size: 16px;
    line-height: 1.19333333;
    font-weight: 700;
  }
}

.ability__title p {
  line-height: 2;
}

.ability__title p img {
  position: relative;
}

.start {
  width: 770px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px;
  background: #f5f7f7;
  border-radius: 16px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  .start {
    width: 87.2%;
    padding: 48px 16px;
  }
}

.start a {
  border-radius: 32px;
  font-size: 14px;
  line-height: 1.19357143;
  padding: 15.5px 16px 15.5px 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.start a span {
  margin-right: 12px;
}

.start__title {
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .start__title {
    font-size: 24px;
    line-height: 1.19166667;
    margin-bottom: 24px;
  }
}

.start p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 32px;
  font-weight: 400;
  opacity: .75;
  text-align: left;
}

.start hr {
  opacity: .5;
  width: 64px;
  margin: 64px auto;
}

@media screen and (max-width: 412px) {
  .start__link {
    width: 156px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .start__link a {
    font-size: 10px;
    padding: 10px 12px 10px 32px;
  }
}

@media screen and (max-width: 412px) {
  .start__link a {
    width: 100%;
  }
}

.start__beta {
  background-color: #0095FF;
  color: #fff;
  margin-right: 10px;
  margin-right: 32px;
}

@media screen and (max-width: 412px) {
  .start__beta {
    margin-bottom: 16px;
  }
}

.start__document {
  background-color: #fff;
  color: #0095FF;
  border: solid 1px #0095FF;
}

.start__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 768px) {
  .start__action {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.start__action a {
  border: solid 1px #0095FF;
  color: #0095FF;
}

.start__action-item {
  padding: 0 32px;
}

@media screen and (max-width: 768px) {
  .start__action-item {
    margin-top: 48px;
  }
}

.start__action-item > img {
  margin-bottom: 24px;
}

.footer {
  background: #2C2C2C;
  color: #fff;
  text-align: center;
  padding: 64px 9.375% 46px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

.footer__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 95px;
}

@media screen and (max-width: 768px) {
  .footer__main {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 64px;
  }
}

.footer__main-logo {
  width: 170px;
}

.footer__main-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.footer__main-sns.pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 768px) {
  .footer__main-sns.pc {
    display: none;
  }
}

.footer__main-sns.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .footer__main-sns.sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 32px;
  }
}

.footer__hataraku {
  text-decoration: none;
  transition: 0.3s;
  margin-bottom: 25px;
}

.footer__hataraku p {
  font-size: 10px;
  font-weight: 350;
  line-height: 14px;
  text-align: left;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .footer__hataraku img {
    width: 335px;
  }
}

.footer__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 37px;
}

@media screen and (max-width: 768px) {
  .footer__menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 48px;
  }
}

.footer__menu-item {
  margin: 0 12px;
}

@media screen and (max-width: 768px) {
  .footer__menu-item {
    margin: 16px 0;
  }
}

.footer__menu-item a {
  color: #fff;
  font-size: 15px;
  line-height: 1.66666667;
}

.footer small {
  font-size: 15px;
  line-height: 1.66666667;
}

@-webkit-keyframes pathmove {
  0% {
    height: 0;
    top: 80px;
    opacity: 0;
  }
  30% {
    height: 72px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 152px;
    opacity: 0;
  }
}

@keyframes pathmove {
  0% {
    height: 0;
    top: 80px;
    opacity: 0;
  }
  30% {
    height: 72px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 152px;
    opacity: 0;
  }
}

.second__title {
  text-align: center;
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  padding-top: 60px;
  padding-bottom: 44px;
}

@media screen and (max-width: 768px) {
  .second__title {
    font-size: 24px;
    padding-bottom: 24px;
    padding-top: 0;
  }
}

.second__title-info {
  margin-top: 32px;
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  text-align: left;
}

.pan {
  padding: 0 0 60px 135px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .pan {
    padding: 0 0 48px 6.4vw;
  }
}

.pan a {
  color: #0095FF;
}

.pan img {
  margin: 0 12px 0 4px;
}

.terms {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

@media screen and (max-width: 1080px) {
  .terms {
    max-width: 100%;
    padding: 0 9.375%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.terms__item {
  margin-top: 64px;
}

@media screen and (max-width: 768px) {
  .terms__item {
    margin-top: 108px;
  }
}

.terms__item-title {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 32px;
}

.terms__item-main {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .terms__item-main {
    font-size: 12px;
  }
}

.terms__date {
  padding: 108px 0 134px;
  font-size: 14px;
  line-height: 2;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .terms__date {
    font-size: 12px;
  }
}

.privacy {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 134px;
}

@media screen and (max-width: 1080px) {
  .privacy {
    max-width: 100%;
    padding: 0 9.375%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.privacy__item {
  margin-top: 64px;
}

@media screen and (max-width: 768px) {
  .privacy__item {
    margin-top: 108px;
  }
}

.privacy__item-title {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 32px;
}

.privacy__item-main {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .privacy__item-main {
    font-size: 12px;
  }
}

.privacy__date {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .privacy__date {
    font-size: 12px;
  }
}

.law {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 134px;
}

@media screen and (max-width: 1080px) {
  .law {
    max-width: 100%;
    padding: 0 9.375%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.law__table {
  margin-top: 64px;
}

@media screen and (max-width: 768px) {
  .law__table {
    display: block;
    width: 100%;
    margin-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .law__table tbody {
    display: block;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .law__table tr {
    display: block;
    width: 100%;
    border-bottom: 1px solid #f7f7f7;
  }
  .law__table tr:last-child {
    border: none;
  }
}

.law__table tr th, .law__table tr td {
  border-bottom: 1px solid #f7f7f7;
  padding: 16px 16px 16px 0;
  vertical-align: top;
  font-size: 16px;
  line-height: 2;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .law__table tr th, .law__table tr td {
    display: block;
    width: 100%;
    border: none;
  }
}

.law__table tr th {
  text-align: left;
  width: 28%;
}

@media screen and (max-width: 768px) {
  .law__table tr th {
    width: 100%;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .law__table tr td {
    padding-top: 8px;
  }
}

.company {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 134px;
}

@media screen and (max-width: 1080px) {
  .company {
    max-width: 100%;
    padding: 0 9.375%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.company__table {
  margin-top: 64px;
}

@media screen and (max-width: 768px) {
  .company__table {
    display: block;
    width: 100%;
    margin-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .company__table tbody {
    display: block;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .company__table tr {
    display: block;
    width: 100%;
    border-bottom: 1px solid #f7f7f7;
  }
  .company__table tr:last-child {
    border: none;
  }
}

.company__table tr th, .company__table tr td {
  border-bottom: 1px solid #f7f7f7;
  padding: 16px 16px 16px 0;
  vertical-align: top;
  font-size: 16px;
  line-height: 2;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .company__table tr th, .company__table tr td {
    display: block;
    width: 100%;
    border: none;
  }
}

.company__table tr th {
  text-align: left;
  width: 28%;
}

@media screen and (max-width: 768px) {
  .company__table tr th {
    width: 100%;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .company__table tr td {
    padding-top: 8px;
  }
}

.company__table tr td a {
  color: #0095FF;
  text-decoration: underline;
}

nav {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all .5s;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}

.open nav {
  left: 0;
  opacity: 1;
}

nav .inner {
  padding: 48px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

nav .inner img {
  width: 124px;
  margin-bottom: 72px;
}

nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 51.2%;
}

nav .inner ul li {
  position: relative;
  margin: 0 0 16px;
}

nav .inner ul li a {
  border-radius: 32px;
  font-size: 12px;
  line-height: 1.19333333;
  padding: 9px 33px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

nav .inner ul li a.login {
  border: solid 1px #0095FF;
  color: #0095FF;
}

nav .inner ul li a.new {
  background: #0095FF;
  color: #fff;
  margin-left: 0;
}

@media screen and (max-width: 768px) {
  nav {
    left: -100%;
    width: 100%;
  }
}

.toggle_btn {
  display: none;
}

@media screen and (max-width: 768px) {
  .toggle_btn {
    display: block;
    position: fixed;
    top: 30px;
    right: 6.4vw;
    width: 46px;
    height: 46px;
    -webkit-transition: all .5s;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
    background: #0095FF;
    border-radius: 30px;
    color: #fff;
  }
}

.toggle_btn span {
  display: block;
  position: absolute;
  left: 13px;
  width: 20px;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.toggle_btn span:nth-child(1) {
  top: 15px;
}

.toggle_btn span:nth-child(2) {
  top: 22px;
}

.toggle_btn span:nth-child(3) {
  bottom: 15px;
}

.open .toggle_btn span {
  background-color: #fff;
}

.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(-315deg);
  transform: translateY(7px) rotate(-315deg);
}

.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-7px) rotate(315deg);
  transform: translateY(-7px) rotate(315deg);
}

#mask {
  display: none;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

.handling {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 134px;
}

.page-handling * + * {
  margin-top: 10px;
}

.page-handling .block + .block {
  margin-top: 64px;
}

.page-handling p {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
}

.page-handling p.bold {
  font-weight: bold;
}

.page-handling p + p {
  margin-top: 10px;
}

.page-handling h3 {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 32px;
}

.page-handling ul li {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  padding-left: 1em;
  text-indent: -1em;
}

.page-handling ul + p {
  text-indent: 0;
}

.page-handling a {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  color: #202E42;
  text-decoration: underline;
}