/* Reset */
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, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}
/* Basic settings */
br {letter-spacing:0;} ul, li {list-style:disc;} img, a img {border:0; text-decoration:none; vertical-align:top;} mark {background:#ff0; color:#000;} b, strong {font-weight:bold;} table {border-collapse:collapse; border-spacing:0;} td, th {padding:0;} hr {box-sizing:content-box; height:0;} button, input, optgroup, select, textarea {color:inherit; font:sans-serif; margin:0;} button {overflow: visible;}
button, select {text-transform:none;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance:button; cursor:pointer;} input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0;} textarea {overflow:auto;}

/* Base */
html {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body {
color:#222;
font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
line-height:1.0;
}

a {
background-color:transparent;
outline:0;
text-decoration:none;
}
a:link    {color:#3366cc;}
a:visited {color:#3366cc;}
a:hover   {color:#1a428c;}
a:active  {color:#99ccff;}

/* -------------------------------------------------------
Layout
---------------------------------------------------------- */
html,
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-weight: normal;
}
p {
  line-height: 1.8;
}

.footer {
  margin-top: auto;
  padding: 1.5em 0;
  background-color: #323339;
  color: #fff;
  font-size: 80%;
  text-align: center;
}
.footer_info,
.footer_home {
  margin-top: 1.5em;
}
.footer_info a {
  color: #fff;
  letter-spacing: .1em;
}
.footer_home a {
  color: #fff;
}



#demo_btn {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 2;
  opacity: 0;
  transform: translateX(250px);
}
#demo_btn a {
  display: flex;
  justify-content:center;
  align-items:center;
  box-sizing: border-box;
  background: #2ca9e1;
  border: 2px solid #fff;
  border-radius: 30px;
  width: 200px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  line-height: 60px;
  transition:all 0.3s;
}
#demo_btn a:hover {
  background-color: #fff;
  border-color: #f4810e;
  color: #f4810e;
}
#demo_btn.LeftMove{
  animation: LeftMove 0.5s forwards;
}
@keyframes LeftMove{
  from {
    opacity: 0;
    transform: translateX(250px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#demo_btn.RightMove{
  animation: RightMove 0.5s forwards;
}
@keyframes RightMove{
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(250px);
  }
}

.page_top_wrap {
  width: 100%;
  box-sizing: border-box;
}
.page_top_wrap a {
  position: relative;
  display: block;
  height: 60px;
  background-color: #f4810e;
  color: #fff;
  line-height: 60px;
  text-align: center;
  transition: all .3s;
}
.page_top_wrap a:hover {
  background-color: #fec200;
}
.pagetop_arr {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  font-size: 16px;
}
.pagetop_arr::before,
.pagetop_arr::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.sa::before{
  top: 8px;
  left: -12px;
  width: 24px;
  height: 24px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.gotodemo {
  margin-bottom: 80px;
  text-align: center;
}
.gotodemo a {
  display: inline-block;
  padding: 0 3em;
  background-color: #2ca9e1;
  border-radius: 32px;
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 64px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

/* -------------------------------------------------------
for SmartPhone only
---------------------------------------------------------- */
@media screen and (max-width:599px){
  .pcv, .tabpc, .tab {display: none;}

  #demo_btn {
    right: 16px;
    bottom: 16px;
  }
  #demo_btn a {
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
  }

  /* header */
  .header {
    position: fixed;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 100;
  }
  .header_inner {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title_wrap {
    padding-left: 16px;
  }
  .title_wrap .mark img {
    width: auto;
    height: 40px;
  }
  .title_wrap a .mark {
    display: block;
    margin-bottom: 2px;
    color: #111;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
  }
  .title_wrap a .logo {
    display: inline-block;
  }
  .title_wrap a .logo img {
    width: auto;
    height: 24px;
    vertical-align: middle;
  }
  .title_wrap .sp_tm {
    font-size: 10px;
  }

  .nav_wrap ul {
    letter-spacing: -0.4em;
  }
  .nav_wrap ul li {
    letter-spacing: normal;
    display: inline-block;
  }
  .nav_wrap .demo_link a,
  .nav_wrap .cta_link a {
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    text-align: center;
  }
  .nav_wrap .demo_link a {
    background-color: #f4810e;
    color: #fff;
  }
  .nav_wrap .cta_link a {
    background-color: #fff;
    color: #666;
  }
  .nav_wrap .demo_link a:hover {
    background-color: #0068b7;
  }
  .nav_wrap .cta_link a:hover {
    border-color: #f4810e;
    color: #f4810e;
  }
  .nav_wrap .demo_link img,
  .nav_wrap .cta_link img {
    width: 100%;
    height: 100%;
  }

  /* fv */
  .fv_wrap {
    height: 100vh;
    /*background-color: #feeede;*/
    background: url(images/fv_bg1.jpg) no-repeat center bottom;
    background-size: cover;
  }
  .fv .catch_block {
    margin-bottom: 24px;
    padding-top: 80px;
    padding-left: 24px;
  }
  .fv .catch img {
    width: 100%;
    height: auto;
  }
  .fv .mockup_block {
    text-align: center;
  }
  .fv .mockup_block img {
    width: 100%;
    max-width: 240px;
    height: auto;
  }
  .fv .fv_btn {
    margin-top: 16px;
    text-align: center;
  }
  .fv .fv_btn a {
    display: inline-block;
    padding: 0 3em;
    background-color: #2ca9e1;
    border-radius: 32px;
    color: #fff;
    font-size: 130%;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }

  /* content */
  .feature_intro_wrap {
    padding: 40px 0;
    background-color: #fff9e2;
    /*background: linear-gradient(135deg, #fff9e2, #fbd8b5);*/
  }
  .feature_wrap {
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .howtouse_wrap {
    padding-top: 56px;
    padding-bottom: 56px;
    background-color: #fff9e2;
    /*background: linear-gradient(135deg, #ffedab, #fff9e2);*/
  }
  .demo_cta_wrap {
    padding-top: 56px;
    padding-bottom: 56px;
    background-color: #f4810e;
  }
  .demo_howto_wrap {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .cta_wrap {
    padding-top: 56px;
    padding-bottom: 56px;
    /*background-color: #f39800;*/
    background: linear-gradient(135deg, #f4810e, #ffdc00);
  }
  .inner_link_wrap {
    margin-top: -60px;
    padding-top: 60px;
  }

  .feature_intro {
    padding: 0 16px;
  }
  .feature_intro h2 {
    font-size: 160%;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .1em;
    text-align: center;
  }
  .feature_intro ul {
    margin-top: 24px;
  }
  .feature_intro ul li {
    color: #ee7800;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.8;
  }
  .intro_txt {
    font-size: 110%;
  }

  .feature_wrap section {
    padding: 0 16px;
  }
  .feature_wrap section + section {
    margin-top: 40px;
  }
  .feature_txt h3 {
    margin-bottom: .5em;
    padding: .5em 1em;
    background: linear-gradient(90deg, #fec200, #ee7800);
    color: #000;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.4;
  }
  .feature_img {
    margin-top: 16px;
  }
  .feature_img img {
    width: 100%;
    max-width: 360px;
    height: auto;
  }

  .howtouse_block {
    padding: 0 16px;
  }
  .howtouse_title {
    margin-bottom: 40px;
    text-align: center;
  }
  .howtouse_title h2 {
    color: #111;
    font-size: 160%;
    font-weight: bold;
  }

  .howtouse_box {
    box-sizing: border-box;
    padding-bottom: 24px;
    background-color: #fff;
  }
  .howtouse_arr {
    position: relative;
    width: 100%;
    height: 64px;
    text-align: center;
  }
  .arr_box {
    position: absolute;
    top: 16px;
    width: 100%;
  }
  .arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
  }
  .arrow::before,
  .arrow::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
  }
  .simple::before{
    top: 0;
    left: -16px;
    width: 32px;
    height: 32px;
    border-top: 1px solid #ee7800;
    border-right: 1px solid #ee7800;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  .howtouse_box h3 {
    padding: 16px;
    background-color: #fec200;
    color: #000;
    font-size: 120%;
    font-weight: bold;
  }
  .howtouse_img {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
    text-align: center;
  }
  .howtouse_img img {
    width: 100%;
    height: auto;
  }
  .howtouse_box p {
    padding: 0 16px;
  }

  .multiple_quotes {
    margin-top: 56px;
  }
  .multiple_q_wrap {
    margin-top: 24px;
    padding: 0 16px;
  }
  .multiple_quotes_title {
    text-align: center;
  }
  .multiple_quotes_title h3 {
    font-size: 140%;
    font-weight: bold;
  }
  .multiple_q_img {
    margin-top: 24px;
    padding: 16px 0;
    /*background-color: #fff;*/
  }
  .multiple_q_img img {
    width: 100%;
    height: auto;
  }

  .demo_title {
    margin-bottom: 32px;
    text-align: center;
  }
  .demo_title h2 {
    color: #000;
    font-size: 160%;
    font-weight: bold;
  }
  .demo_cta_body {
    padding: 0 16px;
  }
  .demo_cta_body p {
    font-size: 100%;
  }
  .demo_cta_btn {
    margin-top: 40px;
    text-align: center;
  }
  .demo_cta_btn a {
    display: inline-block;
    padding: 0 40px;
    background-color: #0068b7;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    line-height: 64px;
    text-align: center;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }
  .demo_cta_btn a:hover {
    background-color: #fff;
    color: #ee7800;
  }

  .demo_howto_wrap section + section {
    margin-top: 80px;
  }

  .demo_howto_block .demo_howto_txt {
    padding: 0 16px;
    font-size: 100%;
  }
  .demo_howto_txt h3 {
    margin-bottom: 16px;
    font-size: 130%;
  }
  .demo_howto_block .demo_howto_img {
    margin-bottom: 16px;
    padding: 0 16px;
  }
  .demo_howto_img img {
    width: 100%;
    height: auto;
  }

  .cat_title {
    margin-bottom: 40px;
    text-align: center;
  }
  .cat_title h2 {
    color: #000;
    font-size: 160%;
    font-weight: bold;
  }
  .cta_block {
    padding: 0 16px;
  }
  .cta_block + .cta_block {
    margin-top: 40px;
  }
  .release_btn {
    margin-top: 32px;
    text-align: center;
  }
  .release_btn a {
    display: block;
    background-color: #ee7800;
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    line-height: 80px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }

  .contact_btn {
    margin-top: 24px;
    text-align: center;
  }
  .contact_btn a {
    display: block;
    background-color: #ee7800;
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }


  /* footer */
  .footer_info p + p {
    margin-top: 1em;
  }

}/* end smartphone only */



/* -------------------------------------------------------
for TAB & PC
---------------------------------------------------------- */
@media screen and (min-width:600px){
  .sspv {display: none;}

  /* display */
  .dsp_flx {
    display: flex;
  }
  .jc_c {
    justify-content: center;
  }
  .jc_sb {
    justify-content: space-between;
  }
  .fd_r {
    flex-direction: row;
  }
  .fd_rr {
    flex-direction: row-reverse;
  }

  /* header */
  .header {
    position: fixed;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 100;
  }
  .header_inner {
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header_inner .title_wrap {
    /*width: 30%;*/
    box-sizing: border-box;
    padding-left: 32px;
  }
  .title_wrap .mark img {
    width: auto;
    height: 40px;
  }
  .title_wrap a .mark {
    display: inline-block;
    margin-right: 16px;
    color: #111;
    font-weight: bold;
    vertical-align: middle;
  }
  .title_wrap a .logo {
    display: inline-block;
  }
  .title_wrap a .logo img {
    width: auto;
    height: 36px;
    vertical-align: middle;
  }

  .nav_wrap ul {
    letter-spacing: -0.4em;
    padding-right: 16px;
  }
  .nav_wrap ul li {
    letter-spacing: normal;
    display: inline-block;
  }
  .nav_wrap ul li + li {
    margin-left: 16px;
  }
  .nav_wrap .demo_link a,
  .nav_wrap .cta_link a {
    display: inline-block;
    box-sizing: border-box;
  }
  .nav_wrap .demo_link a {
    padding: 0 1em;
    background-color: #2ca9e1;
    border: 2px solid #2ca9e1;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    transition: all .3s;
  }
  .nav_wrap .cta_link a {
    padding: 0 1em;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 4px;
    color: #666;
    font-size: 14px;
    line-height: 36px;
    transition: all .3s;
  }
  .nav_wrap .demo_link a:hover {
    background-color: #fff;
    border-color: #f4810e;
    color: #f4810e;
  }
  .nav_wrap .cta_link a:hover {
    border-color: #f4810e;
    color: #f4810e;
  }

  /* fv */

  /* content */
  .feature_intro_wrap {
    width: 100%;
    padding: 80px 0;
    /*background-color: #fff9e2;*/
    /*background: linear-gradient(135deg, #fff9e2, #fbd8b5);*/
  }
  .feature_wrap {
    /*margin-bottom: 120px;*/
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff9e2;
  }

  .howtouse_wrap {
    padding-top: 100px;
    padding-bottom: 100px;
    /*background-color: #fff9e2;*/
    /*background: linear-gradient(135deg, #ffedab, #fff9e2);*/
  }
  .demo_cta_wrap {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #f4810e;
  }
  .demo_howto_wrap {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .cta_wrap {
    padding-top: 100px;
    padding-bottom: 100px;
    /*background-color: #f39800;*/
    background: linear-gradient(135deg, #f4810e, #ffdc00);
  }

  .feature_intro ul {
    margin-top: 40px;
    padding-left: 40px;
  }
  .feature_intro ul li {
    color: #ee7800;
    font-size: 150%;
    font-weight: bold;
    line-height: 1.8;
  }
  .intro_txt {
    padding-left: 40px;
    font-size: 120%;
  }

  .feature_wrap {
    margin-top: 120px;
  }
  .feature_wrap.fst {
    margin-top: 0;
  }
  .feature_wrap section + section {
    margin-top: 120px;
  }

  .feature_txt h3 {
    margin-bottom: 1em;
    /*padding: .5em 1em;*/
    /*background: linear-gradient(90deg, #fec200, #ee7800);*/
    /*color: #000;*/
    /*color: #f4810e;*
    /*font-size: 150%;*/
    color: #ed6d35;
    font-size: 160%;
    font-weight: bold;
    line-height: 1.4;
  }

  .feature_img img {
    width: 100%;
    height: auto;
  }

  .howtouse_title {
    margin-bottom: 56px;
    text-align: center;
  }
  .howtouse_title h2 {
    color: #111;
    font-size: 40px;
    font-weight: bold;
  }
  .multiple_quotes_title {
    text-align: center;
  }
  .multiple_quotes_title h3 {
    color: #ed6d35;
    font-size: 28px;
    font-weight: bold;
  }

  .howtouse_box {
    width: 28%;
    box-sizing: border-box;
    padding-bottom: 24px;
    background-color: #fffcf9;
    box-shadow: 0 0 16px rgba(0,0,0,0.2);
  }
  .howtouse_arr {
    position: relative;
    width: 8%;
    text-align: center;
  }
  .arr_box {
    position: absolute;
    top: 50%;
    width: 100%;
  }
  .arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
  }
  .arrow::before,
  .arrow::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
  }
  .simple::before{
    left: -70%;
    width: 32px;
    height: 32px;
    border-top: 1px solid #ee7800;
    border-right: 1px solid #ee7800;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .howtouse_box h3 {
    padding: 16px;
    background-color: #fec200;
    color: #000;
    font-size: 120%;
    font-weight: bold;
  }
  .howtouse_img {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
    text-align: center;
  }
  .howtouse_img img {
    width: 100%;
    height: auto;
  }
  .howtouse_box p {
    padding: 0 16px;
  }

  .multiple_q_box {
    /*width: 50%;*/
    box-sizing: border-box;
  }
  .multiple_q_img {
    /*width: 50%;*/
    text-align: center;
  }
  .multiple_q_img img {
    max-width: 100%;
    height: auto;
  }

  .demo_title {
    margin-bottom: 56px;
    text-align: center;
  }
  .demo_title h2 {
    color: #000;
    font-size: 40px;
    font-weight: bold;
  }
  .demo_cta_body {
    text-align: center;
  }
  .demo_cta_body p {
    font-size: 110%;
  }
  .demo_cta_btn {
    margin-top: 40px;
  }
  .demo_cta_btn a {
    display: inline-block;
    padding: 0 40px;
    background-color: #2ca9e1;
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    line-height: 64px;
    text-align: center;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }
  .demo_cta_btn a:hover {
    background-color: #fff;
    color: #ee7800;
  }

  .demo_howto_wrap section + section {
    margin-top: 80px;
  }

  .demo_howto_block .demo_howto_txt {
    flex: 1;
    padding-right: 80px;
    font-size: 110%;
  }
  .demo_howto_txt h3 {
    margin-bottom: 16px;
    font-size: 130%;
  }
  .demo_howto_block .demo_howto_img {
    width: 50%;
  }
  .demo_howto_img img {
    width: 100%;
    height: auto;
  }

  .cat_title {
    margin-bottom: 56px;
    text-align: center;
  }
  .cat_title h2 {
    color: #000;
    font-size: 40px;
    font-weight: bold;
  }
  .cta_block {
    width: 800px;
    margin: 0 auto;
    text-align: center;
  }
  .cta_block + .cta_block {
    margin-top: 40px;
  }

  .release_block {
    box-sizing: border-box;
    margin-bottom: 40px;
    padding: 32px 16px;
    background-color: #fff9e2;
    text-align: center;
  }
  .release_btn {
    margin-top: 16px;
    text-align: center;
  }
  .release_btn a {
    display: inline-block;
    padding: 0 3em;
    background-color: #ee7800;
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }
  .release_btn a:hover {
    background-color: #2ca9e1;
    border-color: #2ca9e1;
  }
  .contact_btn {
    margin-top: 24px;
    text-align: center;
  }
  .contact_btn a {
    display: inline-block;
    padding: 0 3em;
    background-color: #ee7800;
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }
  .contact_btn a:hover {
    background-color: #2ca9e1;
    border-color: #2ca9e1;
  }

  /* footer */
  .footer_info p {
    display: inline-block;
    margin: 0 1em;
  }
}/* end TAB & PC */

/* -------------------------------------------------------
for TAB only
---------------------------------------------------------- */
@media screen and (min-width:600px) and (max-width:1080px){
  /* fv */
  .fv_wrap {
    height: 55vh;
    /*background-color: #feeede;*/
    background: url(images/fv_bg1.jpg) no-repeat center bottom;
    background-size: cover;
  }
  .fv {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .fv .catch_block {
    position: absolute;
    top: 10vh;
    left: 0;
    width: 60%;
    box-sizing: border-box;
    padding-left: 5%;
  }
  .fv .catch img {
    width: 100%;
    height: auto;
  }
  .fv .mockup_block {
    position: absolute;
    top: 15vh;
    right: 0;
    width: 40%;
    text-align: right;
  }
  .fv .mockup_block img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }
  .fv .catch_block .lead {
    margin-top: 24px;
    font-size: 110%;
  }
  .fv .fv_btn {
    position: absolute;
    bottom: 64px;
    width: 100%;
    text-align: center;
  }
  .fv .fv_btn a {
    display: inline-block;
    padding: 0 3em;
    background-color: #2ca9e1;
    border-radius: 32px;
    color: #fff;
    font-size: 130%;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }

  /* content */
  .feature_intro {
    padding: 0 32px;
  }
  .feature_intro h2 {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
  }

  .feature_wrap section {
    padding: 0 32px;
  }
  .fd_r .feature_txt {
    padding-right: 40px;
  }
  .fd_rr .feature_txt {
    padding-left: 40px;
  }
  .feature_img {
    width: 40%;
  }

  .howtouse_block {
    padding: 0 32px;
  }
  .simple::before{
    width: 16px;
    height: 16px;
  }
  .howtouse_box p {
    font-size: 90%;
  }

  .multiple_quotes {
    margin-top: 56px;
    padding: 40px 0;
    background-color: #fff9e2;
  }
  .multiple_q_wrap {
    margin-top: 40px;
    padding: 0 32px;
  }


  .demo_cta_inner {
    padding: 0 32px;
  }

  .demo_howto_title,
  .demo_howto_block {
    padding: 0 32px;
  }
  .demo_howto_block .demo_howto_txt {
    font-size: 100%;
  }

}/* end TAB & PC */


/* -------------------------------------------------------
for TAB landscape
---------------------------------------------------------- */
@media screen and (min-width:811px) and (max-width:1080px){
  .fv_wrap {
    height: 70vh;
  }
  .fv {
    position: relative;
    width: 800px;
    height: 100%;
    margin: 0 auto;
  }
}

/* -------------------------------------------------------
for smartphone landscape
---------------------------------------------------------- */
@media screen and (min-width:480px) and (max-width:800px){
  .fv_wrap {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
  }
  .fv {
    position: relative;
    width: 100% !important;
    height: 100%;
    box-sizing: border-box;
  }
  .fv .catch_block {
    position: absolute;
    top: 80px;
    left: 0;
    box-sizing: border-box;
    padding-left: 32px;
  }
  .fv .catch img {
    width: 360px;
    height: auto;
  }
  .fv .mockup_block {
    position: absolute;
    top: 140px;
    right: 16px;
  }
  .fv .mockup_block img {
    width: 260px;
    height: auto;
  }
  .fv .catch_block .lead {
    margin-top: 16px;
    font-size: 100%;
  }
  .fv .fv_btn {
    display: none;
  }

  .feature_intro {
    padding: 0 16px;
  }
  .feature_intro h2 {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .1em;
    text-align: center;
  }
  .feature_intro ul {
    margin-top: 24px;
  }
  .feature_intro ul li {
    color: #ee7800;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.8;
  }
  .intro_txt {
    font-size: 100%;
  }
  .cta_block {
    width: 100%;
    box-sizing: border-box;
  }
}
/* iPhone11pro以降 */
@media screen and (min-width:811px) and (max-width:844px){
  .fv_wrap {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
  }
  .fv {
    position: relative;
    width: 100% !important;
    height: 100%;
    box-sizing: border-box;
  }
  .fv .catch_block {
    position: absolute;
    top: 80px;
    left: 0;
    box-sizing: border-box;
    padding-left: 32px;
  }
  .fv .catch img {
    width: 360px;
    height: auto;
  }
  .fv .mockup_block {
    position: absolute;
    top: 140px;
    right: 16px;
  }
  .fv .mockup_block img {
    width: 260px;
    height: auto;
  }
  .fv .catch_block .lead {
    margin-top: 16px;
    font-size: 100%;
  }
  .fv .fv_btn {
    display: none;
  }

  .feature_intro {
    padding: 0 16px;
  }
  .feature_intro h2 {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .1em;
    text-align: center;
  }
  .feature_intro ul {
    margin-top: 24px;
  }
  .feature_intro ul li {
    color: #ee7800;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.8;
  }
  .intro_txt {
    font-size: 100%;
  }
  .cta_block {
    width: 100%;
    box-sizing: border-box;
  }
}
/* -------------------------------------------------------
for PC
---------------------------------------------------------- */
@media only screen and (min-width:1081px){
  body {
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  }

  .spv, .tab, .spv-l {display: none;}

  /* fv */
  .fv_wrap {
    /*background-color: #feeede;*/
    background: url(images/fv_bg1.jpg) no-repeat center bottom;
    background-size: cover;
  }
  .fv {
    position: relative;
    width: 1025px;
    height: 720px;
    /*height: 600px;*/
    margin: 0 auto;
  }
  .fv .catch_block {
    position: absolute;
    top: 140px;
    left: 0;
  }
  .fv .mockup_block {
    position: absolute;
    top: 200px;
    right: 0;
  }
  .fv .mockup_block img {
    width: 500px;
    height: auto;
  }
  .fv .catch_block .lead {
    margin-top: 24px;
    font-size: 110%;
  }
  .fv .fv_btn {
    position: absolute;
    bottom: 64px;
    width: 100%;
    text-align: center;
  }
  .fv .fv_btn a {
    display: inline-block;
    padding: 0 3em;
    background-color: #2ca9e1;
    border-radius: 32px;
    color: #fff;
    font-size: 130%;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }
  .fv .fv_btn a:hover {
    background-color: #fff;
    color: #f4810e;
  }

  /* contents */
  .feature_intro {
    width: 800px;
    margin: 0 auto;
  }

  .feature_intro h2 {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
  }

  .fd_r .feature_txt {
    padding-right: 80px;
  }
  .fd_rr .feature_txt {
    padding-left: 80px;
  }
  .feature_txt {
    padding-top: 64px;
  }
  .feature_img {
    width: 400px;
    /*padding-top: 64px;*/
  }

  .howtouse_block {
    width: 1200px;
    margin: 0 auto;
  }
  .multiple_quotes {
    width: 1200px;
    box-sizing: border-box;
    margin: 80px auto 0;
    padding: 40px;
    background-color: #fff9e2;
  }
  .multiple_q_wrap {
    margin-top: 56px;
  }

  .demo_cta_inner {
    width: 800px;
    margin: 0 auto;
  }
  .demo_howto_title,
  .demo_howto_block {
    width: 1025px;
    margin: 0 auto;
  }

  .gotodemo {
    margin-bottom: 80px;
    text-align: center;
  }
  .gotodemo a {
    display: inline-block;
    padding: 0 3em;
    background-color: #2ca9e1;
    border-radius: 32px;
    color: #fff;
    font-size: 130%;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 64px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    transition: all .3s;
  }
  .gotodemo a:hover {
    background-color: #fff;
    color: #f4810e;
  }


}/* end PC */



/* -------------------------------------------------------
Common
---------------------------------------------------------- */
.fs80 {font-size:80%;}
.fs90 {font-size:90%;}
.fs100 {font-size:100%;}
.fs110 {font-size:110%;}
.fs120 {font-size:120%;}
.fs150 {font-size:150%;}

.lh18 {line-height:1.8;}
.lh20 {line-height:2.0;}

.mgt1em {margin-top:1em;}
.mgt2em {margin-top:2em;}
.mgb1em {margin-bottom:1em;}
.mgb2em {margin-bottom:2em;}

strong, b, .bold {
  font-weight: bold;
}
.unl {
  display: inline-block;
  padding-bottom: 4px;
  line-height: 1;
  border-bottom: 2px solid #f4810e;
}
.marker {
  background:linear-gradient(transparent 70%, #ffdc00 70%);
}

.fc1 {color: #f4810e;}

.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}