@charset "UTF-8";
/*★☆★　タブレット以下全てipadminiまで　★☆★*/
@media only screen and (max-width: 768px) {
  /*メインビジュアル*/
  .top_visualSP_wrapper {
    background: url(/image/top/bgGray.gif) repeat;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .top_visualSP_wrapper ul {
    margin: 0 auto;
    text-align: center;
    padding: 4vw 0;
  }
  .top_visualSP_wrapper ul li {
    list-style-type: none;
  }
  .top_visualSP_wrapper ul li .top_visual_but {
    background: linear-gradient(0deg, rgb(26, 69, 148) 100%, rgb(18, 72, 172) 100%, rgb(8, 33, 80) 100%);
    color: #FFF;
    border-radius: 6px;
    width: 55%;
    font-size: 1rem;
    letter-spacing: 1.8px;
    border: solid 1px #FFF;
    padding: 7px 20px;
    margin: 10px 0 0 0;
  }
  .top_visualSP_wrapper ul li p {
    margin: 0;
  }
  .top_visualSP_wrapper ul li p.subTitle {
    padding: 2.5vw 0 0 0;
    line-height: 1.5;
  }
  /*  +‥‥‥‥  js/progressBar.js Start  ‥‥‥‥+ */
  /* Loading背景画面設定　*/
  #splash {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    margin-top: 73px;
  }
  /* Loadingバー中央配置　*/
  #splash_text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 100%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
  #splash_text svg {
    height: 2px;
  }
  #cont {
    margin: 20px;
    width: 100%;
    height: 8px;
  }
  /*   +‥‥‥‥  js/progressBar.js END  ‥‥‥‥+   */
  .headerSP_img {
    width: 26.6vw;
    max-width: 170px;
    min-width: 100px;
    height: auto;
    margin-left: 3.2vw;
    margin-right: 3.2vw;
    z-index: 99999;
  }
  /*SVGのuse指定アイコン*/
  .iconBase {
    fill: currentColor;
  }
  .icon_solid, .icon_xmark {
    color: #7B7B7B;
    width: 5.2vw;
    height: 5.2vw;
    min-width: 2.1rem;
    min-height: 2.1rem;
    max-height: 2.5rem;
    max-width: 2.5rem;
  }
  .icon_home, .icon_mail, .icon_company {
    color: #333;
    width: 5vw;
    height: 5vw;
    display: block;
    margin: 0 auto;
  }
  .icon_homeW, .icon_kokW, .icon_eltaxW, .icon_mailW,
.icon_quesW, .icon_telW {
    color: #FFF;
    min-width: 20px !important;
    max-width: 29px !important;
    width: 5.3vw;
    height: 5.3vw;
    display: block;
    margin: 0 auto;
  }
  /*以下ハンバーガー内*/
  /*   +‥‥‥‥ ▼▼ ナビゲーション1段目 ▼▼  ‥‥‥‥+   */
  ul.navList_first {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #FFF;
    justify-content: center;
    margin: 1rem 0;
  }
  ul.navList_first li {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    padding: 3.5% 0 2.5% 0;
  }
  ul.navList_first li a {
    font-size: 3.7vw;
    line-height: 1.5;
    text-decoration: none;
    display: flex;
    flex-direction: column;
  }
  ul.navList_first li svg.icon_navList_first {
    width: 10vw;
    height: 10vw;
    min-width: 37.5px;
    max-width: 76.8px;
    margin: 0 auto;
  }
  ul.navList_first li:nth-child(1) {
    background-color: #005648;
  }
  ul.navList_first li:nth-child(1):active, ul.navList_first li:nth-child(1):hover {
    background-color: #01473C;
  }
  ul.navList_first li:nth-child(2) {
    background-color: #07613A;
  }
  ul.navList_first li:nth-child(2):active, ul.navList_first li:nth-child(2):hover {
    background-color: #074A2C;
  }
  ul.navList_first li:nth-child(3) {
    background-color: #158854;
  }
  ul.navList_first li:nth-child(3):active, ul.navList_first li:nth-child(3):hover {
    background-color: #12633E;
  }
  ul.navList_first li:nth-child(4) {
    background-color: #175788;
  }
  ul.navList_first li:nth-child(4):active, ul.navList_first li:nth-child(4):hover {
    background-color: #0F3B5D;
  }
  ul.navList_first li:nth-child(5) {
    background-color: #1768A7;
  }
  ul.navList_first li:nth-child(5):active, ul.navList_first li:nth-child(5):hover {
    background-color: #0B4C7E;
  }
  ul.navList_first li:nth-child(6) {
    background-color: #178EA7;
  }
  ul.navList_first li:nth-child(6):active, ul.navList_first li:nth-child(6):hover {
    background-color: #05697E;
  }
  ul.navList_first li:nth-child(3n) {
    margin-right: 0;
    padding-right: 0;
  }
  ul.navList_first li:nth-child(3n+1):nth-last-child(-n+3) {
    margin-bottom: 0;
  }
  ul.navList_first li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
    margin-bottom: 0;
  }
  ul.navList_first2 {
    display: flex;
    justify-content: center;
    width: 89%;
    box-shadow: 0 0.125rem 0.25rem 0.2rem rgba(0, 0, 0, 0.075) !important;
    -moz-box-shadow: 0 0.125rem 0.25rem 0.2rem rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: 0 0.125rem 0.25rem 0.2rem rgba(0, 0, 0, 0.075);
    -ms-box-shadow: 0 0.125rem 0.25rem 0.2rem rgba(0, 0, 0, 0.075);
    margin: 0 auto;
  }
  ul.navList_first2 li {
    border: none;
    width: 50%;
    height: 13.3vw;
    display: flex;
    align-items: center;
  }
  ul.navList_first2 li:first-child {
    border-right: 1px solid rgba(217, 217, 217, 0.9);
  }
  ul.navList_first2 li:first-of-type img {
    width: 6.5vw;
    min-width: 24px;
    max-width: 50px;
  }
  ul.navList_first2 li:last-of-type img {
    width: 6vw;
    min-width: 22px;
    max-width: 46px;
  }
  ul.navList_first2 li span {
    vertical-align: middle;
    display: inline-flex;
  }
  ul.navList_first2 a {
    font-size: 4.2vw;
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
  }
  ul.navList_first2 img {
    width: 6vw;
    height: auto;
    margin-left: 8vw;
  }
  /*navList_first END*/
  /*   +‥‥‥‥ ▼▼ ナビゲーション2段目 ▼▼  ‥‥‥‥+    */
  .navList_second {
    width: 90%;
    margin: 0 auto 6vw auto;
    white-space: nowrap;
  }
  .navList_second h2 {
    text-align: left;
    font-weight: normal;
    margin-bottom: 1vw;
    font-size: 5.3vw;
  }
  .navList_second ul {
    margin: 0;
  }
  .navList_second ul li a:hover, .navList_second ul li a:active {
    background-color: rgba(238, 238, 238, 0.9333333333);
    text-decoration: none;
  }
  .navList_secondIn {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .navList_secondIn li {
    width: 100%;
    display: block;
    padding-lef: 0 !important;
    margin-lef: 0 !important;
  }
  .navList_secondIn li a {
    padding-lef: 0 !important;
    margin-lef: 0 !important;
  }
  .navList_secondIn li ul.second_inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    vertical-align: middle;
    align-items: center;
    height: 17vw;
    border-bottom: 1px solid #7B7B7B;
  }
  .navList_secondIn li ul.second_inner li {
    display: flex;
    align-items: center;
    vertical-align: middle;
  }
  .navList_secondIn li ul.second_inner li:nth-child(1) {
    font-size: 4.2vw;
    display: flex;
    justify-content: flex-start;
    margin: 0px clamp(1px, 6%, 240px) 0;
  }
  .navList_secondIn li ul.second_inner li:nth-child(1) p {
    display: flex;
    align-items: center;
  }
  .navList_secondIn li ul.second_inner li:nth-child(1) p span {
    margin-left: 3vw;
  }
  .navList_secondIn li ul.second_inner li:nth-child(2) {
    font-size: 3.7vw;
    display: flex;
    justify-content: flex-end;
    padding-right: 5%;
  }
  .navList_secondIn li ul.second_inner li img.navicon07 {
    width: 8vw;
    height: 8vw;
    max-width: 61.4px;
    min-width: 30px;
    margin-right: 13px;
  }
  .navList_secondIn li ul.second_inner li img.arrow_link {
    width: 1rem;
    height: auto;
  }
  .navList_secondIn li ul.second_inner.none {
    border-bottom: none;
  }
  /*  ナビゲーション2段目 END */
  /*   +‥‥‥‥ ▼▼ ナビゲーション3段目 ▼▼  ‥‥‥‥+  */
  div.navList_third {
    width: 100%;
    padding: 0;
  }
  div.navList_third ul {
    margin: 0;
  }
  div.navList_third h2 {
    text-align: center;
    font-weight: normal;
    margin-bottom: 1vw;
    font-size: 5.3vw;
  }
  div.navList_third ul .thirdInner li:hover {
    background-color: rgba(238, 238, 238, 0.9333333333);
  }
  div.navList_third ul li {
    border-bottom: 1px solid #C8C8C8;
    width: 50%;
    height: 17vw;
    font-size: 3.7vw;
  }
  div.navList_third ul li:nth-child(1) img {
    width: 8vw;
    height: auto;
  }
  div.navList_third ul li:nth-child(2) img {
    width: 10vw;
    height: auto;
  }
  .navList_third ul.navList_thirdInner {
    margin: 0;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
  }
  .navList_third ul.navList_thirdInner li {
    border: none;
    width: 33.3333333333%;
    height: 17vw;
  }
  .navList_third ul.navList_thirdInner li a {
    margin: 0;
  }
  .navList_third ul.navList_thirdInner.contactnav li:active, .navList_third ul.navList_thirdInner.contactnav li:hover {
    background-color: rgba(238, 238, 238, 0.9333333333);
  }
  .thirdInner a:hover {
    text-decoration: none;
  }
  .law a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .thirdInner li:active, .thirdInner li:hover {
    background-color: rgba(238, 238, 238, 0.9333333333);
  }
  .b_R {
    border-right: 1px solid #C8C8C8;
  }
  .b_T {
    border-top: 1px solid #C8C8C8;
  }
  /* navList_third END */
  /*   +‥‥‥‥ ▼▼ ナビゲーション4段目 ▼▼  ‥‥‥‥+   */
  div.navList_fourth {
    width: 100%;
    padding: 0;
  }
  div.navList_fourth ul {
    margin: 0;
  }
  div.navList_fourth ul li {
    border-bottom: 1px solid #C8C8C8;
  }
  div.navList_fourth ul li section h3.choiceTit {
    position: relative;
    cursor: pointer;
    font-size: 3.7vw;
    font-weight: normal;
    height: 17vw;
    margin: 0;
    transition: all 0.5s ease;
    padding: 0;
  }
  div.navList_fourth ul li section h3.choiceTit.close {
    background-color: rgba(238, 238, 238, 0.9333333333);
  }
  div.navList_fourth ul li section div.inContents ul li {
    font-size: 3.7vw;
    padding: auto 5% auto 5%;
    height: 17vw;
    padding-left: 5vw;
  }
  div.navList_fourth ul li section div.inContents ul li:last-child {
    border-bottom: none;
  }
  div.navList_fourth ul li section div.inContents ul li::after {
    content: "";
    position: absolute;
    bottom: 40%;
    right: 3%;
    border-style: solid;
    border-width: 1.8vw 0 1.8vw 1.8vw;
    border-color: transparent transparent transparent #7B7B7B;
    transform: rotate(360deg);
  }
  /* navList_navList_fourth END */
  /*footerエリア*/
  .footer_contArea {
    width: 100%;
    display: flex;
    z-index: 9999;
  }
  .footer_contArea ul {
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    vertical-align: middle;
    justify-content: center;
    margin: 8px 0;
  }
  .footer_contArea ul li {
    align-items: center;
  }
  .footer_contArea ul li .areaDeco, .footer_contArea ul li .areaDeco2 {
    padding: 2px 5px;
    background: #FFF;
  }
  .footer_contArea ul li.law a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer_contArea ul:nth-child(1) {
    width: 75%;
    align-items: stretch;
    vertical-align: middle;
    margin: 0 0 0 3%;
  }
  /* navList_third END */
  /*    +‥‥‥‥ ▼▼ ナビゲーション4段目 ▼▼  ‥‥‥‥+  */
  .navList_footer {
    width: 100%;
  }
  .navList_footer div.footer_contArea {
    background-color: #E5ECEB;
    bottom: 6vh;
  }
  .navList_footer p.footer_copy {
    text-align: center;
    font-size: 0.63rem;
    padding: 3vw 6vw;
    background-color: #005648;
    width: 100%;
    height: 6vh;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
  }
  /* navList_footer END */
} /* max-width:768px END */
/*★☆★　TOPページ　★☆★*/
@media only screen and (max-width: 768px) {
  .serviceALL {
    width: calc(100% - 2.5rem);
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .serviceALL > section {
    margin-bottom: 6vw;
  }
  .serviceALL .main_content_02 > section {
    margin-bottom: 6vw;
  }
  .serviceALL .main_content_02 > section:last-of-type {
    margin-bottom: 40vw;
  }
  .serviceALL .main_content_02.serviceM > section {
    margin-bottom: 13vw;
  }
  .serviceALL .main_content_02.serviceM > section:last-of-type {
    margin-bottom: 40vw;
  }
  .serviceALL .scene_content ul li {
    margin-bottom: 6vw;
  }
  /*ソリューション一覧*/
  .backgroundWrap.solution {
    background-image: url(../image/share/triaBg.png);
    background-repeat: no-repeat;
    background-size: 104vw 50vw;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
  }
  .solutionWrap ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    border: 1px solid #D5D5D5;
    background-color: #FFF;
    box-shadow: 0 0.125rem 0.25rem 0.1rem rgba(0, 0, 0, 0.075) !important;
  }
  .solutionWrap ul li {
    width: 25%;
    border-right: 1px solid #CCC;
    box-sizing: border-box;
    align-items: stretch;
    height: 9.8vw;
    padding: 0;
    height: 19vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
  .solutionWrap ul li:last-child {
    border-right: none;
  }
  .solutionWrap ul li:nth-child(2n) {
    margin-right: 0;
    padding-right: 0;
  }
  .solutionWrap ul li:nth-child(2n+1), .solutionWrap ul li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
  .solutionWrap ul li:nth-child(2n+1), .solutionWrap ul li:nth-last-child(-n+2) ~ li {
    margin-bottom: 0;
  }
  .solutionWrap ul li .solutionImg.elQr {
    width: 8vw;
    height: 8vw;
    min-width: 37.5px;
    max-width: 40px;
  }
  .solutionWrap ul li .solutionImg.tax {
    width: 10vw;
    height: 8vw;
    min-width: 37.5px;
    max-width: 50px;
  }
  .solutionWrap ul li .solutionImg.donation {
    width: 10vw;
    height: 8vw;
    min-width: 37.5px;
    max-width: 40px;
  }
  .solutionWrap ul li .solutionImg.school {
    width: 10vw;
    height: 8vw;
    min-width: 37.5px;
    max-width: 50px;
  }
  /* 決済手段一覧*/
  .top_payment .top_payment_block {
    width: 100% !important;
  }
  .top_payment .top_payment_block ul {
    box-shadow: 0 0.125rem 0.25rem 0.1rem rgba(0, 0, 0, 0.075) !important;
  }
  .top_payment .top_payment_block ul li {
    width: 25%;
    list-style: none;
    margin: 0;
    position: relative;
    border-bottom: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5;
  }
  .top_payment .top_payment_block ul li:nth-child(4n) {
    margin-right: 0;
    padding-right: 0;
  }
  .top_payment .top_payment_block ul li:nth-child(4n+1), .top_payment .top_payment_block ul li:nth-last-child(-n+4) {
    margin-bottom: 0;
  }
  .top_payment .top_payment_block ul li:nth-child(4n+1), .top_payment .top_payment_block ul li:nth-last-child(-n+4) ~ li {
    margin-bottom: 0;
  }
  .top_payment .top_payment_block ul li:nth-child(1), .top_payment .top_payment_block ul li:nth-child(5), .top_payment .top_payment_block ul li:nth-child(9) {
    border-left: 1px solid #D5D5D5;
  }
  .top_payment .top_payment_block ul li:nth-child(-n+4) {
    border-top: 1px solid #D5D5D5;
  }
  .top_payment .top_payment_block ul li a:hover {
    background-color: #e2f3ef;
  }
  .top_payment .top_payment_block ul li a {
    position: relative;
  }
  .top_payment .top_payment_block ul li a:after {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #004335;
    border-left: 8px solid transparent;
  }
  .top_payment .top_payment_block ul li a img {
    width: 100%;
    height: auto;
  }
  /* 決済手段一覧 END*/
  /* 導入事例 */
  .top_case .top_case_listSP {
    padding: 0;
    width: 100% !important;
    margin: 0;
  }
  .top_case .top_case_listSP h3 {
    margin: 0 0 0 0;
    font-weight: normal;
    padding: 3vw 4vw;
    background-color: #FFF;
    font-size: 3.7vw;
    display: flex;
    align-items: center;
  }
  .top_case .top_case_listSP h3 img.introImg {
    width: 8vw;
    height: auto;
    min-width: 30px;
    max-width: 50px;
    margin-right: 2vw;
  }
  .top_case .top_case_listSP h3 img.introImg.chousei {
    padding: 3px;
  }
  .top_case .top_case_listSP h3 a {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .top_case .top_case_listSP ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
  }
  .top_case .top_case_listSP ul::after {
    content: "";
    display: block;
    width: 33.3%;
  }
  .top_case .top_case_listSP ul li {
    padding: 0;
    width: 33.3333333333%;
  }
  .top_case .top_case_listSP ul li img {
    width: 100%;
    height: auto;
  }
  /* 導入事例 END*/
  /* TAB切り替え /index/（目的別）
  ----------------------------------------*/
  .top_scene {
    margin-bottom: 150px;
  }
  .top_scene .top_scene_block {
    width: 100%;
  }
  ul.tab li {
    display: block;
    margin: 0;
    padding: 3% 0;
    text-decoration: none;
  }
  .tabNav ul.tab {
    width: 100%;
    margin: 0;
    display: flex;
    overflow: auto;
    white-space: unset;
    padding: 0;
  }
  .tabNav ul.tab li {
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-radius: 5px 5px 0 0;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tabNav ul.tab li a {
    display: block;
    margin: 0;
    text-decoration: none;
    line-height: 1.3;
    color: #005648;
  }
  .tabNav ul.tab li:nth-child(2n) {
    border-left: none;
  }
  .tabArea {
    display: none;
    background: #fff;
    padding: 0;
  }
  .tabArea ul.choice_areA, .tabArea ul.choice_areB {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .tabArea ul.choice_areA li, .tabArea ul.choice_areB li {
    list-style: none;
    box-sizing: border-box;
    padding: 2% 0 0 4%;
    width: 100%;
    position: relative;
  }
  .tabArea ul.choice_areA li a, .tabArea ul.choice_areB li a {
    display: flex;
    align-items: center;
  }
  .tabArea ul.choice_areA li a img, .tabArea ul.choice_areB li a img {
    width: 6vw;
    height: auto;
    margin-right: 2vw;
    min-width: 21.9px;
    max-width: 50px;
  }
  .tabArea ul.choice_areA li a p, .tabArea ul.choice_areB li a p {
    margin: 3vw 0;
  }
  .tabArea ul.choice_areA li, .tabArea ul.choice_areB li {
    padding: 1.4vw 4vw;
    width: 100%;
    border-bottom: 1px solid #CCC;
  }
  .tabArea ul.choice_areA li:last-child, .tabArea ul.choice_areB li:last-child {
    border-bottom: none;
  }
  .tabArea ul.choice_areA li:nth-child(odd), .tabArea ul.choice_areB li:nth-child(odd) {
    background-color: #F8F8F8;
  }
  .tabArea ul.choice_areA li p, .tabArea ul.choice_areB li p {
    width: 66vw;
  }
  .tabArea ul.choice_areA li::after, .tabArea ul.choice_areB li::after {
    content: "";
    position: absolute;
    bottom: 40%;
    right: 5%;
    border-style: solid;
    border-width: 1.8vw 0 1.8vw 1.8vw;
    border-color: transparent transparent transparent #7B7B7B;
    transform: rotate(360deg);
  }
  .tabArea .tabArea.is-active {
    display: block !important; /*表示*/
    -webkit-animation-name: tabAnime;
            animation-name: tabAnime;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  /* TAB切り替え END
  ----------------------------------------*/
  /*以下複数の切り替え用*/
  ul.tab.scene {
    width: 100%;
    margin: 0;
    display: flex;
    overflow: auto;
    white-space: nowrap;
    padding: 0 0 20px 0;
  }
  /*TAB END*/
  /* footer PCと連動*/
  .footer_info_block .footer_info__link {
    width: 100%;
  }
  .footer_info_block .footer_copy {
    width: 80%;
  }
  .footer_info_block .footer_info__linkSP {
    color: #FFF;
    display: flex;
    justify-content: space-around;
    padding: 4% 0 2% 0;
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #1AA667;
  }
  .footer_info_block .footer_info__linkSP li {
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    font-size: 3.2vw;
    line-height: 1.75;
    width: 33.3%;
  }
  .footer_info_block .footer_info__linkSP li svg {
    margin-bottom: 3%;
  }
  .footer_info__link {
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    /* padding: 30px 0 20px 0; */
    list-style: none;
    /* text-align: center; */
    color: #000;
  }
  .footer_info__link li:hover {
    text-decoration: none;
  }
  .sp_menu.nav.overlay-content div div p.footer_copy {
    display: none;
  }
  .sp_menu.nav.overlay-content.active div div p.footer_copy {
    display: block;
  }
  /* footer END*/
} /* max-width:768px END */
/*# sourceMappingURL=sp_baseStyle.css.map */