@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'gtm';
    src: url('./font/gtm_book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gtm';
    src: url('./font/gtm.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
body,html {
	width: 100%;
    height: 100%;
}
html {
	overflow-y: auto;
}
body {
	font: 18px/1.6 'gtm', 'Noto Sans Japanese', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	text-align: left;
    color:#333;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
caption,th,td {
	font-weight: normal;
	text-align: left;
}
input,textarea,select {
	vertical-align: middle;
}
textarea {
	resize: vertical;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
ul,ol { list-style: none; }
fieldset,img { border: 0; vertical-align: top; }
iframe {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
input{
    color:#333;
}
a{
    text-decoration:none;
    color:inherit;
}
select::-ms-expand {
    display: none;
}
a{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}
.sp-br{
    display: none;
}
.pc-hide{
    display: none!important;
}


/* -- clearfix
-------------------------------------------------------------------------------- */
.cf:after {
	content: "";
	display: block;
	clear: both;
	height: 0!important;
}


/* -- body
-------------------------------------------------------------------------------- */
body#home{
    opacity: 0;
    transition: opacity 0.3s ease;
}
body#home.show{
    opacity: 1;
}


/* -- scrollFade
-------------------------------------------------------------------------------- */
.scrollFade {
    opacity: 0;
    transition: opacity 600ms ease, transform 600ms ease;
}
.scrollFade.show {
    opacity: 1;
}


/* -- .in
-------------------------------------------------------------------------------- */
.in {
    max-width: 1600px;
    margin: 0 auto;
}


/* -- .link-btn
-------------------------------------------------------------------------------- */
.link-btn {
    display: block;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color:#fff;
    width: 300px;
    background: #00c73c;
    padding: 20px 0;
    border-radius: 3px;
    transition: all 0.2s ease;
}
.pc .link-btn:hover {
    background: #00ae34;
}


/* -- header
-------------------------------------------------------------------------------- */
header{
    width: 100%;
    height: 100px;
    padding: 0 3%;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    transition: background 0.2s ease;
}
header.active {
    background: #fff;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
}
header .logo{
    display: inline-block;
    font-size: 32px;
    line-height: 1.2;
    font-weight: bold;
}
header.wh .logo{
    color: #fff;
}
header.wh.active .logo {
    color: #333;
}


/* -- nav
-------------------------------------------------------------------------------- */
nav ul{
    letter-spacing: -0.4em;
}
nav li{
    display: inline-block;
    letter-spacing: 0;
    margin-left: 40px;
}
nav li:first-child{
    margin-left: 0;
}
nav li a,
header.wh.active nav li a{
    font-size: 14px;
    color: #666;
}
header.wh nav li a{
    color: #fff;
}
.pc .trial header.wh nav li.box a:hover{
    color: #95bf15;
}
.pc .price header.wh nav li.box a:hover{
    color: #e59703;
}
.pc .contact header.wh nav li.box a:hover{
    color: #00c1ae;
}
nav li.box a,
header.wh.active nav li.box a{
    font-size: 13px;
    font-weight: bold;
    color: #00c73c;
    border: solid 1px #00c73c;
    padding: 14px 16px 13px;
    border-radius: 2px;
    transition: all 0.2s ease;
}
.pc nav li.box a:hover,
.pc header.wh.active nav li.box a:hover{
    background: #00c73c;
    border-color: #00c73c;
    color: #fff;
}
.pc header.wh nav li.box a:hover{
    background: #fff;
    border-color: #fff;
    color: #AE9F8A;
}
.nav-btn{
    display: none;
}

header.wh nav li.box a{
    border-color: #fff;
}


/* -- .main-visual
-------------------------------------------------------------------------------- */
.main-visual{
    background: url('/img/img_main_bg.jpg') no-repeat;
    background-position: center;
    background-size: cover;
    padding: 160px 5% 0;
}
.main-visual .ttl-box{
    font-size: 54px;
    text-align: center;
}
.main-visual .sub-ttl{
    font-size: 0.555555em;
    line-height: 1.4;
}
.main-visual .sub-ttl span{
    display: block;
    font-size: 0.75em;
    color:#666;
}
.main-visual .ttl{
    line-height: 1;
    margin-top: 20px;
}
.main-visual .device-img{
    text-align: center;
    margin-top: 50px;
    position: relative;
}
.main-visual .device-img::before{
    content: "";
    width: 278px;
    height: 20px;
    background: url(/img/img_device_shadow.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    margin-left: -139px;
    bottom: -10px;
    opacity: 0.6;
}
.main-visual .device-img p{
    width: 278px;
    height: 567px;
    background: url('/img/img_device.png') no-repeat;
    background-size: 100%;
    margin: 0 auto;
    position: relative;
}
.main-visual .device-img p span{
    display: block;
    width: 240px;
    position: absolute;
    top: 67px;
    left: 16px;
    border: solid 3px #666;
    border-radius: 4px;
}
.main-visual .device-img p span img{
    width: 100%;
    height: auto;
}


/* -- .section
-------------------------------------------------------------------------------- */
.section{
    padding: 100px 5%;
}
.section.trial {
    padding-top: 40px;
    padding-bottom: 100px;
}
.section.price {
    padding-top: 120px;
    padding-bottom: 120px;
}
.section .ttl-box{
    text-align: center;
}
.section.logo .ttl-box {
    padding-left: 5%;
    padding-right: 5%;
}
.section .ttl{
    font-size: 32px;
    line-height: 1.4;
}
.section .lead{
    color:#666;
    margin-top: 12px;
}
.section .link-btn{
    margin: 40px auto 0;
}


/* -- .point
-------------------------------------------------------------------------------- */
.point {
    padding: 100px 5%;
    border-bottom: solid 1px #e5e5e5;
}
.point.point-1 {
    border-top: solid 1px #e5e5e5;
}
.point.bg {
    background: #fafafa;
}
.point .ttl-box {
    text-align: center;
}
.point .ttl {
    font-size: 28px;
    font-weight: normal;
    line-height: 1.4;
}
.point .lead {
    color:#666;
    margin-top: 20px;
}
.point-content{
    margin-top: 60px;
}
.point-content .content-box{
    float: left;
    width: 50%;
    height: 560px;
}
.point-content.reverse .content-box{
    float: right;
}
.point-content .content-box.img-wrap{
    height: 560px;
    padding: 60px 60px 0;
    box-sizing: border-box;
    overflow: hidden;
}
.point-1 .point-content .content-box.img-wrap{
    background: #95bf15;
}
.point-2 .point-content .content-box.img-wrap{
    background: #e59703;
}
.point-3 .point-content .content-box.img-wrap{
    background: #00c1ae;
}
.point-content .content-box.img-wrap .mes{
    font-size: 18px;
    line-height: 1.4;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}
.point-content .content-box.img-wrap .screen-wrap{
    position: relative;
    width: 100%;
    height: 475px;
    margin: 0 auto;
}
.point-1 .point-content .content-box.img-wrap .screen-wrap{
    max-width: 520px;
}
.point-2 .point-content .content-box.img-wrap .screen-wrap{
    max-width: 620px;
}
.point-content .content-box.img-wrap .screen-img{
    width: 278px;
    height: 567px;
    background: url(/img/img_device.png) no-repeat;
    background-size: 100%;
    position: absolute;
    transform: translateY(40px);
}
.point-content .content-box.img-wrap .screen-img.show {
    transform: translateY(0)!important;
}
.point-1 .screen-img.screen-1{
    top: 46px;
    left: 0;
}
.point-1 .screen-img.screen-2{
    top: 0;
    right: 0;
    box-shadow: -20px 46px 32px rgba(0,0,0,0.2);
    transition-delay: 600ms;
}
.point-2 .screen-img{
    top: 0;
}
.point-3 .point-content .content-box.img-wrap{
    padding: 0 40px 40px;
}
.point-3 .screen-img {
    bottom: 40px;
    left: 50%;
    margin-left: -139px;
}
.point-content .content-box.img-wrap .img{
    display: block;
    width: 240px;
    position: absolute;
    top: 67px;
    left: 16px;
    border: solid 3px #666;
    border-radius: 3px;
}
.point-content .content-box.img-wrap .img img{
    width: 100%;
    height: auto;
}
.point-2 .point-content .content-box.img-wrap .screen-in-img .img{
    border: none;
    border-radius: 0;
    top: 70px;
    box-shadow: -20px 20px 32px rgba(0,0,0,0.2);
}
.point-2 .point-content .screen-in-img.in-img-1 .img{
    left: 50%;
    margin-left: -120px;
    transition: all 0s;
}
.point-2 .point-content .screen-in-img.in-img-1 .img.show{
    opacity: 0;
    animation: slidefade1 5s ease infinite 600ms;
}
@keyframes slidefade1{
    0%{
        opacity: 0;
        transform: translateX(-40px);
    }
    15%{
        opacity: 1;
        transform: translateX(0);
    }
    30%{
        opacity: 1;
        transform: translateX(0);
    }
    60%{
        opacity: 1;
        transform: translateX(0);
    }
    70%{
        opacity: 0;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(0);
    }
}
.point-2 .point-content .screen-in-img.in-img-2 .img{
    left: auto;
    right: 0;
    transition: all 0s;
}
.point-2 .point-content .screen-in-img.in-img-2 .img.show{
    opacity: 0;
    animation: slidefade2 5s ease infinite 600ms;
}
@keyframes slidefade2{
    0%{
        opacity: 0;
        transform: translateX(-40px);
    }
    15%{
        opacity: 0;
        transform: translateX(-40px);
    }
    30%{
        opacity: 1;
        transform: translateX(0);
    }
    60%{
        opacity: 1;
        transform: translateX(0);
    }
    70%{
        opacity: 0;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(0);
    }
}
.point-content .content-box.comment-wrap{
    background-image: url(/img/img_service_2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    padding: 80px 40px;
    display: flex;
    align-items: center;
}
.point-1 .point-content .content-box.comment-wrap{
    background-image: url(/img/img_service_1.jpg);
}
.point-2 .point-content .content-box.comment-wrap{
    background-image: url(/img/img_service_2.jpg);
}
.point-3 .point-content .content-box.comment-wrap{
    background-image: url(/img/img_service_3.jpg);
}
.point-content .content-box.comment-wrap::before{
    content: "";
    display: block;
    background: rgba(51,51,51,0.4);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.point-content .content-box.comment-wrap .comment-block {
    width: 100%;
}
.point-content .content-box.comment-wrap .comment-box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}
.point-content .content-box.comment-wrap .comment-box + .comment-box {
    margin-top: 80px;
}
.point-content .content-box .comment-box .comment{
    display: inline-block;
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    background: #fff;
    border-radius: 20px;
    padding: 21px 28px 20px;
    position: relative;
    max-width: calc(100% - 108px);
    box-sizing: border-box;
    transform: scale(0.8);
    transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.point-content .content-box .comment-box .comment.show{
    transform: scale(1);
}
.point-content .content-box .comment-box .comment::before{
    content: "";
    display: block;
    width: 23px;
    height: 20px;
    position: absolute;
    top: 34px;
    left: -21px;
    background: url('/img/ico_fukidashi.svg') no-repeat;
    background-size: 100%;
}
.point-content .content-box .comment-box.reverse .comment::before{
    left: auto;
    right: -21px;
    background-image: url('/img/ico_fukidashi_reverse.svg');
}
.point-1 .point-content .content-box .comment-box .comment .col{
    color: #95bf15;
}
.point-2 .point-content .content-box .comment-box .comment .col{
    color: #e59703;
}
.point-3 .point-content .content-box .comment-box .comment .col{
    color: #00c1ae;
}
.point-content .content-box .comment-box .img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3B4043;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-right: 28px;
    margin-top: -26px;
}
.point-content .content-box .comment-box.reverse .img{
    margin-left: 28px;
    margin-right: 0;
}
.point-content .content-box .comment-box .img.col-1{
    background: #8AAE99;
}
.point-content .content-box .comment-box .img.col-2{
    background: #b8ab99;
}
.point-content .content-box .comment-box .img.col-3{
    background: #8A9FAE;
}
.point-content .content-box .comment-box .img.col-4{
    background: #b6959b;
}
.point-content .content-box .comment-box .img img{
    width: 80px;
    height: 80px;
}
.point-content .content-box .comment-box .time{
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    top: -26px;
    left: 0;
    color: #fff;
    opacity: 0;
    transition: opacity 200ms ease;
    transition-delay: 600ms;
}
.point-content .content-box .comment-box .comment.show .time{
    opacity: 1;
}
.point-content .content-box .comment-box.reverse .time{
    left: auto;
    right: 0;
}


/* -- .performance
-------------------------------------------------------------------------------- */
.section.performance{
    background: url('/img/img_performance_bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
.section.performance::before{
    content: "";
    background: rgba(0,32,38,0.4);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.section.performance .ttl-box{
    position: relative;
}
.section.performance .ttl{
    color: #fff;
}
.section.performance .lead{
    color: #fff;
}
.performance-content{
    margin-top: 60px;
    position: relative;
}
.performance-content ul{
    margin: 0px -20px;
}
.performance-content li{
    float: left;
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms ease, transform 600ms ease;
    transition-delay: 1300ms;
}
.performance-content li:nth-child(1){
    transition-delay: 0ms;
}
.performance-content li:nth-child(2){
    transition-delay: 150ms;
}
.performance-content li:nth-child(3){
    transition-delay: 300ms;
}
.performance-content li:nth-child(4){
    transition-delay: 450ms;
}
.performance-content li:nth-child(5){
    transition-delay: 600ms;
}
.performance-content li:nth-child(6){
    transition-delay: 750ms;
}
.performance-content li:nth-child(7){
    transition-delay: 900ms;
}
.performance-content li:nth-child(8){
    transition-delay: 1050ms;
}
.performance-content ul.show li{
    transform: translateY(0);
    opacity: 1;
}
.performance-content li a{
    display: block;
    background: #fff;
    text-align: center;
    padding: 0 20px;
    position: relative;
    transition: all 0.2s ease;
}
.pc .performance-content li a:hover{
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 16px 32px 0 rgba(0,0,0,0.3);
}
.performance-content li a img{
    width: 100%;
    max-width: 340px;
    height: auto;
}


/* -- .logo-content
-------------------------------------------------------------------------------- */
.section.logo {
    padding-left: 0;
    padding-right: 0;
}
.logo-content{
    width: 100%;
    overflow: hidden;
    margin-top: 60px;
    white-space: nowrap;
    letter-spacing: -0.4em;
}
.logo-content .inner{
    animation: loop 30s linear infinite;
}
@keyframes loop {
	0% {transform: translateX(0);}
	100% {transform: translateX(-1464px);}
}
.logo-content ul{
    display: inline-block;
    letter-spacing: 0;
    width: 1464px;
}
.logo-content li{
    float: left;
}


/* -- .bottom-content
-------------------------------------------------------------------------------- */
.bottom-content{
    display: flex;
}
.bottom-content .content-box{
    width: 50%;
    height: 560px;
    padding: 80px 40px 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.bottom-content .content-box.trial-wrap{
    background: #00c73c;
}
.bottom-content .content-box.price-wrap{
    background: #00ae34;
}
.bottom-content .content-box.contact-wrap{
    background: #00942D;
}
.bottom-content .content-box .icon{
    height: 60px;
    margin-bottom: 32px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.bottom-content .content-box .icon img{
    width: auto;
    height: 100%;
}
.bottom-content .content-box .ttl{
    font-size: 28px;
    line-height: 1.4;
    color:#fff;
}
.bottom-content .content-box .lead{
    font-size: 16px;
    color:#fff;
    margin-top: 10px;
}
.bottom-content .content-box .link-btn{
    margin: 40px auto 0; 
    background: rgba(0,0,0,0.15);
}
.pc .bottom-content .link-btn:hover {
    background: #fff;
    color: #00c73c;
}
.pc .bottom-content .content-box.price-wrap .link-btn:hover{
    color: #00ae34;
}
.pc .bottom-content .content-box.contact-wrap .link-btn:hover{
    color: #00942D;
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    padding: 0 3%;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .logo{
    display: inline-block;
    line-height: 1.2;
    font-weight: bold;
    text-align: right;
}
footer .logo-mark{
    float: right;
    font-size: 26px;
}
footer .copyright{
    float: left;
    display: block;
    font-size: 12px;
    font-weight: normal;
    line-height: 28px;
    color: #666;
    margin-right: 30px;
    transform: translateY(2px);
}


/* -- page-head
-------------------------------------------------------------------------------- */
.page-head{
    padding: 180px 5% 80px;
    background: #8A9FAE;
}
.trial .page-head{
    background: #95bf15;
}
.price .page-head{
    background: #e59703;
}
.contact .page-head{
    background: #00c1ae;
}
.page-head .in{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.page-head .in::before{
    content: "";
    display: block;
    width: 100%;
    height: 120px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
    position: absolute;
    top: -43px;
    left: 0;
}
.trial .page-head .in::before{
    background-image: url('/img/icon_trial.svg');
}
.price .page-head .in::before{
    background-image: url('/img/icon_price.svg');
}
.contact .page-head .in::before{
    background-image: url('/img/icon_contact.svg');
}
.page-head .ttl{
    font-size: 32px;
    line-height: 1.2;
    color: #fff;
}
.page-head .lead{
}


/* -- .breadcrumb
-------------------------------------------------------------------------------- */
.breadcrumb {
    background: #fafafa;
    border-bottom: solid 1px #e5e5e5;
    padding: 20px 5%;
}
.breadcrumb ul{
    letter-spacing: -0.4em;
    max-width: 1200px;
    margin: 0 auto;
}
.breadcrumb li{
    display: inline-block;
    letter-spacing: 0;
    font-size: 14px;
    color:#999;
}
.breadcrumb li::after{
    content: ">";
    margin: 0 8px;
}
.breadcrumb li:last-child::after{
    display: none;
}
.breadcrumb li a{
    color:#00c73c;
}


/* -- .form
-------------------------------------------------------------------------------- */
.form {
    padding: 80px 5% 100px;
    border-bottom: solid 1px #e5e5e5;
    position: relative;
}
.form form {
    margin-top: 80px;
}
.form .link-btn{
    margin: 80px auto 0;
}
label{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
input,
textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
}
input:focus:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
input:focus,
textarea:focus{
  outline: 0;
}
select::-ms-expand {
    display: none;
}


/* -- .form-content
-------------------------------------------------------------------------------- */
.form-content{
    max-width: 1200px;
    margin: 0 auto;
}
.form-content.thanks{
    text-align: center;
}
.form-content .ttl{
    font-size: 28px;
    margin-bottom: 40px;
}
.form-content .lead{
    font-size: 16px;
}
.form-content .lead + .lead{
    margin-top: 1.6em;
}
.form-content .note{
    font-size: 14px;
    color:#666;
    margin-top: 12px;
}
.form-content .lead .col{
    color: #ff3b3b;
    margin-right: 3px;
}
.form-content input,
.form-content textarea {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 10px 12px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    border-radius: 3px;
    border: solid 1px #f5f5f5;
}
.form-content input[type="text"]:focus,
.form-content textarea:focus{
    border-color: #00c73c;
    background: #fff;
}
.form-content label {
    display: inline-block;
    font-size: 14px;
    color: #666;
}
.form-content input[type="text"] {
    height: 48px;
}
.form-content textarea {
    height: 180px;
}
.form-content .required{
    color: #ff3b3b;
    margin-left: 3px;
}
.form-content p.validate-error {
    font-size: 12px;
    color: #ff3b3b;
    position: absolute;
    padding-top: 6px;
}
.form-content .form-item {
    position: relative;
}
.form-list .form-item {
    float: left;
    width: 48%;
    margin-bottom: 28px;
}
.form-list .form-item:nth-child(even) {
    float: right;
}
.form-item label + input,
.form-item label + textarea{
    margin-top: 8px;
}
.form-check{
    display: flex;
    align-items: center;
    border-top: solid 1px #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
    padding: 40px 0;
    margin-bottom: 40px;
}
.form-check .title{
    font-size: 14px;
    color:#666;
}
.form-check .form-check-list{
    letter-spacing: -0.4em;
}
.form-check .form-check-list .form-item{
    display: inline-block;
    letter-spacing: 0;
    margin-left: 32px;
}
.form-check .form-check-list .form-item label{
    font-size: 16px;
    line-height: 1.2;
}
.form-submit{
    margin-top: 40px;
}
.form-submit .submit-check-block {
    text-align: center;
}
.form-submit .submit-check-block label{
    font-size: 16px;
    line-height: 1.2;
}
.form-submit .submit-link {
    font-size: 13px;
    margin-top: 8px;
    color: #666;
}
.form-submit .submit-link a {
    color: #00c73c;
    text-decoration: underline;
}
.form-submit .submit-btn {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    width: 300px;
    background: #00c73c;
    padding: 20px 0;
    border-radius: 3px;
    transition: all 0.2s ease;
    border:none;
    margin: 40px auto 0;
    transition: background 0.2s ease;
}
.pc .form-submit .submit-btn:hover {
    background: #00ae34;
}
.form-submit .submit-btn.disable,
.pc .form-submit .submit-btn.disable:hover{
    background: #d9d9d9;
    cursor: default;
}


/* -- radio
-------------------------------------------------------------------------------- */
input[type=radio] + label::after{
    display: block;
    content: "";
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height:auto;
    margin-top: 0;
    background: none;
    pointer-events: none;
    border: none;
}
input[type=radio] {
    display: none;
    margin: 0;
}
input[type=radio] + label,
input[type=radio] + span{
    cursor: pointer;
    position: relative;
}
input[type=radio] + label::before,
input[type=radio] + span::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border:solid 1px #d5d5d5;
    margin-right: 8px;
    transform: translateY(-1px);
}
input[type=radio] + label::after,
input[type=radio] + span::after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 8px;
    left: 4px;
}
input[type=radio]:checked + label::after,
input[type=radio]:checked + span::after{
    background: #00c73c;
}


/* -- checkbox
-------------------------------------------------------------------------------- */
input[type=checkbox] + label::after{
    display: block;
    content: "";
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height:auto;
    margin-top: 0;
    background: none;
    pointer-events: none;
    border: none;
}
input[type=checkbox] {
    display: none;
    margin: 0;
}
input[type=checkbox] + label,
input[type=checkbox] + span{
    cursor: pointer;
    position: relative;
    color:#333;
}
input[type=checkbox] + label::before,
input[type=checkbox] + span::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    background: #fff;
    border:solid 1px #d5d5d5;
    margin-right: 8px;
    transform: translateY(-1px);
}
input[type=checkbox] + label::after,
input[type=checkbox] + span::after{
    content: "";
    width: 8px;
    height: 4px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-left: solid 2px transparent;
    border-bottom: solid 2px transparent;
    transform: rotate(-45deg);
}
/* ieハック */
@media all and (-ms-high-contrast: none){
    input[type=checkbox] + label::after,
    input[type=checkbox] + span::after{
        top: 6px;
    }
}
/* edgeハック */
@supports (-ms-ime-align: auto){
    input[type=checkbox] + label::after,
    input[type=checkbox] + span::after{
        top: 6px;
    }
}
input[type=checkbox]:checked + label::after,
input[type=checkbox]:checked + span::after{
    border-left-color: #00c73c;
    border-bottom-color: #00c73c;
}


/* -- loading
-------------------------------------------------------------------------------- */
.form.loading .form-content{
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
}
.form .loader{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
}
.form.loading .loader{
    visibility: visible;
    opacity: 1;
}
.loader span{
    display: block;
    width: 60px;
    height: 60px;
}
.loader span:after {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    animation: rotate 1.2s linear infinite;
    border-radius: 100%;
    border-top: 2px solid #00c73c;
    border-bottom: 2px solid #e0e0e0;
    border-left: 2px solid #00c73c;
    border-right: 2px solid #e0e0e0;
}
@keyframes rotate {
  0% {
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    -o-transform: rotateZ(-360deg);
  }
  100% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
}


/* -- qr-wrap
-------------------------------------------------------------------------------- */
.qr-wrap{
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}
.qr-box{
    width: 48%;
    text-align: center;
    box-sizing: border-box;
    padding: 80px 60px;
    background: #f5f5f5;
}
.qr-box .ttl{
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 40px;
}
.qr-box .img{
    background: #fff;
    max-width: 250px;
    width: 100%;
    border: solid 1px #e5e5e5;
    margin: 0 auto;
}
.qr-box .img img{
    width: 100%;
    height: auto;
}
.qr-box .lead{
    font-size: 14px;
    margin-top: 40px;
    color: #666;
}


/* -- @media
-------------------------------------------------------------------------------- */
@media (max-width: 1360px){
    .pc-wide{
        display: none;
    }
    .bottom-content {
        display: block;
    }
    .bottom-content .content-box {
        display: block;
        width: 100%;
        height: auto;
    }
}
@media (max-width: 1024px){
    .pc-br{
        display: none;
    }
    .point-content .content-box {
        float: none;
        width: 100%;
        height: auto;
    }
    .point .ttl-box {
        text-align: left;
    }
    .point-content .content-box.comment-wrap{
        padding: 80px;
    }
    .point-content .content-box .comment-box .comment::before {
        top: 32px;
        margin-top: 0;
    }
    .point-content .content-box.comment-wrap .comment-box{
        max-width: 530px;
        margin: 0 auto;
    }
    .point-content .content-box.comment-wrap .comment-box + .comment-box{
        margin-top: 60px;
    }
    .section.performance {
        background-position: center 0!important;
    }
    .performance-content ul {
        margin: -0;
    }
    .performance-content li {
        float: none;
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }
    .performance-content li:first-child {
        margin-top: 0;
    }
    .bottom-content .link-btn,
    .bottom-content .content-box .link-btn{
        background: #fff;
        color: #00c73c;
    }
    .bottom-content .content-box.price-wrap .link-btn{
        color: #00ae34;
    }
    .bottom-content .content-box.contact-wrap .link-btn{
        color: #00942D;
    }
    footer .logo-mark{
        float: none;
    }
    footer .copyright{
        float: none;
        margin-right: 0;
        line-height: 1.6;
    }
    .form-list .form-item,
    .form-list .form-item:nth-child(even){
        float: none;
        width: 100%;
    }
}
@media (max-width: 767px){
    .sp-br{
        display: block;
    }
    .pc-hide{
        display: block!important;
    }
    .sp-hide{
        display: none!important;
    }
    body{
        font-size: 14px;
    }
    .wrapper{
        position: relative;
        left: 0;
        transition: left 0.2s ease;
    }
    .wrapper.nav-active{
        left: -221px;
    }
    .link-btn {
        font-size: 14px;
        width: 240px;
        padding: 16px 0;
    }
    header {
        height: 64px;
        padding: 0 20px;
    }
    header .logo {
        font-size: 22px;
        transform: translateY(1px);
    }
    .nav-btn{
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 20;
    }
    .nav-btn .bar{
        display: block;
        width: 24px;
        height: 3px;
        background: #333;
        position: absolute;
        top:50%;
        left: 8px;
        transition: all 0.2s ease;
    }
    header.wh .nav-btn .bar{
        background: #fff;
    }
    header.wh.active .nav-btn .bar {
        background: #333;
    }
    .nav-btn .bar-1{
        top: 10px;
    }
    .nav-btn .bar-2{
        top: 18px;
    }
    .nav-btn .bar-3{
        top: 26px;
    }
    .nav-btn.active .bar-1{
        top: 18px;
        transform: rotate(225deg);
    }
    .nav-btn.active .bar-2{
        opacity: 0;
    }
    .nav-btn.active .bar-3{
        top: 18px;
        transform: rotate(-225deg);
    }
    header nav{
        position: fixed;
        top: 0;
        right: -221px;
        bottom: 0;
        background: #333;
        padding: 40px 0 0 0;
        width: 221px;
        box-sizing: border-box;
        z-index: 10;
        transition: right 0.2s ease;
    }
    header nav.active{
        right: 0;
    }
    header nav li{
        display: block;
        margin: 24px 0 0;
        padding-left: 32px;
    }
    header nav li:first-child{
        margin-top: 0;
    }
    header nav li.box {
        margin-top: 32px;
        padding-top: 32px;
        border-top: solid 1px rgba(255,255,255,0.12);
    }
    nav li.box a,
    header.wh.active nav li.box a {
        color: #fff;
        background: #00c73c;
        border: none;
        padding: 12px 20px 11px;
    }
    header nav li a{
        color: #fff!important;
        display: inline-block;
    }
    .main-visual {
        padding: 100px 20px 0;
    }
    .main-visual .ttl-box {
        font-size: 36px;
    }
    .main-visual .ttl {
        margin-top: 12px;
    }
    .main-visual .device-img {
        margin-top: 30px;
    }
    .main-visual .device-img::before{
        width: 210px;
        height: 15px;
        margin-left: -105px;
        bottom: -7px;
    }
    .main-visual .device-img p{
        width: 210px;
        height: 429px;
    }
    .main-visual .device-img p span {
        width: 182px;
        top: 50px;
        left: 12px;
        border-width: 2px;
        border-radius: 2px;
    }
    .section {
        padding: 60px 20px;
    }
    .section.trial {
        padding-top: 20px;
        padding-bottom: 60px;
    }
    .section.price {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .section.logo .ttl-box {
        padding-left: 20px;
        padding-right: 20px;
    }
    .section .link-btn{
        margin-top: 30px;
    }
    .section .ttl {
        font-size: 24px;
    }
    .point{
        padding: 60px 20px;
    }
    .point-content {
        margin-top: 32px;
    }
    .point .ttl {
        font-size: 20px;
    }
    .point-content .content-box.img-wrap {
        height: 280px;
        padding: 30px 30px 0;
    }
    .point-content .content-box.comment-wrap {
        min-height: 200px;
        padding: 40px 20px;
    }
    .point-content .content-box.comment-wrap .comment-box + .comment-box {
        margin-top: 32px;
    }
    .point-content .content-box .comment-box .comment {
        font-size: 13px;
        border-radius: 20px;
        max-width: calc(100% - 58px);
        padding: 13px 16px 12px;
        border-radius: 12px;
    }
    .point-content .content-box .comment-box .comment::before {
        top:20px;
        left: -13px;
        width: 16px;
        height: 14px;
    }
    .point-content .content-box .comment-box.reverse .comment::before {
        right: -13px;
    }
    .point-content .content-box.img-wrap .screen-wrap {
        height: 231px;
    }
    .point-1 .point-content .content-box.img-wrap .screen-wrap {
        max-width: 260px;
    }
    .point-content .content-box.img-wrap .mes{
        font-size: 14px;
        margin-bottom: 20px;
    }
    .point-content .content-box.img-wrap .screen-img {
        width: 139px;
        height: 284px;
    }
    .point-1 .screen-img.screen-1 {
        top: 30px;
        left: 0;
    }
    .point-1 .screen-img.screen-2 {
        box-shadow: -10px 30px 16px rgba(0,0,0,0.2);
    }
    .point-content .content-box.img-wrap .img {
        width: 120px;
        top: 33px;
        left: 8px;
        border-width: 2px;
        border-radius: 2px;
    }
    .point-2 .point-content .content-box.img-wrap .screen-in-img .img {
        top: 35px;
        box-shadow: -10px 10px 16px rgba(0,0,0,0.2);
    }
    .point-2 .point-content .screen-in-img.in-img-1 .img {
        left: 50%;
        margin-left: -60px;
    }
    .point-3 .point-content .content-box.img-wrap {
        padding: 0 20px;
    }
    .point-3 .screen-img {
        bottom: 20px;
        margin-left: -69.5px;
    }
    .point-content .content-box .comment-box .img {
        margin-right: 16px;
    }
    .point-content .content-box .comment-box.reverse .img {
        margin-left: 16px;
    }
    .point-content .content-box .comment-box .img {
        margin-top: -18px;
        width: 40px;
        height: 40px;
    }
    .point-content .content-box .comment-box .img img {
        width: 40px;
        height: 40px;
    }
    .point-content .content-box .comment-box .time {
        font-size: 11px;
        top: -18px;
    }
    .performance-content {
        margin-top: 40px;
    }
    .logo-content {
        margin-top: 40px;
    }
    @keyframes loop {
        0% {transform: translateX(0);}
        100% {transform: translateX(-1026px);}
    }
    .logo-content ul {
        width: 1026px;
    }
    .logo-content li img {
        width: 171px;
        height: 77px;
    }
    .bottom-content .content-box .ttl {
        font-size: 20px;
    }
    .bottom-content .content-box .lead{
        font-size: 14px;
    }
    .bottom-content .content-box{
        padding: 60px 20px;
    }
    .bottom-content .content-box .link-btn{
        margin-top: 30px;
        background: #fff;
    }
    footer{
        display: block;
        height: auto;
        padding: 20px;
        text-align: right;
    }
    footer nav {
        text-align: left;
    }
    footer nav li {
        display: block;
        margin-top: 6px;
        margin-left: 0;
    }
    footer nav li:first-child {
        margin-top: 0;
    }
    footer nav li a {
        font-size: 12px;
    }
    footer .logo {
        margin-top: 40px;
    }
    footer .logo-mark {
        font-size: 22px;
    }
    footer .copyright {
        font-size: 11px;
    }
    .page-head {
        padding: 120px 20px 40px;
    }
    .page-head .in::before{
        display: none;
    }
    .page-head .ttl {
        font-size: 24px;
    }
    .breadcrumb {
        padding: 16px 20px;
    }
    .breadcrumb li{
        font-size: 12px;
    }
    .form{
        padding: 40px 20px 60px;
    }
    .form form{
        margin-top: 40px;
    }
    .form .link-btn{
        margin: 40px auto 0;
    }
    .form-content .ttl {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .form-content .lead {
        font-size: 14px;
    }
    .form-content.thanks .lead {
        text-align: left;
    }
    .form-content .note {
        font-size: 12px;
        margin-top: 12px;
        text-indent: -15.6px;
        padding-left: 15.6px;
    }
    .form-check {
        padding: 20px 0;
    }
    .form-check .form-check-list .form-item {
        margin-left: 20px;
    }
    .form-list .form-item {
        margin-bottom: 20px;
    }
    .form-check .title {
        font-size: 12px;
    }
    input[type=checkbox] + label::after, input[type=checkbox] + span::after {
        top: 3px;
    }
    .form-content p.validate-error{
        position: static;
    }
    .form-content label {
        display: inline-block;
        font-size: 12px;
    }
    .form-check .form-check-list .form-item label {
        font-size: 14px;
    }
    .form-submit .submit-check-block label {
        font-size: 14px;
    }
    .form-submit .submit-btn {
        font-size: 14px;
        width: 240px;
        padding: 16px 0;
        margin-top: 24px;
    }
    .form-submit .submit-link {
        font-size: 12px;
    }
    .form .loader{
        height: 40px;
    }
    .loader span{
        display: block;
        width: 40px;
        height: 40px;
    }
    .qr-wrap{
        display: block;
        margin-top: 40px;
    }
    .qr-box{
        width: 100%;
        padding: 40px;
    }
    .qr-box + .qr-box{
        margin-top: 20px;
    }
    .qr-box .img {
        width: 120px;
        height: 120px;
        border: none;
        border-radius: 20px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 3px 6px rgba(0,0,0,0.12);
    }
    .qr-box .img img{
        width: 60px;
        height: auto;
    }
    .qr-box .img.line img{
        width: 68px;
    }
    .qr-box .lead {
        font-size: 12px;
        margin-top: 20px;
        text-align: center!important;
    }
}

@media (max-width: 1024px){
.wrapper {
        width:100% !important;
}
}