@charset "UTF-8";
/* ======================================== */
/* index
=========================================== */
/* #feature
=========================================== */
#feature { padding-top: 52px; padding-bottom: 40px; background: #f2f3f3; }
#feature .tit { margin: 0 -15px 1px; }
#feature .img { width: 228px; margin: 0 auto 3px; }
#feature .copy { line-height: 1.625; margin-bottom: 10px; color: #2e414f; font-weight: 700; font-size: 1.6rem; }
#feature .copy span { position: relative; z-index: 2; background: -webkit-linear-gradient(top, #f2f3f3 0%, #f2f3f3 80%, #fff955 81%, #fff955 100%); background: linear-gradient(to bottom, #f2f3f3 0%, #f2f3f3 80%, #fff955 81%, #fff955 100%); }
#feature .txt { margin-bottom: 21px; }
#feature .case { padding: 20px 6px; border-radius: 10px; background: #fff; }
#feature .case .sub { color: #2e414f; font-weight: 700; font-size: 1.4rem; text-align: center; }
#feature .case .bnrs { text-align: center; margin-top: 10px; padding: 0 4px; }
#feature .case .bnrs .bnr { display: inline-block;width: 31%; margin-right: 3%; }
#feature .case .bnrs .bnr:nth-child(3n) {margin-right: 0;}
@media all and (min-width: 600px) { #feature { padding: 95px 0 60px; }  #feature .tit { clear: both; margin: 0; text-align: center; }  #feature .tit img { width: auto; }  #feature .img { float: left; width: 374px; margin: -30px 0 -33px 40px; }  #feature .txtWrap { padding: 65px 0 0 454px; }  #feature .copy { line-height: 1.67; margin-bottom: 25px; font-size: 3.0rem; }  #feature .case { width: 586px;position: relative; float: right; padding: 28px 30px 20px; }  #feature .case .sub { margin-bottom: 21px; font-size: 2.4rem; }  #feature .case .bnrs { padding: 0; }  #feature .case .bnrs .bnr { width: 196px; margin: 0 7px 7px 0; } }
/* 選ばれる理由
=========================================== */
#reason { padding: 32px 0 35px; background: #fff; }
#reason .leadTit { margin-bottom: 12px; }
#reason .list .item .areaTxt .tit { line-height: 1.41; margin-top: 10px; margin-bottom: 10px; color: #2e414f; font-weight: bold; font-size: 1.7rem; text-align: center; }
#reason .list .item:first-child .areaTxt { padding: 10px 15px 15px; background: #148cb8; }
#reason .list .item:first-child .areaTxt .tit { margin-bottom: 5px; color: #fff955; font-size: 2.0rem; }
#reason .list .item:first-child .areaTxt .txt { color: #fff; }
#reason .list .item + .item { margin: 25px 0 0; }
@media all and (min-width: 600px) { #reason { padding: 90px 0 113px; }  #reason .leadTit { text-align: center; }  #reason .leadTit img { width: auto; }  #reason .leadTxt { font-size: 1.8rem; text-align: center; }  #reason .list { overflow: hidden; padding: 54px 0 0; }  #reason .list .item { float: left; width: 254px; overflow: hidden; }  #reason .list .item .areaTxt .tit { line-height: 1.5; font-size: 2.0rem; }  #reason .list .item:first-child { float: none; clear: both; width: 100%; margin-bottom: 50px; }  #reason .list .item:first-child .img { float: left; width: 350px; }  #reason .list .item:first-child .areaTxt { position: relative; float: right; box-sizing: border-box; width: 700px; padding: 34px 40px 53px; border-radius: 7px; }  #reason .list .item:first-child .areaTxt:before { position: absolute; top: 50%; left: -30px; width: 0; height: 0; margin-top: -18px; border-width: 18px 30px 18px 0; border-style: solid; border-color: transparent #148cb8 transparent transparent; content: ""; }  #reason .list .item:first-child .areaTxt .tit { margin-bottom: 12px; font-size: 3.0rem; }  #reason .list .item + .item { margin: 0 0 0 28px; }  #reason .list .item:nth-child(2) { margin-left: 0; } }
/* チャットボット
=========================================== */
#chatTool { padding: 40px 0; background: #f2f3f3; }
#chatTool .list .item { overflow: hidden; margin-top: 20px; }
#chatTool .list .item .img { float: left; width: 22.6%; margin: 0 4% 0 0; }
#chatTool .list .item .detail { float: right; width: 73.4%; }
#chatTool .list .item .tit { color: #2e414f; font-size: 1.4rem; }
#chatTool .list .item .txt { margin-top: 5px; font-size: 1.2rem; }
#chatTool .heading01 { margin-top: 30px; margin-bottom: 5px; color: #148cb8; font-weight: bold; font-size: 1.9rem; text-align: center; }
#chatTool .chattoolTbl { overflow: hidden; margin-top: 20px; border: 3px solid #148cb8; border-radius: 10px; }
#chatTool .chattoolTbl table { width: 100%; }
#chatTool .chattoolTbl thead th { padding: 10px 1.4%; background: #f2f3f3; color: #148cb8; font-weight: normal; font-size: 12px; }
#chatTool .chattoolTbl thead th + th { border-left: 1px solid #e1e4e4; }
#chatTool .chattoolTbl thead th.highlight { width: 29.56%; background: #148cb8; color: #fff955; font-weight: bold; }
#chatTool .chattoolTbl thead th.highlight + th { border-left: none; }
#chatTool .chattoolTbl thead th:first-child { width: 24.6%; }
#chatTool .chattoolTbl tbody tr + tr th , #chatTool .chattoolTbl tbody tr + tr td { border-top: 1px solid #e1e4e4; }
#chatTool .chattoolTbl tbody th { padding: 10px 1.4%; background: #fff; color: #2e414f; font-weight: normal; font-size: 11px; text-align: left; vertical-align: middle; }
#chatTool .chattoolTbl tbody td { padding: 10px 1.4%; border-right: 1px solid #e1e4e4; background: #fff; color: #2e414f; font-size: 11px; vertical-align: middle; }
#chatTool .chattoolTbl tbody td.highlight { border-right: 1px solid transparent; background: #e0f2f9; color: #148cb8; font-weight: bold; font-size: 1.2rem; }
#chatTool .chattoolTbl tbody td span + span { display: inline-block; margin-top: 5px; }
#chatTool .chattoolTbl tbody td img { display: block; width: 15.6%; margin: 0 auto; }
@media all and (min-width: 600px) { #chatTool { padding: 90px 0 120px; }  #chatTool .leadTit { margin-bottom: 18px; text-align: center; }  #chatTool .leadTit img { width: auto; }  #chatTool .leadTxt { font-size: 1.8rem; text-align: center; }  #chatTool .list { padding: 52px 0 0; text-align: center; }  #chatTool .list .item { display: inline-block; width: 195px; margin: 0 30px 40px 0; }  #chatTool .list .item .img { float: none; width: 100%; margin: 0 0 10px; text-align: center; }  #chatTool .list .item .img img { width: auto; }  #chatTool .list .item .detail { float: none; width: 100%; }  #chatTool .list .item .tit { font-weight: bold; font-size: 1.8rem; }  #chatTool .list .item .txt { line-height: 1.73; font-size: 1.5rem; text-align: left; }  #chatTool .list .item:nth-child(5n) { margin-right: 0; }  #chatTool .heading01 { margin: 50px 0 5px; font-size: 2.8rem; }  #chatTool .heading01 + .txt { font-size: 1.8rem; text-align: center; }  #chatTool .chattoolTbl { margin-top: 30px; }  #chatTool .chattoolTbl thead th { width: 278px; padding: 20px 22px; font-size: 1.9rem; }  #chatTool .chattoolTbl thead th:first-child { width: 278px; }  #chatTool .chattoolTbl thead th.highlight { width: 278px; padding: 20px 22px; font-size: 1.9rem; }  #chatTool .chattoolTbl thead th br { display: none; }  #chatTool .chattoolTbl tbody th { padding: 16px 34px; font-size: 1.6rem; }  #chatTool .chattoolTbl tbody th br { display: none; }  #chatTool .chattoolTbl tbody td { padding: 16px 34px; font-size: 16px; text-align: center; }  #chatTool .chattoolTbl tbody td.highlight { font-size: 16px; }  #chatTool .chattoolTbl tbody td span br { display: none; }  #chatTool .chattoolTbl tbody td img[src*="ico_doubleCircle01.png"] { width: 32px; }  #chatTool .chattoolTbl tbody td img[src*="ico_times01.png"] { width: 23px; }  #chatTool .chattoolTbl tbody td img[src*="ico_circle01.png"] { width: 26px; }  #chatTool .chattoolTbl tbody td img[src*="ico_triangle01.png"] { width: 29px; } }
/* 6つのメリット
=========================================== */
#merit { padding: 40px 0 0; }
#merit .leadTxt { margin-top: 15px; margin-bottom: 70px; color: #fff; }
#merit .listWrap { padding: 0 15px; background: #fff; }
#merit .list .item { position: relative; top: -40px; }
#merit .list .item .tit { margin: 8px 0 5px; color: #2e414f; font-weight: bold; font-size: 1.7rem; text-align: center; }
#merit .list .item .txt { margin-top: 10px; color: #2e414f; font-size: 1.3rem; }
#merit .list .item + .item { margin-top: 30px; }
@media all and (min-width: 600px) { #merit { padding: 97px 0 0; }  #merit .leadTit { text-align: center; }  #merit .leadTit img { width: auto; }  #merit .leadTxt { margin: 22px 0 130px; font-size: 1.8rem; text-align: center; }  #merit .listWrap { margin-bottom: -25px; padding: 0; }  #merit .list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 1100px; margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }  #merit .list .item { position: relative; top: -140px; width: 342px; margin-top: 60px; }  #merit .list .item .tit { margin: 17px 0 5px; font-size: 2.0rem; }  #merit .list .item .txt { margin: 0; }  #merit .list .item + .item { margin-top: 60px; } }
/* 価格
=========================================== */
#price { padding: 40px 0; background: #e0f2f9; }
#price .leadTxt { margin-top: 15px; color: #2e414f; }
#price .priceBox { overflow: hidden; margin-top: 25px; padding-bottom: 15px; border-radius: 10px; background: #fff; text-align: center; }
#price .priceBox .tit { padding: 10px 0; background: #148cb8; color: #fff; font-weight: normal; font-size: 1.6rem; }
#price .priceBox .txt { display: inline-block; line-height: 1.2; margin-top: 10px; background: -webkit-linear-gradient(transparent 80%, #fff955 80%); background: linear-gradient(transparent 80%, #fff955 80%); color: #148cb8; font-weight: bold; font-size: 1.8rem; }
#price .priceBox .txt span { margin-right: 3px; font-size: 36px; text-align: center; vertical-align: baseline; }
#price .note { margin-top: 15px; }
#price .note .item { position: relative; padding-left: 1rem; color: #2e414f; font-size: 1.0rem; }
#price .note .item:before { position: absolute; top: 0; left: 0; content: "※"; }
@media all and (min-width: 600px) { #price { padding: 100px 0 110px; }  #price .leadTit { text-align: center; }  #price .leadTit img { width: auto; }  #price .leadTxt { margin-top: 32px; text-align: center; }  #price .priceBox { display: -webkit-box; display: -ms-flexbox; display: flex; box-sizing: border-box; height: 120px; margin-top: 50px; padding: 0; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }  #price .priceBox .tit { width: 350px; line-height: 100px; font-size: 2.8rem; }  #price .priceBox .txt { margin: 0 auto; font-size: 2.6rem; }  #price .priceBox .txt span { font-size: 6.2rem; }  #price .note { margin-top: 20px; text-align: center; }  #price .note .item { font-size: 1.3rem; }  #price .note .item:before { position: static; } }
/* 導入の流れ
=========================================== */
#flow { padding: 40px 0; background: #fff; }
#flow .leadTxt { margin-top: 15px; margin-bottom: 20px; color: #2e414f; }
#flow .list .item + .item { margin: 1% 0 0; }
@media all and (min-width: 600px) { #flow { padding: 100px 0 110px; }  #flow .leadTit { text-align: center; }  #flow .leadTit img { width: auto; }  #flow .leadTxt { margin-top: 24px; text-align: center; }  #flow .list { position: relative; overflow: hidden; padding: 60px 0 0; }  #flow .list .item { float: left; }  #flow .list .item + .item { margin: 0 0 0 31px; }  #flow .list .item04 { position: absolute; top: 0; right: 234px; margin: 0; } }