@charset "utf-8";

/* CSS Document */


/*----------------------------------------------

　共通　

----------------------------------------------*/


/* 装飾  -------------------------------------------*/

.mt10 {
    margin-top: 10px;
}
.mt30 {
    margin-top: 30px;
}
.mt60 {
    margin-top: 60px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.px-50 {
    padding-left: 50px;
    padding-right: 50px;
}
.px-80 {
    padding-left: 80px;
    padding-right: 80px;
}
.px-100 {
    padding-left: 100px;
    padding-right: 100px;
}

.wd35 {
    width: 35%;
}
.wd40 {
    width: 40%;
}
.wd45 {
    width: 45%;
}
.wd50 {
    width: 50%;
}
.wd55 {
    width: 55%;
}
.wd30 {
    width: 30%;
}
.wd70 {
    width: 70%;
}
.bold {
    font-weight: bold;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
.sp-head {
    display: none;
}
.red {
	text-decoration:underline;
	color:#900;}

h1,
h2 {
    letter-spacing: 0.2rem;
}
.bg-white {
    background-color: rgba(255, 255, 255, 0.65);
    position: relative;
    z-index: 2;
}
@media screen and (max-width: 1720px) {
    .px-20,
    .px-30,
    .px-50,
    .px-80,
    .px-100 {
        padding-left: 0px;
        padding-right: 0px;
    }
}


@media screen and (max-width:768px) {
    .mt10,
    .mt30,
    .mt60 {
        margin-top: 10px;
    }
    .right {
        text-align: center;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .sp-head {
        display: block;
        text-align: right;
        padding: 4vw 4vw 0 0;
        float: right;
        width: 40%;
    }
    .sp-head a {
        display: inline-block;
        padding: 1.25em 2.5em;
        font-size: 2vw;
        text-decoration: none;
        border-radius: 30px;
        transition: .4s;
        font-weight: bold;
        box-shadow: 2px 2px 6px rgba(51,51,51,.2);
        color: #FFF;
        background: linear-gradient(to right,#E29EA9 , #d82144);
    }
    .sp-mt30 {
        margin-top: 30px;
    }
}



/* エフェクト  -------------------------------------------*/

.effect {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha( opacity=0 )";
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -webkit-transition: 1.0s ease-out;
    -moz-transition: 1.0s ease-out;
    transition: 1.0s ease-out;
}
.effect.start {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha( opacity=100 )";
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
}

/* 2Col  -------------------------------------------*/

.col_2,
.col_3,
.col_2-kv,
.col_2-around,
.col_2-Company,
.col_2-Security {
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    /* IE10 */
}
.col_2,
.col_3,
.col_2-kv,
.col_2-Company,
.col_2-Security {
    justify-content: space-between;
}
.col_2-kv {
    align-items: top;
    padding: 0 4.2%;
}
.col_2 {
    align-items: center;
}
.col_2-around {
    justify-content: space-around;
}
.col_2 > div {}
.col_3 > div {
    width: 32.5%
}
.Experience-Contents .col_2 > div {
    width: 50%;
}
.col_2 > div img,
.col_2-kv > div img,
.col_2-between > div img,
.col_2 > div img {
    max-width: 100%;
}
@media screen and (max-width: 800px){
    .Experience-Contents .col_2 > div {
        width: 51%;
    }
}
@media screen and (max-width: 768px) {
    .Experience-Contents .col_2 > div,
    .col_2-Security > div,
    .Experience-Contents .col_2 > div.Experience-btn {
        width: 100%;
    }
    .col_2-Company > div {
        width: 100%;
    }
    .col_2 > div,
    .col_3 > div,
    .col_2-between > div,
    .col_2-around > div {
        width: 100%;
    }
    .col_2 > div.tags{
        width: 91%;
    }
    .col_3 > div {
        margin-bottom: 30px;
    }
    .BusinesChat-Contents .col_2 > div {
        text-align: center;
    }
    .Plan-Contents .col_3 > div {
        width: 92%;
        margin: 0 auto 2vw;
        padding: 5vw 3vw 8vw;
    }
}



/* ---- particles.js container ---- */

#particles-js,
#particles-js02 {
    width: 100%;
    /*background-color: #fdd;*/
    background-image: url('');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    z-index: 1;
}
#particles-js {
    height: 100%;
}
#particles-js02 {
    height: 100%;
    height: 100%;
}






/*----------------------------------------------

　コンテンツ　

----------------------------------------------*/


/* 以下共通  -------------------------------------------*/

.Experience-Contents,
.Basic-Contents,
.Solution-Contents,
.GenerativeAI-Contents,
.BusinesChat-Contents,
.Plan-Contents,
.Comparison-Contents,
.Contact-Contents,
.Company-Contents,
.Security-Contents {
    max-width: 1720px;
    width: 78%;
    margin: 0 auto;
    padding-top: 8%;
    padding-bottom: 8%;
}
.Solution-Contents{
    padding: 5.4% 0 4%;
}
.GenerativeAI-Contents,
.BusinesChat-Contents{
    padding: 6.2% 0 1%;
}

.Security-Contents {
    max-width: 1650px;
    width: 87%;
    margin: 0 auto;
    padding-top: 6vw;
    padding-bottom: 2.2vw;
}
.Introduction-Contents {
    margin: 0 auto;
    /*padding-top: 6vw;*/
    /*padding-bottom: 2.2vw;*/
}
.Plan-Contents{
    padding: 4.2vw 0;
    width: 81%;
}
.Comparison-Contents{
    width: 81.7%;
}
.Experience-Contents {
    color: #FFF;
    padding: 3.4% 0;
}
.Scenes-Contents {
    background-color: #ebecee;
}
.Merit-Contents {
    max-width: 1280px;
    width: 68%;
    margin: 0 auto;
    padding: 6.1vw 0 8.4vw;
}
.Merit-Contents {
    position: relative;
}
.Company-Contents{
    width: 80%;
}
.Experience-Contents p {
    font-size: 1.2vw;
}

.Contact-Contents p {
    font-size: 1.3vw;
}


.Merit-Contents h2,
.Scenes-Contents h2,
.Basic-Contents h2,
.GenerativeAI-Contents h2,
.BusinesChat-Contents h2,
.Security-Contents h2,
.Introduction-Contents h2,
.Case-Contents h2,
.Plan-Contents h2,
.Comparison-Contents h2,
.Contact-Contents h2 {
    font-size: 2.9vw;
    padding-bottom: 5.3vw;
    text-align: center;
}
.Scenes-Contents h2{
    padding-bottom: .7vw;
}
.Basic-Contents h2{
    padding-bottom: 1vw;
}
.GenerativeAI-Contents h2,
.BusinesChat-Contents h2{
    padding-bottom: 1.6vw;
}
.Security-Contents h2{
    padding-bottom: 1.6vw;
}
.Introduction-Contents h2{
    padding-bottom: 1.6vw;
}
.Case-Contents h2{
    padding-bottom: .7vw;
}
.Plan-Contents h2{
    padding-bottom: 1.6vw;
}
.Comparison-Contents h2{
    padding-bottom: 3vw;
}
.Contact-Contents h2{
    padding-bottom: 1.3vw;
}
.Experience-Contents .Experience-txt h2 {
    font-size: 2vw;
    font-weight: normal;
    padding-bottom: 30px;
    letter-spacing: 4px;
}

.Merit-Contents h2 span,
.Scenes-Contents h2 span,
.Basic-Contents h2 span,
.GenerativeAI-Contents h2 span,
.BusinesChat-Contents h2 span,
.Security-Contents h2 span,
.Introduction-Contents h2 span,
.Case-Contents h2 span,
.Plan-Contents h2 span,
.Comparison-Contents h2 span,
.Contact-Contents h2 span {
    font-size: 2.2vw;
    display: block;
    color: #0f7ccf;
}

@media screen and (max-width:768px) {

    .Experience-Contents,
    .GenerativeAI-Contents,
    .BusinesChat-Contents,
    .Solution-Contents,
    .Company-Contents,
    .Comparison-Contents {
        width: 90%;
        margin: 0 5%;
        padding-bottom: 20%;
    }
    .Basic-Contents {
        width: 90%;
        margin: 0 5%;
        padding: 14vw 0 7vw;
    }
    .GenerativeAI-Contents,
    .BusinesChat-Contents{
        padding: 14vw 0px 1%;
    }
    .Plan-Contents,
    .Security-Contents,
    .Introduction-Contents {
        padding-bottom: 0;
    }

    .Solution-Contents {
        width: 95%;
        margin: 0 auto;
        padding-bottom: 10%;
        padding-top: 10%;
    }

    .Experience-Contents {
        padding: 12vw 0;
        margin: 0 auto;
        width: 94%;
    }

    .Merit-Contents {
        padding: 20vw 0 16vw;
    }
    .Contact-Contents{
        width: 100%;
        padding: 13vw 0 7vw;
    }

    .Experience-Contents p {
        font-size: 2.8vw;
        text-align: center;
    }
    .Contact-Contents p {
        font-size: 3.5vw;
    }


    .Merit-Contents h2,
    .Scenes-Contents h2,
    .Basic-Contents h2,
    .GenerativeAI-Contents h2,
    .BusinesChat-Contents h2,
    .Security-Contents h2,
    .Introduction-Contents h2,
    .Case-Contents h2,
    .Plan-Contents h2,
    .Comparison-Contents h2,
    .Contact-Contents h2 {
        font-size: 7.5vw;
    }

    .Merit-Contents h2 span,
    .Scenes-Contents h2 span,
    .Basic-Contents h2 span,
    .GenerativeAI-Contents h2 span,
    .BusinesChat-Contents h2 span,
    .Security-Contents h2 span,
    .Introduction-Contents h2 span,
    .Case-Contents h2 span,
    .Plan-Contents h2 span,
    .Comparison-Contents h2 span,
    .Contact-Contents h2 span {
        font-size: 5.5vw;
    }
    .Merit-Contents h2{
         padding-bottom: 10vw;
    }
    .Contact-Contents h2{
        padding-bottom: 3.3vw;
    }
}




/*----------------------------------------------

　KV　

----------------------------------------------*/

.Main-Contents {}
.kv-Container {
    max-width: 1720px;
    width: 85%;
    margin: 0 auto;
    padding-top: 7%;
    position: relative;
    z-index: 2;
}
.Main-Catch {
    width: 60%;
    padding-bottom: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}
@-moz-document url-prefix() {
  .Main-Catch{
    width: 62%;
  }
}
@media all and (-ms-high-contrast: none) {
  .Main-Catch{
    width: 65%;
  }
}
.Main-img {
    width: 24%;
}
.Main-img img{
    width: 78%;
    aspect-ratio: 125 / 242;
}


.kv .kv-Container h1 {
    font-size: 4.25em;
    color: #00336E;
    font-weight: normal;
    padding-top: 1.2vw;
}
.kv .kv-Container h1 span {
    font-size: 5.85rem;
    font-weight: bold;
    color: #00336E;
    display: block;
}
.kv .kv-Container h1 img.pc {
    max-width: 90%;
    width: 100%;
    aspect-ratio: 985 / 224;
}
.kv .kv-Container h1 img.sp {
    aspect-ratio: 637 / 305;
}

/* 特徴 */

.kv .kv-Container ul {
    margin: 2% 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.kv .kv-Container ul li {
    width: 100%;
    margin: 5px 0;
    font-size: 1.6vw;
    padding-left: 14.3%;
    line-height: 1.6em;
}
.kv .kv-Container ul li span{
    letter-spacing: 3px;
}

.webp .kv .kv-Container ul li.step1 {
    background: url(../img/bg-tokutyo01.webp) left 0px center no-repeat;
    background-size: 11.2%;
}
.no-webp .kv .kv-Container ul li.step1 {
    background: url(../img/bg-tokutyo01.png) left 0px center no-repeat;
    background-size: 11.2%;
}
.webp .kv .kv-Container ul li.step2 {
    background: url(../img/bg-tokutyo02.webp) left 0px center no-repeat;
    background-size: 11.2%;
}
.no-webp .kv .kv-Container ul li.step2 {
    background: url(../img/bg-tokutyo02.png) left 0px center no-repeat;
    background-size: 11.2%;
}
.webp .kv .kv-Container ul li.step3 {
    background: url(../img/bg-tokutyo03.webp) left 0px center no-repeat;
    background-size: 11.2%;
}
.no-webp .kv .kv-Container ul li.step3 {
    background: url(../img/bg-tokutyo03.png) left 0px center no-repeat;
    background-size: 11.2%;
}
.kv .kv-Container .contact-link-area {
    display: flex;
}
.kv .kv-Container .contact-link {
    text-align: center;
    margin: 1% 0;
    width: 100%;
}
.kv .kv-Container .contact-link:first-child {
    margin: auto;
}
.kv .kv-Container .contact-link a {
    display: inline-block;
    font-size: 1.4vw;
    font-weight: bold;
    border-radius: 40px;
    transition: .2s;
    padding: 3% 15%;
    box-shadow: 2px 2px 6px rgba(51,51,51,.2);
}
.kv .kv-Container .contact-link a:hover{
    box-shadow: 2px 2px 6px rgba(51,51,51,.8);
}
.kv .kv-Container .contact-link a.document-link {
    color: #fff;
    background: linear-gradient(to right,#E29EA9 , #d82144);
}
.kv .kv-Container .contact-link a.trial-link {
    color: #fff;
    background: linear-gradient(to right,#0f53a5 , #003470);
}
.kv .kv-Container .contact-link.pc a.trial-link {
    margin: 0.5rem 0;
    padding: 2.5% 5.5%;
    font-size: 1vw;
    white-space: nowrap;
}
.kv .kv-Container .contact-link.pc a.trial-link.interactive-demo {
    color: #003470;
    background: #fff;
    border: 2px solid #003470;
    padding: 2% 8%;
}
.kv .kv-Container .contact-link a .micro-copy {
    font-size: .7vw;
}
.kv .kv-Container .contact-link a.document-link .micro-copy {
    border-top: 1px solid #fff;
}
.kv .kv-Container .contact-link a.trial-link .micro-copy {
    border-top: 1px solid #fff;
}
.scroll {
    text-align: center;
    font-size: .8vw;
	z-index: 0;
    margin-top: -1vw;
}
.kv-scroll {
    width: 100%;
    margin: auto;
    z-index: 10;
}
.scroll-text {
    opacity: 0.9;
}
.kv-scroll img{
    height: 32px;
}

@media screen and (max-width: 1400px){
    .Main-Catch{
        width: 66%;
        max-width: 674px;
    }
}
@media screen and (max-width: 768px) {
    .col_2-kv {
        padding: 0;
    }
    .kv-Container{
        width: 80%;
    }
    .Main-img {
        width: 0%;
    }
    .sp-mt60 {
        margin-top: 6vw;
        margin-bottom: 4vw
    }
    .sp-mt60 img{
        width: 40.6%;
        aspect-ratio: 245 / 493;
    }

    .kv .kv-Container h1 {
        padding-top: 14vw;
    }

    .Main-Catch {
        width: 100%;
        padding-right: 0px;
        padding-bottom: 0px;
    }
    .kv .kv-Container ul{
        margin: 0;
    }

    .kv .kv-Container ul li {
        font-size: 6vw;
        line-height: 1.3em;
        padding-left: 21.8vw;
        margin-bottom: 4vw;
    }

    .webp .kv .kv-Container ul li.step1 {
        background: url(../img/bg-tokutyo01-sp.webp) left 0px top 1rem no-repeat;
        background-size: 21.5%;
    }
    .no-webp .kv .kv-Container ul li.step1 {
        background: url(../img/bg-tokutyo01-sp.png) left 0px top 1rem no-repeat;
        background-size: 21.5%;
    }
    .webp .kv .kv-Container ul li.step2 {
        background: url(../img/bg-tokutyo02-sp.webp) left 0px top 1rem no-repeat;
        background-size: 21.5%;
    }
    .no-webp .kv .kv-Container ul li.step2 {
        background: url(../img/bg-tokutyo02-sp.png) left 0px top 1rem no-repeat;
        background-size: 21.5%;
    }
    .webp .kv .kv-Container ul li.step3 {
        background: url(../img/bg-tokutyo03-sp.webp) left 0px top 1rem no-repeat;
        background-size: 21.5%;
    }
    .no-webp .kv .kv-Container ul li.step3 {
        background: url(../img/bg-tokutyo03-sp.png) left 0px top 1rem no-repeat;
        background-size: 21.5%;
    }

    .kv .kv-Container .contact-link-area {
        display: block;
    }
    .kv .kv-Container .contact-link {
        text-align: center;
        margin: 4% 0!important;
    }
    .kv .kv-Container .contact-link a {
        font-size: 3vw;
    }
    .kv .kv-Container .contact-link a .micro-copy {
        font-size: 1.5vw;
    }

    .scroll {
        text-align: center;
        font-size: 2.0vw;
    }
    .kv-scroll img{
        width: 3px;
        height: 4vw;
    }
}
@media screen and (max-width: 480px){
    .kv-Container{
        width: 82%;
    }
}



/*----------------------------------------------

　コンテンツ　

----------------------------------------------*/


/* 無料体験  -------------------------------------------*/

.Experience {
    width: 100%;
    height: auto;
    z-index: 2;
    position: relative;
}
.webp .Experience {
    background: url(../img/cv-area-bg.webp) left 0px top 0px no-repeat;
    background-size: cover;
}
.no-webp .Experience {
    background: url(../img/cv-area-bg.png) left 0px top 0px no-repeat;
    background-size: cover;
}
.Experience-txt p {
    line-height: 1.6em;
}
.Experience-Contents .col_2 > div.Experience-btn {
    text-align: right;
    width: 43.7%;
}
.Experience-Contents .col_2 > div.Experience-btn a {
    display: inline-block;
    font-size: 2vw;
    font-weight: bold;
    border-radius: 75px;
    transition: all 0.2s ease 0s;
    padding: 5% 20%;
    color: #fff;
    background: linear-gradient(to right,#E29EA9 , #d82144);
    box-shadow: 2px 2px 6px rgba(51,51,51,.2);
}
.Experience-Contents .col_2 > div.Experience-btn a:hover {
    opacity: 0.9;
    box-shadow: 2px 2px 6px rgba(51,51,51,.8);
}
.Experience-Contents .col_2 > div.Experience-btn a .micro-copy {
    font-size: 1vw;
    border-top: 1px solid #fff;
    text-align: center;
}



@media screen and (max-width: 768px) {
    .webp .Experience,
    .no-webp .Experience{
        background-position-x: 50%;
    }
    .Experience-Contents .Experience-txt h2 {
        font-size: 4.8vw;
        text-align: center;
    }
    .Experience-btn {
        margin-top: 10%;
    }
    .Experience-Contents .col_2 > div.Experience-btn {
        text-align: center;
    }
    .Experience-Contents .col_2 > div.Experience-btn a {
        font-size: 4.5vw;
    }
    .Experience-Contents .col_2 > div.Experience-btn a .micro-copy {
        font-size: 2.25vw;
    }
    .Experience-Contents .col_2 > div.Experience-btn{
        width: 100%;
    }
}


/*@media screen and (max-width: 480px) {
	.Experience-Contents .Experience-txt h1 {
		font-size: 2.0vw;}
	.Experience-txt p {
		line-height: 1.5rem;
	}
	.Experience-Contents .Experience-txt {
        text-align: left;
    }
	.Experience-btn img {
		width: 80%;
		margin:0 auto;}
}*/


/* 悩み事  -------------------------------------------*/

.Troubles {
    position: relative;
    z-index: 2;
}
.webp .Troubles {
    background: url(../img/bg-Troubles.webp) left top no-repeat;
    background-size: cover;
}
.no-webp .Troubles {
    background: url(../img/bg-Troubles.jpg) left top no-repeat;
    background-size: cover;
}
.Troubles-Contents {
    padding: 5vw 0 70px 0;
}
.Troubles-Contents-wrap {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2.5vw 0 1vw 7vw;
    margin-left: 39.5%;
}
.Troubles-Contents-wrap .bold {
    color: #01336E;
}
.Troubles-Contents-wrap h2 {
    font-size: 2.3vw;
    color: #333;
    font-weight: 500;
}
.Troubles-Contents-wrap ul {
    margin: 50px 0 0;
    color: #01336E;
}
.Troubles-Contents-wrap ul li.Check {
    margin: 40px 0;
    font-size: 1.8vw;
    padding-left: 7.5%;
    line-height: 1.35em;
    /*height: 100px;*/
    letter-spacing: 3px;
}
.webp .Troubles-Contents-wrap ul li.Check {
    background: url(../img/checkbox.webp) left 10% no-repeat;
    background-size: 4%;
}
.no-webp .Troubles-Contents-wrap ul li.Check {
    background: url(../img/checkbox.png) left 10% no-repeat;
    background-size: 4%;
}
.Troubles-Contents-wrap ul li.Check:last-child {
    height: 100px;
    margin-bottom: 0;
}

@media screen and (max-width:768px) {
    .webp .Troubles {
        background: url(../img/bg-Troubles-sp.webp) center top 0px no-repeat;
        background-size: contain;
    }
    .no-webp .Troubles {
        background: url(../img/bg-Troubles-sp.png) center top 0px no-repeat;
        background-size: contain;
    }
    .Troubles-Contents {
        padding: 55% 0 0 0;
    }
    .Troubles-Contents-wrap {
        margin-left: 2%;
        margin-right: 2%;
        padding: 6vw 0px 0 7vw;
    }
    .Troubles-Contents-wrap h2 {
        font-size: 4.5vw;
        margin-bottom: 5vw;
    }
    .Troubles-Contents-wrap ul{
         margin: 0;
    }
    .Troubles-Contents-wrap ul li.Check {
        font-size: 3.8vw;
        margin: 4vw 0;
    }
    .webp .Troubles-Contents-wrap ul li.Check,
    .no-webp .Troubles-Contents-wrap ul li.Check {
        background-size: 4.0vw;
    }
    .Troubles-Contents-wrap ul li.Check:last-child{
        height: 11vw;
    }
}




/* 悩み事(解決)-------------------------------------------*/

.Solution-Contents h2 {
    text-align: center;
    font-size: 2.4vw;
    line-height: 2em;
    font-weight: normal;
    line-height: 1.7;
}
.Solution-Contents .bold {
    font-weight: bold;
}
.Solution-Contents h2 img {
    vertical-align: bottom;
}
.Solution-Contents-Wrap {
    padding: 30px 0;
    font-size: 1.6vw;
    color: #00336e;
}
.Solution-Contents h2 img {
    width: 14%;
    aspect-ratio: 208 / 121;
    vertical-align: baseline;
    margin-right: 12px;
}
.Solution-Contents-Wrap .large {
    font-size: 1.2vw;
}
.tags {
    position: relative;
    display: inline-block;
    margin: 3% 5% 3% 0;
    padding: 2.0% 1.0rem 2.0% 7%;
    /*min-height: 170px;
    height: auto;*/
    width: 47%;
    background: #FFF;
    border: solid 1px #00336e;
    border-right: none;
    box-sizing: border-box;
}
.webp .tags {
    background: url(../img/checkbox.webp) left 5% top 32% no-repeat;
    background-size: 6%;
}
.no-webp .tags {
    background: url(../img/checkbox.png) left 5% top 32% no-repeat;
    background-size: 6%;
}
.Solution-Contents-Wrap .tags {
    position: relative;
}
.tags-icon {
    position: absolute;
    top: 0;
    left: 100%;
    object-fit: cover;
    height: 100%;
    width: auto;
}

.tags-answer-01,
.tags-answer-02,
.tags-answer-03 {
    position: relative;
    display: inline-block;
    padding: 2.0% 0 2.0% 13.5%;
    width: 48%;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 2vw;
    letter-spacing: 3px;
    line-height: 1.7;
}

.tags-answer-01 .large,
.tags-answer-02 .large,
.tags-answer-03 .large {
    font-size: 1.35em;
}
.webp .tags-answer-01 {
    background: url(../img/tags-answer-01.webp) left 0px center no-repeat;
    background-size: 24%;
}
.no-webp .tags-answer-01 {
    background: url(../img/tags-answer-01.png) left 0px center no-repeat;
    background-size: 24%;
}
.webp .tags-answer-02 {
    background: url(../img/tags-answer-02.webp) left 0px center no-repeat;
    background-size: 24%;
}
.no-webp .tags-answer-02 {
    background: url(../img/tags-answer-02.png) left 0px center no-repeat;
    background-size: 24%;
}
.webp .tags-answer-03 {
    background: url(../img/tags-answer-03.webp) left 0px center no-repeat;
    background-size: 24%;
}
.no-webp .tags-answer-03 {
    background: url(../img/tags-answer-03.png) left 0px center no-repeat;
    background-size: 24%;
}
@media screen and (max-width: 1200px){
    .tags-answer-01,
    .tags-answer-02,
    .tags-answer-03{
        width: 50%;
    }
    .tags{
        width: 44%;
    }
}
@media screen and (max-width: 768px) {
    .Solution-Contents-Wrap {
        padding: 30px 0 0 0;
    }
    .Solution > div {
        width: 100%;
    }
    .Solution-Contents h2 img {
        width: 30%;
    }
    .Solution-Contents h2 {
        font-size: 5.5vw;
    }
    .tags {
        padding: 4vw 0vw 10vw 16vw;
        border: solid 0px #00336e;
        margin: 0 auto;
        font-size: 3.5vw;
        width: 91%;
    }
    .webp .tags {
        background: url(../img/bg-tags-sp.webp) left 0px top 0px no-repeat;
        background-size: contain;
    }
    .no-webp .tags {
        background: url(../img/bg-tags-sp.png) left 0px top 0px no-repeat;
        background-size: contain;
    }

    .tags-answer-01,
    .tags-answer-02,
    .tags-answer-03 {
        margin: 0 auto;
        padding: 5% 10px 5% 30%;
        margin-bottom: 5%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        font-size: 4.5vw;
    }
    .webp .tags-answer-01,
    .webp .tags-answer-02,
    .webp .tags-answer-03,
    .no-webp .tags-answer-01,
    .no-webp .tags-answer-02,
    .no-webp .tags-answer-03{
        background-size: 23%;
        background-position: left 10px center;
    }
    .tags:before,
    .tags:after {
        display: none;
    }
    .Solution-Contents-Wrap {
        font-size: 4vw;
    }
}
@media screen and (max-width: 480px){
    .tags-answer-01,
    .tags-answer-02,
    .tags-answer-03{
        padding-right: 0;
    }
}



/* さっとFAQの特徴  -------------------------------------------*/

.Merit {
    width: 100%;
    position: relative;
}
.Merit-Contents h2{
    background-color: #fff;
    position: relative;
    z-index: 2;
}
.Merit-txt {
    text-align: center;
    font-size: 1.5vw;
    background-color: #FFF;
    z-index: 2;
}

.Merit-Contents .col_3 {
    background-color: #FFF;
    z-index: 2;
    width: 90%;
    margin: 0 auto;
}
.Merit-Contents .Merit-txt h3 {
    padding-bottom: 30px;
    font-size: 2vw;
}
.Merit-Contents .Merit-txt h3 span {
    display: block;
    color: #0E7ACE;
    font-size: 1.8vw;
}
.Merit-Contents .demo-btn {
    position: relative;
    background: #fff;
    text-align: center;
    padding: 7rem 0;
    z-index: 2;
}
.Merit-Contents .demo-btn a {
    display: inline-block;
    width: 430px;
    height: 80px;
    font-size: 1.4vw;
    font-weight: bold;
    line-height: 80px;
    color: #fff;
    background: #00336e;
    border-radius: 40px;
    transition: .2s;
}
.Merit-Contents .demo-btn a:hover {
    opacity: 0.7;
}
@media screen and (max-width:1250px) {
    .Merit .pc {
        display: none;
    }
}
@media screen and (max-width:768px) {
    .Merit-txt {
        padding-top: 30px;
        font-size: 4.0vw;
    }
    .Merit-Contents .Merit-txt h3{
        font-size: 5.6vw;
        padding-bottom: 3vw;
    }
    .Merit-Contents .Merit-txt h3 span {
        font-size: 4.5vw;
    }
    .Merit .pc {
        display: block;
    }
    .Merit-Contents .demo-btn a {
        font-size: 3.25vw;
        width: 90%;
    }
}
@media screen and (max-width: 480px){
    .Merit-Contents .demo-btn a {
        height: 60px;
        line-height: 60px;
    }
}


/* こんなシーンで利用されています  -------------------------------------------*/

.Scenes {
    width: 100%;
    background-color: #ebecee;
    position: relative;
}
.Scenes-Contents {
    width: 100%;
    margin: 0 auto;
    padding: 4vw 0 4.4vw;
}
.Scenes .Scenes-Contents img {
    aspect-ratio: 704 / 449;
}

/* Slider */

.Scenes-Contents .Slide-Wrap {
    width: 100%;
}
.Scenes-Contents .Slide-Wrap .box {
    border-radius: 10px;
    border: 1px solid #eaeaea;
    background-color: #FFF;
    padding: 4%;
    margin: 0 60px 60px 60px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .3);
}
.Scenes-Contents .Slide-Wrap .box h3 {
    color: #00336E;
    font-size: 1.8vw;
    padding: 0px 0 10px;
}
.Scenes-Contents .Slide-Wrap .wd40 p {
    font-size: 1.25vw;
    line-height: 1.75em;
}
.Scenes-Contents .Slider {
    margin: 50px 0;
}
.Scenes-Contents .Slider img {
    width: 100%;
    height: auto;
}
.Scenes-Contents .Slider .slick-next {
    right: 20px;
    z-index: 99;
}
.Scenes-Contents .Slider .slick-prev {
    left: 15px;
    z-index: 100;
}
.Scenes-Contents button.slick-arrow{
    width: 5vw;
    height: 5vw;
}
.Scenes-Contents button.slick-prev.slick-arrow {
    position: absolute;
    left: 10%;
    top: 40%;
}
.webp .Scenes-Contents button.slick-prev.slick-arrow {
    background: url(../img/prev.webp) left 0px top 15px no-repeat;
    background-size: 80%;
}
.no-webp .Scenes-Contents button.slick-prev.slick-arrow {
    background: url(../img/prev.png) left 0px top 15px no-repeat;
    background-size: 80%;
}
.Scenes-Contents button.slick-next.slick-arrow {
    position: absolute;
    right: 10%;
    top: 40%;
}
.webp .Scenes-Contents button.slick-next.slick-arrow {
    background: url(../img/next.webp) right 0px top 15px no-repeat;
    background-size: 80%;
}
.no-webp .Scenes-Contents button.slick-next.slick-arrow {
    background: url(../img/next.png) right 0px top 15px no-repeat;
    background-size: 80%;
}
.Scenes-Contents .slick-dots li button{
    width: 1.2vw;
    height: 1.2vw;
}
@media screen and (max-width: 1600px){
    .Scenes-Contents button.slick-prev.slick-arrow{
        left: 12%;
    }
    .Scenes-Contents button.slick-next.slick-arrow{
        right: 12%;
    }
}
@media screen and (max-width: 1200px){
    .Scenes-Contents button.slick-arrow{
        width: 8vw;
        height: 8vw;
    }
    .webp .Scenes-Contents button.slick-prev.slick-arrow,
    .no-webp .Scenes-Contents button.slick-prev.slick-arrow{
        background-size: 70%;
    }
    .webp .Scenes-Contents button.slick-next.slick-arrow,
    .no-webp .Scenes-Contents button.slick-next.slick-arrow{
        background-size: 70%;
    }
}
@media screen and (max-width: 900px){
    .Scenes-Contents button.slick-prev.slick-arrow{
        left: 15%;
    }
    .Scenes-Contents button.slick-next.slick-arrow{
        right: 15%;
    }
}
@media screen and (max-width: 768px) {
    .Scenes-Contents .slick-track{
        padding: 5px 0 20px;
    }
    .Scenes-Contents .slick-dots{
         bottom: -8vw;
    }
    .Scenes-Contents .Slide-Wrap .box {
        padding: 5% 10%;
		margin:0 10%;
        border-radius: 22px;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
    }
    .Scenes-Contents .Slide-Wrap .box h3 {
        font-size: 4.5vw;
        padding: 30px 0 10px;
        text-align: center;
    }
    .Scenes-Contents{
        padding: 14vw 0;
    }
    .Scenes-Contents .pc-sp,
    .Scenes-Contents .pc {
        display: block;
    }
    .Scenes-Contents .Slide-Wrap .wd40 p {
        font-size: 3.25vw;
    }
    .Scenes-Contents button.slick-arrow{
        width: 14vw;
        height: 14vw;
    }
    .Scenes-Contents button.slick-prev.slick-arrow {
        left: 3%;
    }
    .Scenes-Contents button.slick-next.slick-arrow {
        right: 3%;

    }
}
@media screen and (max-width: 480px){
    .Scenes-Contents .slick-dots{
         bottom: -10vw;
    }
}



/* さっとFAQの基本機能をご紹介  -------------------------------------------*/

.Basic {
    width: 100%;
    position: relative;
}
.Basic p {
    font-size: 1.5vw;
}
.Basic-txt {
    width: 50%;
	padding: 3.5% 5% 0;
    box-sizing: border-box;
}
.Basic-txt p {
    font-size: 1.25vw;
}
.Basic-txt h3 {
    color: #00336E;
    font-size: 1.8vw;
    padding-bottom: 30px;
}
.Basic-txt h3 span {
    display: block;
    color: #0E7ACE;
    font-size: 4.6vw;
}
.Basic .Basic-Contents img{
    aspect-ratio: 863 / 549;
}

@media screen and (max-width: 768px) {
    .Basic-txt {
        padding: 1vw 0px;
    }

    .Basic-txt h3 {
        font-size: 5.5vw;
    }

    .Basic-txt h3 span {
        font-size: 12.0vw;
    }
    .Basic-txt p {
        font-size: 3.25vw;
    }
    .Basic-Contents .mt30{
        margin-top: 5vw;
    }
}

/* 生成AIで会話データを簡単作成  -------------------------------------------*/

.GenerativeAI {
    width: 100%;
    position: relative;
}
.GenerativeAI p {
    font-size: 1.3vw;
    padding-bottom: 4.2vw;
}
.GenerativeAI p.small {
    text-align: right;
    font-size: 0.9vw;
    padding: 0 10px;
    margin-top: 1vw;
}
.GenerativeAI .GenerativeAI-Contents .image-area {
    display: flex;
    align-items: center;
    justify-content: center;
}
.GenerativeAI .GenerativeAI-Contents .image-area .file-img {
    width: 40%;
    text-align: right;
}
.GenerativeAI .GenerativeAI-Contents .image-area .file-img img {
    width: 60%;
    aspect-ratio: 160 / 147;
}
.GenerativeAI .GenerativeAI-Contents .image-area .arrow-img {
    width: 5%;
    padding: 5%;
}
.GenerativeAI .GenerativeAI-Contents .image-area .arrow-img img {
    aspect-ratio: 39 / 73;
}
.GenerativeAI .GenerativeAI-Contents .image-area .scenario-img {
    width: 50%;
}
.GenerativeAI .GenerativeAI-Contents .image-area .scenario-img img {
    aspect-ratio: 286 / 191;
}
@media screen and (max-width: 768px) {

    .GenerativeAI p {
        font-size: 3.25vw;
    }
    .GenerativeAI p.small {
        text-align: center;
        font-size: 1.5vw;
        margin-top: 3vw;
    }
    .GenerativeAI .GenerativeAI-Contents .image-area {
        display: block;
    }
    .GenerativeAI .GenerativeAI-Contents .image-area .file-img,
    .GenerativeAI .GenerativeAI-Contents .image-area .arrow-img,
    .GenerativeAI .GenerativeAI-Contents .image-area .scenario-img {
        margin: 0 auto;
    }
    .GenerativeAI .GenerativeAI-Contents .image-area .file-img {
        width: 80%;
        text-align: center;
    }
    .GenerativeAI .GenerativeAI-Contents .image-area .arrow-img {
        width: 7%;
    }
    .GenerativeAI .GenerativeAI-Contents .image-area .arrow-img img {
        transform: rotate(90deg);
    }
    .GenerativeAI .GenerativeAI-Contents .image-area .scenario-img {
        width: 95%;
    }

}


/* ビジネスチャット連携に対応  -------------------------------------------*/

.BusinesChat {
    width: 100%;
    position: relative;
}
.BusinesChat p {
    font-size: 1.3vw;
    padding-bottom: 4.2vw;
}
.BusinesChat .BusinesChat-Contents .pc img {
    aspect-ratio: 742 / 445;
}
.BusinesChat .BusinesChat-Contents .sp img {
    aspect-ratio: 366 / 245;
}
@media screen and (max-width: 768px) {

    .BusinesChat p {
        font-size: 3.25vw;
    }
}

/* 安心のセキュリティ・運用基盤  -------------------------------------------*/

.Security {
    width: 100%;
    position: relative;
}
.Security p {
    font-size: 1.3vw;
}
.Security-Contents h3 {
    display: inline-block;
    font-size: 2.8vw;
    color: #00336E;
}
.Security-Contents h3.sec01,
.Security-Contents h3.sec02 {
    width: 80%;
    margin: 3.5vw 0 1vw;
    position: relative;
}
.Security-Contents h3:before,
.Security-Contents h3:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    max-width: 63px;
    width: 3vw;
    height: 2px;
    background-color: black;
}
.Security-Contents h3:before {
    left: 0;
}
.Security-Contents h3:after {
    right: 0;
}
.col_2-Security{
    width: 91%;
    margin: 0 auto;
}
.Security-Contents dl {
    text-align: left;
    padding: 3.3vw 0
}
.Security-Contents dt {
    font-size: 2vw;
    font-weight: bold;
    color: #00336e;
    padding-left: 8%;
    line-height: 1.6em;
    margin-bottom: .4vw;
}
.webp .Security-Contents dt {
    background: url(../img/icon-Security.webp) left 0px center no-repeat;
    background-size: 5%;
}
.no-webp .Security-Contents dt {
    background: url(../img/icon-Security.png) left 0px center no-repeat;
    background-size: 5%;
}
.Security-Contents dd {
    padding-bottom: 10%;
    font-size: 1.4vw;
}
.Security .Security-Contents img {
    aspect-ratio: 676 / 407;
}

@media screen and (max-width: 768px) {
    .Security-Contents{
        width: 94%;
        padding-bottom: 4vw;
    }

    .Security p {
        font-size: 3.6vw;
        margin-bottom: 4vw;
    }
    .Security-Contents h2 {
        line-height: 1.2;
        padding-bottom: 3.6vw;
    }
    .col_2-Security{
        width: 100%;
    }
    .Security-Contents h3{
        font-size: 7vw;
        width: 77%;
    }
    .Security-Contents h3:before,
    .Security-Contents h3:after{
        width: 30vw;
    }
    .Security-Contents h3.sec01,
    .Security-Contents h3.sec02 {
        width: 80%;
        margin: 3.5vw 0px 3vw;
    }
    .Security-Contents dl{
        padding: 8.3vw 0 5vw;
    }
    .Security-Contents dt {
        font-size: 5.5vw;
    }
    .Security-Contents dd {
        padding-bottom: 6vw;
        font-size: 3.25vw;
    }
}
@media screen and (max-width: 480px){
    .Security-Contents h3:before,
    .Security-Contents h3:after{
        width: 10vw;
    }
}



/* 導入実績  -------------------------------------------*/
.Introduction {
    width: 100%;
    position: relative;
    background: white;
    z-index: 2;
}

.Introduction p {
    font-size: 1.25vw;
    font-weight: bold;
    /*padding-bottom: 1.6vw;*/
    padding: .5vw;
    background-color: #ebecee;
}

.Introduction p span.large {
    font-size: 1.8vw;
    color: rgb(0, 0, 102);
}

.Introduction-Contents .img-area {
    /*padding-top: 1.6vw;*/
    overflow: hidden;
}

.Introduction-Contents .wrap {
    display: flex;
    align-items: center;
}

.Introduction-Contents .slideshow {
    display: flex;
}

.Introduction-Contents .content {
    padding: 20px;
    width: 150px;
}

.Introduction-Contents .content img {
    width: 100%;
    aspect-ratio: 75 / 28;
}

/* 画像スクロール */
@media (max-width: 500px) {
    .Introduction-Contents .content {
        width: 100px;
    }

    .Introduction-Contents .content img {
        width: 100%;
        aspect-ratio: 50 / 19;
    }
}

@media (min-width:500px) and (max-width:1000px) {
    .Introduction-Contents .content {
        width: 100px;
    }

    .Introduction-Contents .content img {
        width: 100%;
        aspect-ratio: 50 / 19;
    }
}
/* テキスト */
@media screen and (max-width: 768px) {
    .Introduction p {
        font-size: 2.7vw;
    }

    .Introduction p span.large {
        font-size: 3.5vw;
    }
}


/* 導入事例  -------------------------------------------*/
.Case {}
.Case .Security-Contents {
  width: 81%;
  max-width: 1500px;
}
.Case .Security-Contents h2 {
  padding-bottom: 80px;
}
.case-box {
  padding: 55px 32px;
  background: #E7EDF6;
  margin-bottom: 80px;
}
.case-box:last-of-type {
  margin-bottom: 0;
}
.case-box .box-inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 66px;
}
.case-box .box-inner .img-area {
  width: 40%;
  max-width: 550px;
}
.case-box .box-inner .text-area {
  width: 57%;
  max-width: 846px;
}
.Case .Security-Contents h3 {
  font-size: 2vw;
  margin-bottom: 20px;
}
.Case .Security-Contents h3::before,
.Case .Security-Contents h3::after {
  content: none;
}
.case-box .box-subttl {
  font-size: 1.6vw;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #00336E;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.case-box .desc-ttl {
  font-size: 1.6vw;
  font-weight: bold;
  color: #00336e;
  margin-bottom: 25px;
}
.case-box .desc {
  font-size: 1.6vw;
  color: #333;
  margin-bottom: 0;
}
.case-box .box-btn {
  text-align: center;
}
.case-box .box-btn a {
  display: inline-block;
  width: 430px;
  height: 80px;
  font-size: 1.6vw;
  font-weight: bold;
  line-height: 80px;
  color: #fff;
  background: #00336e;
  border-radius: 40px;
  transition: .2s;
}
.case-box .box-btn a:hover {
  opacity: 0.7;
}
.Case .Case-Contents img.case-01 {
    aspect-ratio: 550 / 306;
}
.Case .Case-Contents img.case-02 {
    aspect-ratio: 550 / 301;
}
.Case .Case-Contents img.case-03 {
    aspect-ratio: 550 / 313;
}
.Case .Case-Contents img.case-04 {
    aspect-ratio: 550 / 307;
}
.Case .Case-Contents img.case-05 {
    aspect-ratio: 550 / 311;
}
.Case .Case-Contents img.case-06 {
    aspect-ratio: 550 / 309;
}
.Case .Case-Contents img.case-07 {
    aspect-ratio: 550 / 309;
}
@media screen and (max-width: 768px) {
  .case-box {
    padding: 40px 30px;
  }
  .case-box .box-inner {
    flex-wrap: wrap;
    justify-content: center;
  }
  .case-box .box-inner .img-area {
    width: 100%;
    margin-bottom: 20px;
  }
  .case-box .box-inner .text-area {
    width: 100%;
  }
  .Case .Security-Contents h3 {
    font-size: 4vw;
    width: 100%;
  }
  .case-box .box-subttl,
  .case-box .desc-ttl,
  .case-box .desc,
  .case-box .box-btn a {
    font-size: 3.25vw;
  }
  .case-box .box-btn a {
    width: 90%;
  }
}
@media screen and (max-width: 480px) {
  .Case .Security-Contents h2 {
    padding-bottom: 40px;
  }
  .case-box {
    padding: 20px;
    margin-bottom: 40px;
  }
  .case-box:last-of-type {
    margin-bottom: 30px;
  }
  .case-box .box-inner {
    margin-bottom: 40px;
  }
  .case-box .box-inner .img-area {
    margin-bottom: 10px;
  }
  .Case .Security-Contents h3 {
    font-size: 5vw;
    margin-bottom: 10px;
  }
  .case-box .box-subttl {
    padding-bottom: 8px;
    margin-bottom: 16px;
  }
  .case-box .desc-ttl {
    margin-bottom: 5px;
  }
  .case-box .box-btn a {
    height: 60px;
    line-height: 60px;
  }
}

/* 導入事例  -------------------------------------------*/

.Case {
    width: 100%;
    background-color: #ebecee;
    position: relative;
}
.Case-Contents {
    width: 100%;
    margin: 0 auto;
    padding: 6vw 0 4.4vw;
}

.Case-Contents .case-btn {
    text-align: center;
    padding: 7rem 0;
}

.Case-Contents .case-btn a {
    display: inline-block;
    width: 430px;
    height: 80px;
    font-size: 1.4vw;
    font-weight: bold;
    line-height: 80px;
    color: #fff;
    background: #00336e;
    border-radius: 40px;
    transition: .2s;
}
.Case-Contents .case-btn a:hover {
    opacity: 0.7;
}

/* Slider */

.Case-Contents .Slide-Wrap {
    width: 100%;
}

/* Slider box */
.Case-Contents .Slide-Wrap .box {
    border-radius: 10px;
    border: 1px solid #eaeaea;
    background-color: rgb(231, 237, 246);
    padding: 55px 32px;
    margin: 0 60px 60px 60px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .3);
}
.Case-Contents .Slide-Wrap .box .box-inner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 66px;
}
.Case-Contents .Slide-Wrap .box .box-inner .img-area {
    width: 40%;
    max-width: 500px;
}
.Case-Contents .Slide-Wrap .box .box-inner .text-area {
    width: 57%;
    max-width: 846px;
}
.Case .Case-Contents h3 {
    font-size: 1.8vw;
    margin-bottom: 20px;
    color: rgb(0, 51, 110);
}
.Case .Case-Contents h3::before,
.Case .Case-Contents h3::after {
    content: none;
}
.Case-Contents .Slide-Wrap .box .box-subttl {
    font-size: 1.4vw;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #00336E;
    padding-bottom: 12px;
    margin-bottom: 24px;
}
.Case-Contents .Slide-Wrap .box .desc-ttl {
    font-size: 1.4vw;
    font-weight: bold;
    color: #00336e;
    margin-bottom: 25px;
}
.Case-Contents .Slide-Wrap .box .desc {
    font-size: 1.4vw;
    color: #333;
    margin-bottom: 0;
}
.Case-Contents .Slide-Wrap .box .box-btn {
    text-align: center;
}
.Case-Contents .Slide-Wrap .box .box-btn a {
    display: inline-block;
    width: 430px;
    height: 80px;
    font-size: 1.4vw;
    font-weight: bold;
    line-height: 80px;
    color: #fff;
    background: #00336e;
    border-radius: 40px;
    transition: .2s;
}
.Case-Contents .Slide-Wrap .box .box-btn a:hover {
    opacity: 0.7;
}
/* Slider box */

.Case-Contents .Slider {
    margin: 50px 0;
}
.Case-Contents .Slider img {
    width: 100%;
    height: auto;
}
.Case-Contents .Slider .slick-next {
    right: 20px;
    z-index: 99;
}
.Case-Contents .Slider .slick-prev {
    left: 15px;
    z-index: 100;
}
.Case-Contents button.slick-arrow{
    width: 5vw;
    height: 5vw;
}
.Case-Contents button.slick-prev.slick-arrow {
    position: absolute;
    left: 10%;
    top: 40%;
}
.webp .Case-Contents button.slick-prev.slick-arrow {
    background: url(../img/prev.webp) left 0px top 15px no-repeat;
    background-size: 80%;
}
.no-webp .Case-Contents button.slick-prev.slick-arrow {
    background: url(../img/prev.png) left 0px top 15px no-repeat;
    background-size: 80%;
}
.Case-Contents button.slick-next.slick-arrow {
    position: absolute;
    right: 10%;
    top: 40%;
}
.webp .Case-Contents button.slick-next.slick-arrow {
    background: url(../img/next.webp) right 0px top 15px no-repeat;
    background-size: 80%;
}
.no-webp .Case-Contents button.slick-next.slick-arrow {
    background: url(../img/next.png) right 0px top 15px no-repeat;
    background-size: 80%;
}
.Case-Contents .slick-dots li button{
    width: 1.2vw;
    height: 1.2vw;
}

/* Slider dots */
.Case-Contents .slick-dots li.slick-active button:before {
    color: #01336e;
}
.Case-Contents .slick-dots li button:before {
    color: rgb(235, 236, 238);
}
/* Slider dots */

@media screen and (max-width: 1600px){
    .Case-Contents button.slick-prev.slick-arrow{
        left: 12%;
    }
    .Case-Contents button.slick-next.slick-arrow{
        right: 12%;
    }
}
@media screen and (max-width: 1200px){
    .Case-Contents button.slick-arrow{
        width: 8vw;
        height: 8vw;
    }
    .webp .Case-Contents button.slick-prev.slick-arrow,
    .no-webp .Case-Contents button.slick-prev.slick-arrow{
        background-size: 70%;
    }
    .webp .Case-Contents button.slick-next.slick-arrow,
    .no-webp .Case-Contents button.slick-next.slick-arrow{
        background-size: 70%;
    }
}
@media screen and (max-width: 900px){
    .Case-Contents button.slick-prev.slick-arrow{
        left: 15%;
    }
    .Case-Contents button.slick-next.slick-arrow{
        right: 15%;
    }
}
@media screen and (max-width: 768px) {
    .Case-Contents .slick-track{
        padding: 5px 0 20px;
    }
    .Case-Contents .slick-dots{
        bottom: -8vw;
    }
    .Case-Contents .case-btn a {
        font-size: 3.25vw;
        width: 90%;
    }

    /* Slider box */
    .Case-Contents .Slide-Wrap .box {
        padding: 40px 30px;
        margin:0 10%;
        border-radius: 22px;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
    }
    .Case-Contents .Slide-Wrap .box .box-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
    .Case-Contents .Slide-Wrap .box .box-inner .img-area {
        width: 100%;
        margin-bottom: 20px;
    }
    .Case-Contents .Slide-Wrap .box .box-inner .text-area {
        width: 100%;
    }
    .Case .Case-Contents h3 {
        font-size: 4vw;
        width: 100%;
    }
    .Case-Contents .Slide-Wrap .box .box-subttl,
    .Case-Contents .Slide-Wrap .box .desc-ttl,
    .Case-Contents .Slide-Wrap .box .desc,
    .Case-Contents .Slide-Wrap .box .box-btn a {
        font-size: 3.25vw;
    }
    .Case-Contents .Slide-Wrap .box .box-btn a {
        width: 90%;
    }
    /* Slider box */

    .Case-Contents{
        padding: 14vw 0;
    }
    .Case-Contents button.slick-arrow{
        width: 14vw;
        height: 14vw;
    }
    .Case-Contents button.slick-prev.slick-arrow {
        left: 3%;
    }
    .Case-Contents button.slick-next.slick-arrow {
        right: 3%;

    }
}
@media screen and (max-width: 480px){
    .Case-Contents .slick-dots{
        bottom: -10vw;
    }
    .Case-Contents .case-btn a {
        height: 60px;
        line-height: 60px;
    }

    /*.Case .Case-Contents h2 {*/
    /*    padding-bottom: 40px;*/
    /*}*/

    /* Slider box */
    .Case-Contents .Slide-Wrap .box {
        padding: 20px;
        margin-bottom: 40px;
    }
    .case-box:last-of-type {
        margin-bottom: 30px;
    }
    .Case-Contents .Slide-Wrap .box .box-inner {
        margin-bottom: 40px;
    }
    .Case-Contents .Slide-Wrap .box .box-inner .img-area {
        margin-bottom: 10px;
    }
    .Case .Security-Contents h3 {
        font-size: 5vw;
        margin-bottom: 10px;
    }
    .Case-Contents .Slide-Wrap .box .box-subttl {
        padding-bottom: 8px;
        margin-bottom: 16px;
    }
    .Case-Contents .Slide-Wrap .box .desc-ttl {
        margin-bottom: 5px;
    }
    .Case-Contents .Slide-Wrap .box .box-btn a {
        height: 60px;
        line-height: 60px;
    }
    /* Slider box */
}


/* プラン・ご利用料金  -------------------------------------------*/

.Plan {
    width: 100%;
    position: relative;
    background-color: #ebecee;
}
.Plan p {
    font-size: 1.5vw;
}
.Plan-txt {
    text-align: center;
    border: 3px solid #ddd;
    padding: 3% 10px;
    box-sizing: border-box;
    background-color: #FFF;
}

.Plan-txt .price {
    font-size: 1.5vw;
    text-align: center;
    font-weight: bold;
    margin-top: 30px;
}
.Plan-txt .price span.large {
    font-size: 3.0vw;
    padding-right: 20px;
    color: #006;
}
.Plan-Contents h3 {
    font-size: 2.2vw;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    padding-top: 3%;
}
.Plan-Contents h3:before {
    content: '';
    position: absolute;
    bottom: -20px;
    display: inline-block;
    width: 65px;
    height: 3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #5179A8;
    border-radius: 2px;
}
.Plan-box {
    margin: 30px 0;
}
.Plan-box dl {
    width: 100%;
    font-size: 1.6vw;
    padding: 0px 30px 10px 30px;
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    /* IE10 */
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.Plan-box dt {
    float: left;
    clear: left;
}
.Plan-box dd span {
    font-size: 2.5vw;
}
.Plan-txt .Recommended {
    color: #FFF;
    font-size: 1vw;
    padding: 5px 0;
}
.webp .Plan-txt .Recommended {
    background: url(../img/bg-Plan.webp) center no-repeat;
}
.no-webp .Plan-txt .Recommended {
    background: url(../img/bg-Plan.png) center no-repeat;
}
.Plan-txt ul {
    padding: .7vw 0;
}
.Plan-txt ul li {
    font-size: 1.1vw;
    list-style: none;
    padding: 1% 0px;
    text-align: left;
    margin-left: 2vw;
}
.Plan-txt ul li::before {
    position: relative;
    top: -2px;
    left: -18px;
    display: inline-block;
    width: 6px;
    height: 6px;
    content: '';
    border-radius: 100%;
    background-color: #000;
}
.Plan-Contents .small {
    font-size: 1.1vw;
    padding: 0 10px;
    margin-top: 1vw;
}

@media screen and (max-width: 768px) {
    .Plan-Contents{
        padding: 11.2vw 0px;
    }
    .Plan-Contents h2{
        padding-bottom: 4.6vw;
    }
    .Plan-txt ul li {
        margin-left: 6vw;
    }
    .Plan-Contents .col_3 {
        margin-top: 60px;
    }

    .Plan-Contents .small {
        font-size: 3.25vw;
        margin-top: 3vw;
    }
    .Plan p {
        font-size: 3.25vw;
    }


    .Plan-txt .price {
        font-size: 3.5vw;
    }
    .Plan-txt .price span.large {
        font-size: 8.0vw;
    }
    .Plan-txt .Recommended{
        font-size: 2.6vw;
        margin-bottom: 1vw;
    }
    .Plan-Contents h3 {
        font-size: 5.5vw;
    }
    .Plan-box dl {
        padding: 1% 5%;
        font-size: 4.25vw;
    }
    .Plan-box dd span {
        font-size: 6.5vw;
    }
    .Plan-txt ul li {
        font-size: 2.8vw;
        letter-spacing: 0.75px;
    }
}
@media screen and (max-width: 480px){
    .Plan-txt ul li{
        margin-left: 7vw;
    }
}





/* 他社比較  -------------------------------------------*/

.Comparison {
    width: 100%;
    position: relative;
    background-color: #ebecee;
}

/* table */

.Comparison table {
    width: 100%;
    margin: 0 auto;
    color: #00336e;
}
.Comparison table th {
    background-color: #00336e;
    padding: 10px;
    font-size: 1.5vw;
}
.Comparison table th:first-child {
    background-color: #ebecee;
}
.tbl th:nth-child(n + 3) {
    background-color: #e3eaf3;
    font-size: 1.4vw;
    font-weight: normal;
}
.Comparison table th img{
    width: 48%;
    aspect-ratio: 184 / 107;
}
.Comparison table td {
    background-color: #FFF;
    text-align: center;
}
.tbl {
    border-collapse: separate;
    border-spacing: .5vw;
}
.tbl .big {
    font-size: 2.0em;
}
.tbl td:first-child {
    width: 19.7%;
    padding: 1.3vw 0;
    color: #FFF;
    text-align: center!important;
    font-size: 1.4vw;
    vertical-align: middle;
}
.webp .tbl td:first-child {
    background: url(../img/bg-Comparison.webp) left 0px top 0px repeat-y;
}
no-webp .tbl td:first-child {
    background: url(../img/bg-Comparison.png) left 0px top 0px repeat-y;
}
.tbl td:nth-child(n + 2) {
    max-width: 450px;
    font-size: 1.5vw;
}



.tbl td:nth-child(2) {
    color: #333;
    font-weight: bold;
    font-size: 1.4vw;
    text-align: center;
}
.tbl td:nth-child(2) .num{
    font-size: 1.7vw;
}
.tbl .last td {
    font-size: 1.5vw;
    text-align: left;
}
.tbl .last td:nth-child(n + 2) {
    padding: .7vw 1.6vw 5vw;
    font-size: 1.4vw;
    text-align: left;
    vertical-align: top;
}
.tbl td .big {
    font-size: 3.5vw;
    font-weight: normal;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .tbl td:first-child {
        font-size: 2.6vw;
        padding: 3vw 2vw;
        width: 28vw;
    }
    .slide-wrap {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    .Comparison table {
        width: 148.9vw;
        border-spacing: 0.8vw;
    }


    .tbl img {
        width: 45%;
    }

    .tbl .last td {
        font-size: 3.25vw;
    }
    .tbl th:nth-child(n+3){
        font-size: 2.6vw;
    }
    .tbl td:nth-child(n+2){
        font-size: 2.8vw;
    }
    .tbl td:nth-child(2) {
        font-size: 3.25vw;
    }
    .tbl td:nth-child(2) .num{
        font-size: 3.7vw;
    }
    .tbl td .big {
        font-size: 6.5vw;
    }
    .tbl .last td:nth-child(n + 2) {
        font-size: 2.7vw;
        padding: 1.7vw 2.8vw 5vw;
    }
    .tbl td:nth-child(n + 2) {
        max-width: 450px;
        font-size: 2.5vw;
    }

    .Comparison table th {
        font-size: 2.5vw;
    }
}
@media screen and (max-width: 480px){
    .Comparison table{
        width: 182vw;
    }
    .tbl th:nth-child(n+3){
        font-size: 3vw;
    }
    .tbl td:first-child{
        width: 30vw;
    }
}



/* 無料体験申し込み  -------------------------------------------*/

.Contact {
    width: 100%;
    position: relative;
}


/* フォーム */

.Form {
    margin: 2.8vw auto 0;
    max-width: 1400px;
    width: 84.5%;
}
.contact-title {
    font-size: 1.5vw;
}
.Form-item {
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.Form-item-label {
    width: 100%;
    max-width: 450px;
    letter-spacing: 0.05em;
    font-weight: bold;
}
.Form-item-label.isMsg {
    margin: 8px auto 0;
}
.contact-required,
.contact-required-off {
    font-size: 1.4vw;
    border-radius: 10px;
    margin-right: 20px;
    padding: .2vw 0;
    width: 29.5%;
    max-width: 105px;
    display: inline-block;
    text-align: center;
}
.contact-required {
    background: #01336E;
    color: #fff;
}
.contact-required-off {
    background: #eaeaea;
    color: #01336E;
}
.Form-item-input,
.Form-item-Textarea {
    border: 1px solid #01336E;
    border-radius: 10px;
    padding: 0.75em 1em;
    flex: 1;
    width: 100%;
    max-width: 1400px;
    font-size: 1.0vw;
    box-sizing: border-box;
}
.Form-item-input {
    height: 4.5vw;
}
.Form-item-Textarea {
    height: 216px;
    padding: 1em;
}

.Contact-link {
    padding-bottom: 5px;
    border-bottom: 1px solid;
}

.contact-submit {
    width: 52%;
    height: 8vw;
    margin: 0 auto;
    text-align: center;
}
.webp .contact-submit {
    background: url(../img/cv-btn01.webp) center no-repeat;
    background-size: cover;
}
.no-webp .contact-submit {
    background: url(../img/cv-btn01.png) center no-repeat;
    background-size: cover;
}

/*.small {
	font-size: 0.9vw;}*/
@media all and (-ms-high-contrast: none) {
  .contact-submit{
    width: 54%;
  }
}
.contact-alert{
    margin-bottom: 1vw;
    font-size: .8vw;
}
.tbl-r02 tr:nth-child(4) td input{
    margin-right: 10px;
}
.privacy-policy{
    margin: 3vw 0;
}
.privacy-policy a{
    display: inline-block;
    position: relative;
}
.mx-aouto{
    display: inline-block;
    width: 30%;
    margin-top: 1vw;
}
.tbl-r02 tr td:last-child{
    width: 66%;
}
@media screen and (max-width: 1500px){
    .contact-title {
        font-size: 1.2vw;
    }
}
@media screen and (max-width: 768px) {
    .Form {
        margin-top: 8vw;
        width: 96%;
    }
    .Form-item {
        padding: 16px 14px;
        flex-wrap: wrap;
    }
    .Form-item-label {
        max-width: inherit;
        display: flex;
        align-items: center;
    }
    .Form-item-label.isMsg {
        margin-top: 0;
    }
    .contact-required {
        border-radius: 10px;
        width: 14vw;
        padding: .8vw 0;
    }
    .Form-item-input {
        margin-left: 0;
        padding: 5% 0 15% 0;
        height: 12vw;
        flex: inherit;

    }
    .contact-alert{
        font-size: 2.8vw;
    }
    .Form-item-Textarea {
        margin-top: 18px;
        margin-left: 0;
        height: 200px;
        flex: inherit;
    }

    .Contact-link {
        padding-bottom: 15px;
    }
    .contact-submit {
        width: 100%;
        height: 22vw;
    }

    .tbl-r02 .th,
    .tbl-r02 td {
        display: block;
        width: 100%;
    }
    #crmWebToEntityForm tr,
    #crmWebToEntityForm td{
        box-sizing: border-box;
    }


    .Form-item-input,
    .Form-item-Textarea {
        padding: 0.2em 1em;
        font-size: 3.25vw;
    }
    .contact-title{
        font-size: 4.5vw;
    }
    .contact-required,
    .contact-required-off {
        font-size: 3.25vw;
    }
    .tbl-r02 tr td:last-child{
        width: 100%;
    }
	/*.small {
	font-size: 2.0vw;}*/
}



/* Company  -------------------------------------------*/

.Contact {
    width: 100%;
    position: relative;
}
.Company-Contents h2 {
    font-size: 2.2vw;
    font-weight: normal;
    position: relative;
    display: inline-block;
    margin-bottom: 70px;
    padding-left: 90px;
    color: #00336e;
}
.Company-Contents h2:before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 63px;
    height: 2px;
    background-color: #00336e;
}
.Company-Contents h2:before {
    left: 0;
}
.col_2-Company{
    width: 85%;
    margin: 0 auto;
}
.Company table.tb01,
.Company table.tb02 {
    width: 100%;
    font-size: 1.1vw;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 3px solid #ddd;
}
.Company th {
    width: 33%;
    border-bottom: 3px solid #ddd;
    text-align: left;
    font-weight: normal;
}
.Company table.tb01 tr:nth-child(-n+3) th{
    letter-spacing: 1em;
}
.Company td {
    width: 75%;
    border-bottom: 3px solid #ddd;
}
.Company th,
.Company td {
    height: 7vw;
}
@media screen and (max-width: 768px) {
    .Company-Contents h2{
        font-size: 5.5vw;
    }
    .col_2-Company{
        width: 100%;
    }
    .Company th,
    .Company td {
        height: 18vw;
    }
    .Company table.tb01,
    .Company table.tb02 {
        font-size: 3.25vw;
    }
    .Company table.tb02{
        border-top: none;
    }
    .copy {
        font-size: 2.3vw;
        font-style: normal;
        padding: 50px 0;
        color: #FFF;
    }
}

/*----------------------------------------------

　完了　

----------------------------------------------*/
.Complete{
    min-height: 80vh;
}
.Complete .Contact-Contents{
    padding-top: 13vw;
}
@media screen and (max-width: 1200px){
    .Complete .Contact-Contents p{
        font-size: 1.8vw;
    }
}
@media screen and (max-width: 768px){
    .Complete .Contact-Contents{
        padding: 34vw 0 10vw;
    }
    .Complete .Contact-Contents p{
        padding: 0 15px;
        font-size: 3.5vw;
    }
}