@charset "UTF-8";

@-webkit-keyframes loading {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

@-moz-keyframes loading {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

@-ms-keyframes loading {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

html, body, header, nav, footer, section, article, h1, h2, h3, h4, h5, h6, div, form, textarea, input, label, ul, ol, li, dl, dt, dd, p, blockquote, canvas, video {
  margin: 0;
  padding: 0
}

html, body, header, nav, footer, section, article, h1, h2, h3, h4, h5, h6, div, form, textarea, input, label, ul, ol, li, dl, dt, dd, dt, p, blockquote, strong, span, a, img, i, svg, canvas, video, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: inherit;
  line-height: inherit;
  position: relative
}

.page-ja html, .page-ja body, .page-ja header, .page-ja nav, .page-ja footer, .page-ja section, .page-ja article, .page-ja h1, .page-ja h2, .page-ja h3, .page-ja h4, .page-ja h5, .page-ja h6, .page-ja div, .page-ja form, .page-ja textarea, .page-ja input, .page-ja label, .page-ja ul, .page-ja ol, .page-ja li, .page-ja dl, .page-ja dt, .page-ja dd, .page-ja dt, .page-ja p, .page-ja strong, .page-ja span, .page-ja a, .page-ja img, .page-ja i, .page-ja svg, .page-ja canvas, .page-ja video, .page-ja :before, .page-ja :after {
  word-break: break-all
}

h1, h2, h3, h4, h5, h6, table, th, td, input, textarea {
  font-size: inherit
}

ul, li {
  list-style-type: none
}

a, button {
  color: #fff;
  color: #fff;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  text-decoration: none;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: 0.3s all ease-out, 0s font-size linear;
  -moz-transition: 0.3s all ease-out, 0s font-size linear;
  -ms-transition: 0.3s all ease-out, 0s font-size linear;
  transition: 0.3s all ease-out, 0s font-size linear
}

a.is-hover, button.is-hover {
  color: #fff
}

a img, a svg, button img, button svg {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: 0.3s all ease-out;
  -moz-transition: 0.3s all ease-out;
  -ms-transition: 0.3s all ease-out;
  transition: 0.3s all ease-out
}

a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none
}

i {
  display: inline-block;
  font-size: inherit;
  font-style: normal;
  line-height: inherit
}

img, svg {
  vertical-align: top;
  width: 100%;
  height: auto
}

input {
  resize: none
}

textarea {
  resize: none;
  vertical-align: top
}

.blank:before {
  content: '\f2d2';
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  margin-right: 8px;
  opacity: 0.5
}

.bold {
  font-weight: 700 !important
}

.disabled {
  pointer-events: none
}

.font-basic {
  font-family: "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important
}

.is-hover {
  opacity: 0.5
}

.is-mobile {
  display: none !important
}

body.device-mobile .is-mobile {
  display: block !important
}

body.device-mobile .is-pc {
  display: none !important
}

.hide {
  display: none
}

.jq-hide {
  display: none !important
}

.normal {
  font-weight: 400 !important
}

.notice {
  font-size: 86%;
  letter-spacing: 0.05em;
  line-height: 1.5
}

.text-left {
  text-align: left !important
}

.text-center {
  text-align: center !important
}

.text-right {
  text-align: right !important
}

.ul {
  text-decoration: underline !important
}

.op0 {
  opacity: 0
}

.op10 {
  opacity: 10
}

.op20 {
  opacity: 20
}

.op30 {
  opacity: 30
}

.op40 {
  opacity: 40
}

.op50 {
  opacity: 50
}

.op60 {
  opacity: 60
}

.op70 {
  opacity: 70
}

.op80 {
  opacity: 80
}

.op90 {
  opacity: 90
}

.op100 {
  opacity: 100
}

.maxw160 {
  max-width: 160px !important
}

.maxw180 {
  max-width: 180px !important
}

.maxw200 {
  max-width: 200px !important
}

.maxw220 {
  max-width: 220px !important
}

.maxw240 {
  max-width: 240px !important
}

.maxw260 {
  max-width: 260px !important
}

.maxw280 {
  max-width: 280px !important
}

.maxw300 {
  max-width: 300px !important
}

.maxw320 {
  max-width: 320px !important
}

.maxw340 {
  max-width: 340px !important
}

.maxw360 {
  max-width: 360px !important
}

.maxw380 {
  max-width: 380px !important
}

.maxw400 {
  max-width: 400px !important
}

.maxw420 {
  max-width: 420px !important
}

.maxw440 {
  max-width: 440px !important
}

.maxw460 {
  max-width: 460px !important
}

.maxw480 {
  max-width: 480px !important
}

.m0 {
  margin: 0px !important
}

.mt0 {
  margin-top: 0px !important
}

.mr0 {
  margin-right: 0px !important
}

.mb0 {
  margin-bottom: 0px !important
}

.ml0 {
  margin-left: 0px !important
}

.p0 {
  padding: 0px !important
}

.pt0 {
  padding-top: 0px !important
}

.pr0 {
  padding-right: 0px !important
}

.pb0 {
  padding-bottom: 0px !important
}

.pl0 {
  padding-left: 0px !important
}

.m5 {
  margin: 5px !important
}

.mt5 {
  margin-top: 5px !important
}

.mr5 {
  margin-right: 5px !important
}

.mb5 {
  margin-bottom: 5px !important
}

.ml5 {
  margin-left: 5px !important
}

.p5 {
  padding: 5px !important
}

.pt5 {
  padding-top: 5px !important
}

.pr5 {
  padding-right: 5px !important
}

.pb5 {
  padding-bottom: 5px !important
}

.pl5 {
  padding-left: 5px !important
}

.m10 {
  margin: 10px !important
}

.mt10 {
  margin-top: 10px !important
}

.mr10 {
  margin-right: 10px !important
}

.mb10 {
  margin-bottom: 10px !important
}

.ml10 {
  margin-left: 10px !important
}

.p10 {
  padding: 10px !important
}

.pt10 {
  padding-top: 10px !important
}

.pr10 {
  padding-right: 10px !important
}

.pb10 {
  padding-bottom: 10px !important
}

.pl10 {
  padding-left: 10px !important
}

.m15 {
  margin: 15px !important
}

.mt15 {
  margin-top: 15px !important
}

.mr15 {
  margin-right: 15px !important
}

.mb15 {
  margin-bottom: 15px !important
}

.ml15 {
  margin-left: 15px !important
}

.p15 {
  padding: 15px !important
}

.pt15 {
  padding-top: 15px !important
}

.pr15 {
  padding-right: 15px !important
}

.pb15 {
  padding-bottom: 15px !important
}

.pl15 {
  padding-left: 15px !important
}

.m20 {
  margin: 20px !important
}

.mt20 {
  margin-top: 20px !important
}

.mr20 {
  margin-right: 20px !important
}

.mb20 {
  margin-bottom: 20px !important
}

.ml20 {
  margin-left: 20px !important
}

.p20 {
  padding: 20px !important
}

.pt20 {
  padding-top: 20px !important
}

.pr20 {
  padding-right: 20px !important
}

.pb20 {
  padding-bottom: 20px !important
}

.pl20 {
  padding-left: 20px !important
}

.m25 {
  margin: 25px !important
}

.mt25 {
  margin-top: 25px !important
}

.mr25 {
  margin-right: 25px !important
}

.mb25 {
  margin-bottom: 25px !important
}

.ml25 {
  margin-left: 25px !important
}

.p25 {
  padding: 25px !important
}

.pt25 {
  padding-top: 25px !important
}

.pr25 {
  padding-right: 25px !important
}

.pb25 {
  padding-bottom: 25px !important
}

.pl25 {
  padding-left: 25px !important
}

.m30 {
  margin: 30px !important
}

.mt30 {
  margin-top: 30px !important
}

.mr30 {
  margin-right: 30px !important
}

.mb30 {
  margin-bottom: 30px !important
}

.ml30 {
  margin-left: 30px !important
}

.p30 {
  padding: 30px !important
}

.pt30 {
  padding-top: 30px !important
}

.pr30 {
  padding-right: 30px !important
}

.pb30 {
  padding-bottom: 30px !important
}

.pl30 {
  padding-left: 30px !important
}

.m35 {
  margin: 35px !important
}

.mt35 {
  margin-top: 35px !important
}

.mr35 {
  margin-right: 35px !important
}

.mb35 {
  margin-bottom: 35px !important
}

.ml35 {
  margin-left: 35px !important
}

.p35 {
  padding: 35px !important
}

.pt35 {
  padding-top: 35px !important
}

.pr35 {
  padding-right: 35px !important
}

.pb35 {
  padding-bottom: 35px !important
}

.pl35 {
  padding-left: 35px !important
}

.m40 {
  margin: 40px !important
}

.mt40 {
  margin-top: 40px !important
}

.mr40 {
  margin-right: 40px !important
}

.mb40 {
  margin-bottom: 40px !important
}

.ml40 {
  margin-left: 40px !important
}

.p40 {
  padding: 40px !important
}

.pt40 {
  padding-top: 40px !important
}

.pr40 {
  padding-right: 40px !important
}

.pb40 {
  padding-bottom: 40px !important
}

.pl40 {
  padding-left: 40px !important
}

.m45 {
  margin: 45px !important
}

.mt45 {
  margin-top: 45px !important
}

.mr45 {
  margin-right: 45px !important
}

.mb45 {
  margin-bottom: 45px !important
}

.ml45 {
  margin-left: 45px !important
}

.p45 {
  padding: 45px !important
}

.pt45 {
  padding-top: 45px !important
}

.pr45 {
  padding-right: 45px !important
}

.pb45 {
  padding-bottom: 45px !important
}

.pl45 {
  padding-left: 45px !important
}

.m50 {
  margin: 50px !important
}

.mt50 {
  margin-top: 50px !important
}

.mr50 {
  margin-right: 50px !important
}

.mb50 {
  margin-bottom: 50px !important
}

.ml50 {
  margin-left: 50px !important
}

.p50 {
  padding: 50px !important
}

.pt50 {
  padding-top: 50px !important
}

.pr50 {
  padding-right: 50px !important
}

.pb50 {
  padding-bottom: 50px !important
}

.pl50 {
  padding-left: 50px !important
}

.block-lg, .inline-lg {
  display: none !important
}

@media (max-width: 1199px) {
  .hide-lg {
    display: none !important
  }

  .block-lg {
    display: block !important
  }

  .inline-lg {
    display: inline !important
  }
}

.block-md, .inline-md {
  display: none !important
}

@media (max-width: 991px) {
  .hide-md {
    display: none !important
  }

  .block-md {
    display: block !important
  }

  .inline-md {
    display: inline !important
  }
}

.block-m, .inline-m {
  display: none !important
}

@media (max-width: 900px) {
  .hide-m {
    display: none !important
  }

  .block-m {
    display: block !important
  }

  .inline-m {
    display: inline !important
  }
}

.block-sm, .inline-sm {
  display: none !important
}

@media (max-width: 767px) {
  .hide-sm {
    display: none !important
  }

  .block-sm {
    display: block !important
  }

  .inline-sm {
    display: inline !important
  }
}

.block-s, .inline-s {
  display: none !important
}

@media (max-width: 640px) {
  .hide-s {
    display: none !important
  }

  .block-s {
    display: block !important
  }

  .inline-s {
    display: inline !important
  }
}

.block-xs, .inline-xs {
  display: none !important
}

@media (max-width: 480px) {
  .hide-xs {
    display: none !important
  }

  .block-xs {
    display: block !important
  }

  .inline-xs {
    display: inline !important
  }
}

.block-xxs, .inline-xxs {
  display: none !important
}

@media (max-width: 400px) {
  .hide-xxs {
    display: none !important
  }

  .block-xxs {
    display: block !important
  }

  .inline-xxs {
    display: inline !important
  }
}

.block-xxxs, .inline-xxxs {
  display: none !important
}

@media (max-width: 360px) {
  .hide-xxxs {
    display: none !important
  }

  .block-xxxs {
    display: block !important
  }

  .inline-xxxs {
    display: inline !important
  }
}

.browser {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)
}

.browser.is-gray {
  background: #d3d5d6
}

.browser.is-orange {
  background: #fff3e0
}

.browser:before {
  background: url(/assets/images/common/browser-img01.svg) no-repeat center;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  background-size: 100% 100%;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  content: '';
  display: block;
  padding-top: 5%;
  width: 100%;
  height: 0;
  z-index: 2
}

.browser-body {
  padding-top: 60%;
  width: 100%;
  height: 0
}

.browser-body img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

.btn {
  background: #4caf50;
  color: #fff;
  color: #fff;
  display: inline-block;
  font-family: "M PLUS Rounded 1c";
  letter-spacing: 0.3em;
  text-align: center
}

.btn.is-hover {
  color: #fff
}

.btn.is-xl {
  border-radius: 50px;
  box-shadow: 0 6px 0 #3d8c40;
  font-size: 229%;
  font-weight: 700;
  line-height: 40px;
  padding-top: 30px;
  padding-bottom: 30px
}

.site-footer {
  background: #92989b;
  color: #fff;
  font-size: 79%;
  padding: 10px;
  text-align: center
}

.site-footer:after {
  content: '';
  clear: both;
  display: block
}

.site-footer .copyright {
  float: left
}

.site-footer .link {
  float: right
}

.site-footer .copyright, .site-footer a {
  display: inline-block
}

.site-footer .link a {
  color: #fff;
  color: #fff;
  margin-left: 20px
}

.site-footer .link a.is-hover {
  color: #fff
}

@media (max-width: 640px) {
  .site-footer .copyright, .site-footer .link {
    float: none
  }

  .site-footer .link a {
    margin-right: 10px;
    margin-left: 10px
  }
}

html {
  width: 100%;
  height: 100%
}

body {
  background: #ffc107 url(/assets/images/common/bg01.png) center 0;
  -webkit-background-size: 480px 480px;
  -moz-background-size: 480px 480px;
  -ms-background-size: 480px 480px;
  background-size: 480px 480px;
  color: #fff;
  font-family: "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 2;
  width: 100%;
  word-break: break-word;
  height: 100%
}

body.page-en {
  letter-spacing: 0.025em
}

input, textarea {
  font-family: "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500
}

input:placeholder-shown, textarea:placeholder-shown {
  color: #92989b
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #92989b
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #92989b;
  opacity: 1
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #92989b;
  opacity: 1
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #92989b
}

.wrapper {
  margin-bottom: -40px;
  padding-top: 110px;
  padding-bottom: 160px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  z-index: 2
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  max-width: 1040px
}

.container.is-s {
  max-width: 840px
}

.container.is-auto {
  max-width: none
}

.section {
  padding-top: 120px;
  padding-bottom: 120px
}

.section-title {
  font-size: 429%;
  font-weight: 700;
  line-height: 0;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  max-width: 800px
}

.section-title span {
  display: block;
  font-size: 71%
}

.section-title span.small {
  font-size: 50%
}

.section-title img {
  display: block
}

.section-title.is-text {
  line-height: 1.5
}

.section-title.is-m {
  font-size: 343%
}

.section-title.is-s {
  font-size: 229%
}

.section-title+.section-subtitle {
  margin-top: 30px
}

.section-subtitle {
  font-family: "M PLUS Rounded 1c";
  font-size: 300%;
  font-weight: 700;
  line-height: 1.5;
  text-align: center
}

.section-caption {
  font-size: 115%;
  margin-top: 20px;
  text-align: center
}

.section-gray {
  background: #92989b url(/assets/images/common/bg03.png) center 0;
  -webkit-background-size: 480px 480px;
  -moz-background-size: 480px 480px;
  -ms-background-size: 480px 480px;
  background-size: 480px 480px
}

.section-white {
  background: #fff url(/assets/images/common/bg02.png) center 0;
  -webkit-background-size: 480px 480px;
  -moz-background-size: 480px 480px;
  -ms-background-size: 480px 480px;
  background-size: 480px 480px;
  color: #000
}

@media (max-width: 991px) {
  .section-subtitle {
    font-size: 200%
  }
}

@media (max-width: 767px) {
  .section {
    padding-top: 80px;
    padding-bottom: 80px
  }

  .section-subtitle {
    font-size: 172%
  }
}

@media (max-width: 480px) {
  .section {
    padding-top: 60px;
    padding-bottom: 60px
  }

  .section-caption {
    font-size: 100%;
    line-height: 1.75
  }
}

@media (max-width: 360px) {
  .section-subtitle {
    margin-right: -20px;
    margin-left: -20px;
    font-size: 150%
  }
}

.section-case ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "M PLUS Rounded 1c";
  font-size: 129%;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 40px;
  text-align: center
}

.section-case li {
  padding-right: 40px;
  padding-left: 40px;
  text-align: center;
  width: 33.33333333%
}

.section-case li p {
  border-radius: 10px;
  color: #fff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%
}

.section-case li p:after {
  border: 10px solid transparent;
  content: '';
  display: block;
  margin-left: -10px;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0
}

.section-case li p span {
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%
}

.section-case li p.is-orange {
  background: #ffc107
}

.section-case li p.is-orange:after {
  border-top-color: #ffc107
}

.section-case li p.is-gray {
  background: #92989b
}

.section-case li p.is-gray:after {
  border-top-color: #92989b
}

.section-case li p.is-green {
  background: #4caf50
}

.section-case li p.is-green:after {
  border-top-color: #4caf50
}

.section-case li img {
  margin-top: 40px;
  max-width: 300px
}

.section-case .case {
  margin-right: auto;
  margin-left: auto;
  max-width: 280px
}

@media (max-width: 991px) {
  .section-case ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 0
  }

  .section-case li {
    padding-top: 40px;
    width: 50%
  }

  .section-case .case {
    max-width: none
  }
}

@media (max-width: 767px) {
  .section-case li {
    padding-right: 30px;
    padding-left: 30px
  }

  .section-case li img {
    margin-top: 40px;
    max-width: 240px
  }
}

@media (max-width: 640px) {
  .section-case li {
    padding-right: 0;
    padding-left: 0;
    width: 100%
  }

  .section-case li+li {
    padding-top: 60px
  }
}

.section-company dl {
  border-top: 1px solid #92989b;
  border-bottom: 1px solid #92989b;
  display: table;
  font-size: 93%;
  margin-top: 20px;
  width: 100%
}

.section-company dl+dl {
  border-top: none;
  margin-top: 0
}

.section-company dt, .section-company dd {
  display: table-cell
}

.section-company dt {
  font-weight: 700;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  width: 100px
}

.section-company dd {
  padding: 20px
}

@media (max-width: 640px) {
  .section-company dl, .section-company dt, .section-company dd {
    display: block;
    width: auto
  }

  .section-company dt {
    padding-bottom: 0
  }

  .section-company dd {
    padding-top: 0
  }
}

.section-feature {
  overflow: hidden;
  padding-top: 160px
}

.section-feature:before {
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  content: '';
  display: block;
  margin-left: -160px;
  opacity: 0.25;
  position: absolute;
  top: 0px;
  left: 50%;
  width: 320px;
  height: 320px
}

.section-feature .browser {
  margin-top: 30px
}

.section-feature .detail {
  font-size: 129%;
  font-weight: 700;
  margin-top: 3em;
  text-align: center
}

.section-feature.is-1:before {
  background-image: url(/assets/images/top/1.svg);
  top: 210px
}

.section-feature.is-2:before {
  background-image: url(/assets/images/top/2.svg)
}

.section-feature.is-3:before {
  background-image: url(/assets/images/top/3.svg)
}

.section-feature.is-4:before {
  background-image: url(/assets/images/top/4.svg)
}

.section-feature.is-5:before {
  background-image: url(/assets/images/top/5.svg)
}

.section-feature.is-6:before {
  background-image: url(/assets/images/top/6.svg)
}

.section-feature.is-1 .section-title {
  margin-top: -40px;
}

.section-feature.is-1 .section-title+.section-subtitle {
  margin-top: 120px;
}

.section-feature.is-3 {
  padding-top: 120px
}

.section-feature.is-4 {
  padding-top: 200px
}

.feature-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2em;
}

.feature-list li {
  width: 28%;
}

.feature-list-block:after {
  background: url(/assets/images/top/feature-list-bg01.svg) no-repeat center;
  background-size: contain;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 28.57142857%;
  height: 100%;
}

.feature-list-body {
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
  margin-top: 1em;
}

.feature-list-image {
  position: absolute;
  bottom: -5.55555556%;
  left: 0;
}

@media (max-width: 767px) {
  .section-feature .detail {
    font-size: 115%;
    text-align: left
  }

  .feature-list {
    margin-right: auto;
    margin-left: auto;
    max-width: 280px;
  }

  .feature-list li {
    padding-bottom: 100px;
    width: 100%;
  }

  .feature-list li:last-child {
    padding-bottom: 0;
  }

  .feature-list-block:after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px) rotate(90deg);
    width: 60px;
    height: 60px;
  }

}

.section-main {
  overflow: hidden;
  padding-top: 120px !important
}

.section-main .text {
  padding-bottom: 6px;
  width: 50%
}

.section-main .text:before {
  background: url(/assets/images/top/main-img03-02.svg) no-repeat 0 center;
  background-size: contain;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%
}

.section-main .text i {
  background: url(/assets/images/top/main-img03-02-sm.svg) no-repeat 0 center;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -ms-background-size: auto 100%;
  background-size: auto 100%;
  margin-top: 30px;
  padding-top: 53.1250%;
  width: 100%;
  height: 0
}

.section-main .text .trial {
  margin-top: 34px
}

.section-main .text .btn {
  display: block;
  margin-top: -40px
}

.section-main .movie {
  margin-top: 40px;
  padding-top: 56.25%;
  width: 100%;
  height: 0
}

.section-main .movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.section-main .detail {
  background: rgba(255, 152, 0, 0.5);
  border-radius: 10px;
  font-family: "M PLUS Rounded 1c";
  font-size: 150%;
  font-weight: 700;
  margin-top: 40px;
  padding: 30px 40px
}

.section-main .login {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 0 #92989b;
  color: #ff9800;
  color: #ff9800;
  display: block;
  font-size: 86%;
  line-height: 1.5;
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 8px 10px
}

.section-main .login.is-hover {
  color: #ff9800
}

@media (max-width: 991px) {
  .section-main .detail {
    font-size: 129%;
    padding: 20px 30px
  }
}

@media (max-width: 767px) {
  .section-main .text {
    padding-bottom: 0;
    width: 100%
  }

  .section-main .text:before {
    display: none
  }

  .section-main .text .title, .section-main .text .trial, .section-main .text .btn {
    margin-right: auto;
    margin-left: auto;
    max-width: 500px
  }

  .section-main .detail {
    font-size: 115%;
    padding: 15px 20px
  }
}

@media (max-width: 480px) {
  .section-main .detail {
    font-size: 108%
  }
}

.section-outline .store {
  color: #ff9800;
  font-family: "M PLUS Rounded 1c";
  font-size: 172%;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center
}

.section-outline .store .icon {
  border-radius: 5px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  width: 48px;
  height: 48px
}

.section-outline .store .icon:after {
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: 60% 60%;
  -moz-background-size: 60% 60%;
  -ms-background-size: 60% 60%;
  background-size: 60% 60%;
  content: '';
  display: block;
  width: 100%;
  height: 100%
}

.section-outline .store .icon.is-app {
  background-color: #1ac2fb;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF1AC2FB', endColorstr='#FF1D76F2');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhYzJmYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFkNzZmMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ac2fb), color-stop(100%, #1d76f2));
  background-image: -moz-linear-gradient(top, #1ac2fb 0%, #1d76f2 100%);
  background-image: -webkit-linear-gradient(top, #1ac2fb 0%, #1d76f2 100%);
  background-image: linear-gradient(to bottom, #1ac2fb 0%, #1d76f2 100%)
}

.section-outline .store .icon.is-app:after {
  background-image: url(/assets/images/common/icon-app-store.svg)
}

.section-outline .store .icon.is-play {
  background: #fff;
  border: 1px solid #e0e0e0
}

.section-outline .store .icon.is-play:after {
  background-image: url(/assets/images/common/icon-play-store.svg)
}

.section-outline .section-title {
  max-width: none;
}

.section-outline ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "M PLUS Rounded 1c";
  font-size: 172%;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 60px;
  text-align: center
}

.section-outline li {
  padding-right: 20px;
  width: 50%
}

.section-outline li+li {
  padding-right: 0;
  padding-left: 20px
}

.section-outline .detail {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.section-outline .detail span {
  display: block;
  width: 100%
}

.section-outline .browser {
  margin-top: 20px
}

.outline {
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)
}

.outline-detail {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #ff9800;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1em;
  padding-bottom: 1em;
}

.outline-detail span {
  display: block;
  width: 100%
}

.outline-image {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.outline-lead {
  font-size: 172%;
  font-weight: 700;
  margin-top: 2em;
  text-align: center;
}

@media (max-width: 767px) {
  .section-outline .store {
    font-size: 150%;
    margin-bottom: 20px
  }

  .section-outline ul {
    font-size: 150%;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }

  .section-outline li {
    padding-right: 0;
    padding-left: 0 !important;
    width: 100%
  }

  .section-outline li+li {
    padding-top: 60px
  }

  .section-outline .detail {
    height: auto !important
  }

  .outline-lead {
    font-size: 150%;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .section-outline .store {
    font-size: 129%;
    margin-bottom: 10px
  }

  .section-outline .store .icon {
    width: 30px;
    height: 30px
  }

  .section-outline ul {
    font-size: 129%;
    margin-top: 40px
  }

  .section-outline .browser {
    margin-top: 15px
  }
}

@media (max-width: 400px) {
  .section-outline .store .icon {
    width: 30px;
    height: 30px
  }
}

.section-plan .plan {
  border: 4px solid #fff;
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px
}

.section-plan .trial {
  padding-top: 40px;
  margin-right: auto;
  margin-left: auto;
  max-width: 720px
}

.section-plan .btn {
  display: block;
  margin-right: auto;
  margin-left: auto;
  max-width: 500px
}

.section-plan .btn+p {
  margin-top: 40px;
  text-align: center
}

@media (max-width: 480px) {
  .section-plan .plan {
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 20px
  }
}

@media (max-width: 400px) {
  .section-plan .plan {
    margin-top: 20px
  }
}

.section-simple .browser {
  margin-top: 20px
}

.section-simple .detail {
  font-size: 129%;
  font-weight: 700;
  margin-top: 20px;
  text-align: center
}

@media (max-width: 767px) {
  .section-simple .detail {
    font-size: 115%;
    text-align: left
  }
}