@charset "UTF-8";
/*一旦非表示*/

.top_banner_wrap {
    display: none;
}




body, th, td, input, textarea, select {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font {
  font-family: 'Overpass', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body {
  font-size: 14px;
  color: #231815;
}
body p, body span, body div, table th, table td {
  line-height: 1.5;
}
body p {
margin: 0;
  margin-bottom: 20px;
}
body p:last-of-type {
  margin-bottom: 0px;
}
.w1000, .top_box .inner {
  max-width: 1000px;
  margin: 0 auto;
}
.clear {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  font-size: 0.1em;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
ul, ol, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
body *{
box-sizing: border-box!important;
}
a {
  outline: none;
  color: #231815;
  text-decoration: none;
  transition: all 0.2s ease-out 0s;
}
a:hover {
  text-decoration: none;
}
a:focus, a:hover {
  opacity: 0.6;
  text-decoration: none;
}
a:hover img {
  opacity: 0.8;
}
#page{
overflow:hidden;
}
/*            header                  */
.header {
  width: 100%;
  padding: 30px 40px;
  z-index: 10;
  transition: all 0.2s ease-out 0s;
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.header .inner {
  width: calc(100%);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.logo {
  width: 290px;
  margin-right: 50px;
}
.logo a {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
/*  ヘッダーメニュー*/
.header_nav_wrap {
  flex-direction: column;
  justify-content: center;
  display: flex;
}
.header_nav_wrap ul {
  display: flex;
  flex-wrap: wrap;
}
.header_nav_wrap li {}
.header_nav_wrap li a {
  font-weight: bold;
  display: block;
  font-size: 15px;
  padding: 5px 16px;
  letter-spacing: 1px;
  position: relative;
  line-height: 1;
  text-align: center;
  position: relative;
      flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
	height: 100%;

}
.header_nav_wrap li.header_contact{
padding-left: 15px;
}
.header_nav_wrap li.header_contact a{

    border-radius: 50px;
    background: #E04658;
    color: #fff;
    display: block;

    letter-spacing: 1px;
    font-weight: bold;
    transition: all 0.2s ease-out 0s;
    width: 150px;
	height: 50px;
	      flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;

}
.header_nav_wrap li a:hover, .header_nav_wrap li.current-menu-item a, .header_nav_wrap li a:hover *, .header_nav_wrap li.current-menu-item a * {}
.header_nav_wrap li.current-menu-item a {}
/*     page top   */
.ec-blockTopBtn {
  width: 30px;
  height: 30px;
  right: 10px;
  bottom: 80px;
  font-size: 16px;
  background: #0e4daa;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.2s ease-out 0s;
}
.ec-blockTopBtn:hover {}
/*                    トップページ　　　　*/
/*　　共通　　　*/
.ec-layoutRole .ec-layoutRole__main {
  overflow: hidden;
}
.page_box,
.top_box {
  padding: 40px 15px;
  position: relative;
}
.page_box > .inner,
.top_box > .inner {
  max-width: 1000px;
  margin: 0 auto;
}
.top_midasi_01 {
  font-size: 25px;
  text-align: center;
  color: #0E4DAA;
  font-weight: bold;
  margin-bottom: 25px;
  letter-spacing: 1px;
}
.top_midasi_01 span {
  display: block;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: normal;
}
.top_midasi_01 .orange {
  color: #fff;
  font-size: 22px;
  background: #F8B52D;
  padding: 8px 14px;
  width: fit-content;
  margin: 10px auto;
}
.top_midasi_02 {
  font-weight: bold;
  margin-bottom: 20px;
}
.top_midasi_02_01 {
  font-size: 15px;
  margin-bottom: 10px;
}
.top_midasi_02_02 {
  font-size: 26px;
  color: #0E4DAA;
}
.icon_midasi {
  text-align: center;
  margin: 0 0 15px 0;
}
.center {
  text-align: center;
}
.more {
  text-align: center;
}
.more a {
  border-radius: 50px;
  background: #E04658;
  color: #fff;
  display: block;
  padding: 15px 15px;
  width: fit-content;
  margin: 0 auto;
  letter-spacing: 1px;
  font-weight: bold;
  transition: all 0.2s ease-out 0s;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.more_m a {
  font-size: 25px;
  font-weight: bold;
  max-width: 420px;
  height: 100px;
  

  width: 100%;
}
.more_s {
  margin-top: 20px;
}
.more_s a {
  font-size: 15px;
  width: 100%;
  max-width: 300px;
  letter-spacing: 0px;
  //font-weight: normal;
  }
.more span {
  display: block;
  letter-spacing: 0;
  font-weight: normal;
  font-size: 13px;
  margin-bottom: 3px;
}
.more a:hover {
  opacity: 0.6;
}
.bg_blue {
  background: #0E4DAA;
}
.bg_usu_blue {
  background: #EBF6FC;
}
.bg_blue .top_midasi_01 {
  color: #fff;
}
.right {
  text-align: right;
}
.bold {
  font-weight: bold;
}
.f_14 {  font-size: 12px;}
.f_16 {  font-size: 14px;}
.f_18 {  font-size: 16px;}
.f_25 {  font-size: 22px;}
.top_sita {
  padding: 30px 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.top_sita .inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #fff;
  width: 100%;
}
.top_sita .inner:not(:first-of-type) {
    border-top: solid 1px #fff;
	padding-top: 20px;
    margin-top: 20px;
}


.top_sita .inner > div {
  flex-direction: column;
  justify-content: center;
  display: flex;
}
.top_sita .L {
  line-height: 1.7;

  margin-bottom: 15px;
}
.top_sita .R {
text-align: center;
}

.top_sita .L .midasi{
font-weight: bold;
font-size: 20px;
margin-bottom: 15px;
}

.top_sita .L p.indent {
    padding-left: 3em;
    text-indent: -3em;
	margin-bottom: 0!important;
}


.top_img_box{
background: url("../images/common/bg_blue.jpg") no-repeat center center;
background-size: cover;


    flex-direction: column; 
    justify-content: center; 
    align-items: center;
display: flex;
padding: 80px 15px 40px;

}
.top_img{
text-align: center;
}
.top_img img{
}
.top_img_box .more {
    position: relative;
    top: -0px;
    max-width: 420px;
    width: 100%;
}



/*   サポート  */
.top_support .inner {
  position: relative;
}
.top_support .inner .icon_midasi {
  position: absolute;
  left: 0;
  top: -67px;
}
.top_support_sub_midasi {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}

.support_wrap {
    border: solid 5px #E5E5E5;
    padding: 19px 25px 20px;
    margin-top: 35px;
}
.support_flow_midasi {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  background: #0E4DAA;
  padding: 15px 10px;
  letter-spacing: 1px;
}
.support_flow_list {
  margin: 20px 0;
      display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
.support_flow_list li {
  position: relative;
  width: 45%;
  margin-bottom: 15px;
}
.support_flow_list li p {
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 10px 0 0 0;
}
.support_flow_list li:not(:last-of-type) .img{
position: relative;
}
.support_flow_list li:not(:last-of-type) .img:before {
    content: "";
    display: block;
    background: url(../images/common/arrow_01.png) no-repeat center center;
    background-size: contain;
    width: 14px;
    height: 13px;
    position: absolute;
    right: -16%;
    top: 0;
    bottom: 0;
    margin: auto;
}


.support_flow_text {
  background: #EBF6FC;
  font-size:16px;
  font-weight: bold;
  border-radius: 10px;
  position: relative;
  max-width: 615px;
  margin: 0 auto;
  height: 70px;
  padding: 0 15px;
  flex-direction: column;
  justify-content: center;
  display: flex;
}
.support_flow_text:before {
  content: "";
  display: block;
  background: url(../images/top/support/support_flow_06.png) no-repeat center center;
  background-size: contain;
  width: 102px;
  height: 105px;
  position: absolute;
  right: -40px;
  top: -17px;
}
/*   サポート バナー */
.top_banner_wrap {
  margin: 40px 0 20px;
}
.top_banner_list {
    display: flex;
    justify-content:space-between;
    margin-top: 30px;
}
.top_banner_list li {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-bottom: 20px;
}
.top_banner_list li a.empty {
  width: 40px;
  background: #F1F1F1;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  border-radius: 100%;
  pointer-events: none;
}
/*   お悩み  */
.top_nayami_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_nayami_list li {
  width: 48%;
  background: #fff;
  padding:15px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 15px;
}
.top_nayami_list li p {
  text-align: left;
  line-height: 1.5;
  margin-top: 5px;
}
/*   ４つのポイント  */
.top_point_LR {
  margin-bottom: 40px;
}
.top_point_LR:nth-of-type(odd) {
}
.top_point_LR .text {
margin-bottom:25px;
  position: relative;
}
.top_point_LR .img {
text-align: center;
}
.top_point_LR .text:before {
  content: "4";
  font-size: 210px;
  line-height: 0.5;
  color: #D0DAEB;
  font-weight: bold;
  font-family: 'Overpass';
  position: absolute;
  right: 0px;
  bottom: 0;
  z-index: -1;
}
.top_point_LR:nth-of-type(2) .text:before {
  content: "1";
}
.top_point_LR:nth-of-type(3) .text:before {
  content: "2";
}
.top_point_LR:nth-of-type(4) .text:before {
  content: "3";
}
.top_point_LR .text .more_s {
margin-top:20px;

  max-width: 260px;
  width: 100%;
}
/*   おもな機能  */
.top_kinou_box {
  background: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 0 auto;
  margin-bottom: 15px;
  text-align: center;
  max-width: 850px;
}
.top_kinou_box_04 {
  margin-bottom: 30px;
}
.top_kinou_midasi {
  font-size: 20px;
  font-weight: bold;
  color: #0E4DAA;
  text-align: center;
  margin-bottom: 10px;
}
.top_kinou_list {
  max-width: 590px;
  margin: 0 auto;
  margin-top: 10px;
}
.top_kinou_list li {
  text-align: center;
  width: 32%;
}
.top_kinou_list_02 .midasi {
  font-weight: bold;
  margin: 5px 0 0 0;
	font-size:15px;
}
.top_kinou_list .midasi {
  font-weight: bold;
  margin: 5px 0 0 0;
}
.top_kinou_box p {
  margin-top: 10px;
}
.top_kinou_list_02 {
  margin: 0 auto;
  text-align: center;
  max-width: 850px;
}
.top_kinou_list_02 li {
  background: #fff;
  border-radius: 10px;
  width: 48%;
  padding: 15px;
  margin-bottom: 15px;
}
/*   OA */
.top_oa {
  background: #4AA0D9;
}
.top_oa_midasi {
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  position: relative;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  margin-bottom:30px;
}
.top_oa_midasi span {
  display: block;
  font-size: 19px;
  margin-bottom: 10px;
}
.top_oa_midasi:before, .top_oa_midasi:after {
  content: "";
  display: block;
  width: 3px;
  height: 64px;
  background: #fff;
  bottom: 0;
  margin: auto;
  position: absolute;
}
.top_oa_midasi:before {
  left: -12px;
  transform: rotate(339deg);
}
.top_oa_midasi:after {
  right: -12px;
  transform: rotate(24deg);
}
.top_oa .more a {
  max-width: 420px;
  font-size: 17px;
  height: 80px;
}
/*   選ばれる理由  */
.top_kinou_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_kinou_list.tkl_col_2 {
    justify-content: space-around;
	}
.top_kinou_list_02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_reason_list li{
  margin-bottom: 30px;
}
.top_reason_list li .img {
  text-align: center;
  margin-bottom: 25px;
}
/*   お客様の声  */
.top_voice {
  position: relative;
}
.top_nayami .icon_midasi, .top_voice .icon_midasi {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -30px;
}
.top_case_list {
}
.top_case_list li {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}
.top_case_list li a {
height: 100%;
  display: block;
  padding: 25px 20px;
  background: url(../images/common/arrow_02.png) no-repeat right 20px bottom 25px;
}
.top_case_list li a:hover {}
.top_case_list li .thumb{
text-align: center;
}
.case_cc {
  font-weight: bold;
  margin: 20px 0 15px 0;
  line-height: 1.7;
}
.case_title {
  line-height: 1.7;
  margin-bottom: 35px;
}
/*   料金プラン  */
.top_price .inner {
  max-width: 900px;
}
.top_price_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.top_price_list li {
  width: 31.5%;
}
/*   導入の流れ  */
.top_flow{
border-bottom:solid 1px #e7e7e7;
}
.top_flow_list {
  margin-top:20px;
  padding: 0 20px;
    display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}
.top_flow_list li {
  width: 45%;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}
.top_flow_list li .img{
position: relative;
}
.top_flow_list li:not(:last-of-type) .img:before {
  content: "";
  display: block;
  background: url(../images/common/arrow_01.png) no-repeat center center;
  background-size: contain;
  width: 14px;
  height: 13px;
  position: absolute;
  right: -16%;
  top: 0;
  bottom: 0;
  margin: auto;
  
}
.top_flow_list li .flow_midasi {
  font-weight: bold;
  margin-top: 15px;
}
/*　　      　top　slider　　*/
.ec-layoutRole .ec-layoutRole__contents {
  max-width: inherit;
}
.top_slider_wrap {
  position: relative;
}
.top_slider.slick-slider {
  padding: 0;
}
.top_slider li {}
/*   arrow   カスタマイズ　　*/
#arrows {
  width: 750px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  z-index: 1;
}
.top_slider .slick-arrow {
  background: none;
  border: none;
  position: absolute;
  font-size: 100px;
  color: #9eb827;
  line-height: 1;
}
#arrows .slick-arrow {
  z-index: 10;
  cursor: pointer;
  position: absolute;
  font-size: 70px;
  color: #9eb827;
  top: -35px;
}
#arrows .arrow_left {
  left: -57px;
}
#arrows .arrow_right {
  right: -57px;
}
/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  bottom: -35px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 29px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black;
}
/*                          追加   トップページ　*/
.top_blog_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_blog_list li {
  width: 49%;
  margin-bottom: 20px;
}
.blog_meta {
  line-height: 1;
  margin-top: 10px;
}
.blog_meta .date, .blog_meta .cat_name_wrap {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.blog_meta .cat_name_wrap {
  font-size: 10px;
}
.blog_meta .cat_name_wrap a {
  text-decoration: underline;
  margin-right: 5px;
}
.blog_meta .date {
  letter-spacing: 0px;
  padding-left: 5px;
  border-left: solid 1px #ccc;
  font-size: 10px;
}
.top_blog_list .title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.4;
  margin: 5px 0 11px 0;
}
.top_blog_list .bassui {
  line-height: 1.5;
  font-size: 14px;
  display: none;
}
.bg_usu_green {
  background: #f2f7de;
}
/*　　　　　　　　　　　　　　　　　　　　archive　*/
.article-group .top_blog_list {
  justify-content: space-between;
}
.article-group .top_blog_list li {
  width: 49%;
  margin-bottom: 20px;
}
.main-content-title {}
/*            footer                  */
.footer > .inner {
  color: #fff;
  padding: 30px 0 30px 0;
}
.footer_L {}
.footer_midasi {
  font-weight: bold;
  font-size:25px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 30px;
}
.footer_midasi span {
  font-size: 18px;
  letter-spacing:0px;
  display: block;
  margin-bottom: 10px;
    font-weight: normal;

}
.footer_LR {
}
.footer_LR > div {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}
.footer_L {
  border-bottom: solid 1px #fff;
  border-top: solid 1px #fff;
  
}
.footer_sub_midasi {
  font-size: 20px;
  margin-bottom: 20px;
}

.footer_R .footer_sub_midasi{
  margin-bottom: 25px;

}
.footer_tel {
margin-bottom: 5px;
}
.footer_tel a {
  font-weight: bold;
  font-size:35px;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1;
}
.footer_R .more {
  margin: 0 auto;
  margin-bottom: 16px;
}
.footer_R .more a {
  font-size: 20px;
  max-width: 330px;
  height: 70px;
  font-weight: bold;
}
/*  footer 下*/
.footer_sita {
  background: #fff;
    padding: 15px 15px 100px;
}
.footer_sita .inner{


}
.footer_sita .inner .L{
text-align: center;


}
.footer_sita .inner .L img{
width:100px;
}

.footer_nav{

    display: flex;
    justify-content:center;
    flex-wrap: wrap;
	margin: 10px 0px;
}
.footer_nav a{
font-size: 12px;
font-weight: bold;
margin:0 10px;
}
.copy {
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
}
/*  footer fix */
.footer_fix .inner > div, .footer_fix .inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer_fix .L > div, .footer_fix .R > div, .footer_fix .inner > div {
  width: 50%;
}
.footer_fix .L > div, .footer_fix .R > div {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.footer_fix {
  height: 70px;
  background: #0E4DAA;
  color: #fff;
  padding: 10px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.2s ease-out 0s;
  transform: translateY(100%);
}
.footer_fix .inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.ff_01 img {
  max-width: 200px;
      width: 100%;
}
.ff_02 {
  font-size: 15px;
}
.ff_03 {
  font-size: 10px;
  letter-spacing: 0px;
}
.ff_03 a {
  font-size: 20px;
  color: #FAAF3B;
  font-weight: bold;
}
.ff_04 a {
  font-size: 15px;
  border-radius: 50px;
  background: #E04658;
  color: #fff;
  display: block;
  padding: 10px 10px;
  width: fit-content;
  margin: 0 auto;
  letter-spacing: 0px;
  font-weight: bold;
  transition: all 0.2s ease-out 0s;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  max-width: 255px;
  width: 100%;
  height: 50px;
}
/* 追尾時*/
.footer_fix.scrolled {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translate(0);
      z-index: 2;
}







/*   ふわっと下から出てくる　見出し　*/
.kinou_box_04 .kinou_midasi_txt,
.kinou_midasi_wrap,
.kinou_midasi_02,
.kinou_midasi_01,
.top_kinou_box,
.top_midasi_01,
.top_midasi_02,
.fadeInUp {
	opacity : 0;
	transform: translateY(50px);
	transition: all 0.5s ease-out 0.3s;
}


/*   ふわっと画像　左　*/
.kinou_detail_box:nth-of-type(odd) .img,
.fadeInLeft {
	opacity : 0;
	transform: translateX(-50px);
	transition: all 0.3s ease-out 0.5s;
}

/*   ふわっと画像　右　*/
.kinou_detail_box:nth-of-type(even) .img,
.fadeInRight {
	opacity : 0;
	transform: translateX(50px);
	transition: all 0.3s ease-out 0.5s;
}

/*機能　インボイス制度　2022.10.12追加*/
.invoice_point{
  color: #0071B9;
  padding: 0.5em 0;
  border-top: solid 3px #0071B9;
  border-bottom: solid 3px #0071B9;
  text-align:center;
  font-size:18px;
  font-weight:bold;
  margin-top:10px;
}

/*お役立ち情報　最下部リンクボタン 2022.10.18追加*/
a.blog_link_txt {
text-decoration:underline;
color:#007cba;
}