@charset "UTF-8";
/*----------------------------------------------
variable
----------------------------------------------*/
.breadcrumb ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  padding: 0 0 20px; }
  @media (max-width: 767px) {
    .breadcrumb ul {
      padding: 0 0 calc(20 / 390 * 100vw); } }
  .breadcrumb ul li {
    font-size: 10px;
    line-height: 1.5;
    color: #000;
    font-weight: normal;
    list-style: none; }
    @media (max-width: 767px) {
      .breadcrumb ul li {
        font-size: calc(10 / 390 * 100vw); } }
    .breadcrumb ul li:not(:last-of-type)::after {
      content: " / ";
      display: inline-block;
      margin-left: 7px;
      margin-right: 7px; }
      @media (max-width: 767px) {
        .breadcrumb ul li:not(:last-of-type)::after {
          margin-left: calc(7 / 390 * 100vw);
          margin-right: calc(7 / 390 * 100vw); } }
    .breadcrumb ul li a {
      color: #000;
      text-decoration: none; }
      .breadcrumb ul li a:hover {
        text-decoration: underline;
        color: #000; }

.topSec01 .inner {
  padding: 20px 19px 0;
  position: relative; }
  @media (max-width: 767px) {
    .topSec01 .inner {
      padding: calc(20 / 390 * 100vw) calc(15 / 390 * 100vw); } }
.topSec01 .appRankBnr {
  position: absolute;
  top: 0;
  right: 0; }
  @media (max-width: 767px) {
    .topSec01 .appRankBnr {
      top: calc(60 / 390 * 100vw);
      right: calc(-5 / 390 * 100vw); } }
  @media (max-width: 767px) {
    .topSec01 .appRankBnr img {
      width: calc(90 / 390 * 100vw); } }
.topSec01 .badge {
  position: absolute;
  top: 4px;
  right: 10px; }
  @media (max-width: 1200px) {
    .topSec01 .badge {
      top: 80px; } }
  @media (max-width: 767px) {
    .topSec01 .badge {
      top: calc(111 / 390 * 100vw);
      right: calc(5 / 390 * 100vw); } }
  @media (max-width: 767px) {
    .topSec01 .badge img {
      width: calc(160 / 390 * 100vw); } }
.topSec01 .h1Title {
  margin-bottom: 25px;
  margin-top: 8px; }
  @media (max-width: 767px) {
    .topSec01 .h1Title {
      margin-bottom: calc(30 / 390 * 100vw); } }
  .topSec01 .h1Title br {
    display: none; }
    @media (max-width: 1200px) {
      .topSec01 .h1Title br {
        display: block; } }
.topSec01 .topSec01Img {
  text-align: center;
  position: relative; }
.topSec01 .btnWrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 30px 20px 55px;
  width: 695px;
  max-width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px; }
  @media (max-width: 767px) {
    .topSec01 .btnWrap {
      position: static;
      transform: none;
      padding: calc(15 / 390 * 100vw) 0 0;
      width: 100%;
      background: none; } }
  .topSec01 .btnWrap .text {
    color: #ED544A;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px; }
    @media (max-width: 767px) {
      .topSec01 .btnWrap .text {
        font-size: calc(15 / 390 * 100vw);
        margin-bottom: calc(10 / 390 * 100vw); } }

.topSec02 .column {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 65px auto 80px; }
  @media (max-width: 767px) {
    .topSec02 .column {
      flex-direction: column;
      margin: calc(30 / 390 * 100vw) auto; } }
  .topSec02 .column .item {
    position: relative; }
    .topSec02 .column .item:first-of-type {
      margin-right: 40px; }
      @media (max-width: 767px) {
        .topSec02 .column .item:first-of-type {
          margin-right: 0; } }
    @media (max-width: 767px) {
      .topSec02 .column .item:not(:first-of-type) {
        margin-top: calc(30 / 390 * 100vw); } }
  .topSec02 .column .itemTitle {
    background: #E3EEE8;
    border: 3px solid #318A50;
    padding: 7px 39px;
    text-align: center;
    display: table;
    color: #318A50;
    font-size: 1.8rem;
    line-height: 1.444;
    position: absolute;
    top: -35px;
    left: -22px; }
    @media (max-width: 1040px) {
      .topSec02 .column .itemTitle {
        left: -10px; } }
    @media (max-width: 767px) {
      .topSec02 .column .itemTitle {
        position: static;
        transform: translate(-10px, 10px);
        text-align: left;
        padding: calc(7 / 390 * 100vw) calc(10 / 390 * 100vw);
        font-size: calc(16 / 390 * 100vw); } }
  .topSec02 .column .itemImg img {
    width: 100%; }
  .topSec02 .column .itemText {
    background: #FFFAF9;
    border: 2px solid #ED544A;
    color: #ED544A;
    display: table;
    padding: 9px 27px;
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    right: -20px;
    bottom: -23px; }
    @media (max-width: 1040px) {
      .topSec02 .column .itemText {
        right: -10px; } }
    @media (max-width: 767px) {
      .topSec02 .column .itemText {
        position: relative;
        margin-left: auto;
        max-width: calc(240 / 390 * 100vw);
        padding: calc(7 / 390 * 100vw) calc(10 / 390 * 100vw);
        font-size: calc(16 / 390 * 100vw);
        margin-top: calc(-20 / 390 * 100vw);
        right: -10px;
        top: 0; } }

.topSec03 .topSec03Img {
  text-align: center; }
.topSec03 .column {
  border-top: 2px solid #318A50;
  border-bottom: 2px solid #318A50;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between; }
  @media (max-width: 767px) {
    .topSec03 .column {
      flex-direction: column; } }
  .topSec03 .column .item {
    width: calc(100% / 2);
    padding: 36px 28px 33px; }
    .topSec03 .column .item:not(:first-of-type) {
      border-left: 2px solid #318A50; }
      @media (max-width: 767px) {
        .topSec03 .column .item:not(:first-of-type) {
          border-left: none;
          border-top: 2px solid #318A50; } }
    @media (max-width: 767px) {
      .topSec03 .column .item {
        width: 100%;
        padding: calc(20 / 390 * 100vw) calc(15 / 390 * 100vw); } }
  .topSec03 .column .itemImg {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 48px; }
    @media (max-width: 767px) {
      .topSec03 .column .itemImg {
        margin-bottom: calc(20 / 390 * 100vw); } }
  .topSec03 .column .itemText {
    font-size: 1.6rem;
    line-height: 1.625;
    font-weight: normal; }
    @media (max-width: 767px) {
      .topSec03 .column .itemText {
        font-size: calc(15 / 390 * 100vw); } }

.topSec04 .flow {
  max-width: 940px;
  margin: 40px auto 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: stretch; }
  @media (max-width: 767px) {
    .topSec04 .flow {
      margin: calc(20 / 390 * 100vw) 0 calc(50 / 390 * 100vw);
      flex-direction: column;
      transform: none;
      justify-content: flex-start; } }
.topSec04 .flowItem {
  width: calc((100% - 12px) / 4); }
  @media (max-width: 767px) {
    .topSec04 .flowItem {
      width: 100%;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      height: calc(180 / 390 * 100vw); } }
.topSec04 .flowItemTitle {
  background: #318A50;
  color: #fff;
  padding: 30px 10px;
  text-align: center;
  font-size: 2rem;
  line-height: 1.45;
  font-weight: bold;
  margin-bottom: 25px;
  position: relative;
  clip-path: polygon(0 0, 82.7% 0, 100% 50%, 82.7% 100%, 0 100%); }
  @media (max-width: 767px) {
    .topSec04 .flowItemTitle {
      padding: calc(10 / 390 * 100vw) calc(10 / 390 * 100vw);
      font-size: calc(15 / 390 * 100vw);
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      flex-shrink: 0;
      margin-right: calc(15 / 390 * 100vw);
      clip-path: polygon(0 0, 0 90%, 50% 100%, 100% 90%, 100% 0);
      margin-bottom: calc(3 / 390 * 100vw); }
      .topSec04 .flowItemTitle .txtEn {
        text-orientation: upright; }
      .topSec04 .flowItemTitle .tate-cho {
        display: inline-block;
        transform: rotate(90deg); }
    @-moz-document url-prefix() {
      .topSec04 .flowItemTitle .tate-cho {
        transform: none; } }
      .topSec04 .flowItemTitle .kakko {
        display: inline-block;
        transform: translateX(calc(1.5 / 390 * 100vw)); } }
  .topSec04 .flowItemTitle .txt {
    transform: translateX(-8%);
    display: inline-block; }
    @media (max-width: 767px) {
      .topSec04 .flowItemTitle .txt {
        transform: translateY(-8%); } }
.topSec04 .flowItemText {
  font-size: 1.6rem;
  font-weight: normal;
  padding-right: 40px; }
  @media (max-width: 1020px) {
    .topSec04 .flowItemText {
      padding-right: calc(40 / 1020 * 100vw); } }
  @media (max-width: 767px) {
    .topSec04 .flowItemText {
      font-size: calc(15 / 390 * 100vw);
      padding-right: 0; } }
.topSec04 .implementationList {
  max-width: 1000px;
  margin: 30px auto 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media (max-width: 767px) {
    .topSec04 .implementationList {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto; } }
.topSec04 .implementationListItem {
  width: calc((100% - 100px)/3);
  text-align: center; }
  @media (max-width: 767px) {
    .topSec04 .implementationListItem {
      width: 100%; }
      .topSec04 .implementationListItem:not(:first-of-type) {
        margin-top: calc(20 / 390 * 100vw) !important; } }
  .topSec04 .implementationListItem:nth-of-type(n+4) {
    margin-top: 42px; }

.topSec05 .h3Title {
  font-size: 3.2rem;
  line-height: 1.4375;
  font-weight: bold;
  margin: 0 0 26px;
  color: #004831; }
  @media (max-width: 767px) {
    .topSec05 .h3Title {
      font-size: calc(22 / 390 * 100vw);
      margin: 0 0 calc(20 / 390 * 100vw); } }
.topSec05 .topSec05Img {
  text-align: center;
  margin-top: 35px;
  display: block; }
  @media (max-width: 767px) {
    .topSec05 .topSec05Img {
      margin-top: calc(30 / 390 * 100vw); } }

/*-------------------------------------------
//導入事例
-------------------------------------------*/
.topSec02 {
  border-top: 2px solid #318A50; }
  .topSec02 .contentBox {
    max-width: 1033px;
    width: 100%;
    margin: 0 auto;
    padding: 0 18px; }
    @media (max-width: 767px) {
      .topSec02 .contentBox {
        padding: 0 calc(14 / 390 * 100vw); } }
    .topSec02 .contentBox .titleArea {
      text-align: center; }
      .topSec02 .contentBox .titleArea .titleTxt {
        color: #004831;
        font-size: 3.2rem; }
        @media (max-width: 767px) {
          .topSec02 .contentBox .titleArea .titleTxt {
            font-size: calc(25 / 390 * 100vw); } }
    .topSec02 .contentBox .dotted {
      background-image: linear-gradient(to right, #293642 5px, transparent 5px);
      background-size: 10px 3px;
      background-repeat: repeat-x;
      background-position: left bottom;
      padding-bottom: 23px; }
      @media (max-width: 767px) {
        .topSec02 .contentBox .dotted {
          padding-bottom: calc(20 / 390 * 100vw); } }
    .topSec02 .contentBox .column02 {
      max-width: 100%;
      margin-top: 34px;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: space-between; }
      @media (max-width: 767px) {
        .topSec02 .contentBox .column02 {
          margin-top: calc(20 / 390 * 100vw);
          flex-direction: column; } }
      .topSec02 .contentBox .column02 .columnImg {
        width: 46.5%; }
        @media (max-width: 767px) {
          .topSec02 .contentBox .column02 .columnImg {
            width: 100%;
            text-align: center; } }
        .topSec02 .contentBox .column02 .columnImg img {
          width: 100%; }
      .topSec02 .contentBox .column02 .columnText {
        width: 50%;
        text-align: center; }
        @media (max-width: 767px) {
          .topSec02 .contentBox .column02 .columnText {
            width: 100%;
            margin-top: calc(20 / 390 * 100vw); } }
        .topSec02 .contentBox .column02 .columnText .columnTitle {
          line-height: 86px;
          color: #040404;
          font-size: 3rem;
          font-weight: bold; }
          @media (max-width: 767px) {
            .topSec02 .contentBox .column02 .columnText .columnTitle {
              font-size: calc(24 / 390 * 100vw);
              line-height: calc(45 / 390 * 100vw); } }
          .topSec02 .contentBox .column02 .columnText .columnTitle .titleLogo {
            display: inline-block;
            width: 153px;
            margin-left: 31px; }
            @media (max-width: 767px) {
              .topSec02 .contentBox .column02 .columnText .columnTitle .titleLogo {
                width: calc(100 / 390 * 100vw);
                margin-left: calc(15 / 390 * 100vw); } }
            .topSec02 .contentBox .column02 .columnText .columnTitle .titleLogo img {
              vertical-align: middle; }
        .topSec02 .contentBox .column02 .columnText .columnDes {
          font-size: 2rem;
          font-weight: bold;
          line-height: 1.55;
          margin-top: 15px;
          margin-bottom: 24px; }
          @media (max-width: 767px) {
            .topSec02 .contentBox .column02 .columnText .columnDes {
              font-size: calc(16 / 390 * 100vw);
              margin-top: calc(15 / 390 * 100vw);
              margin-bottom: calc(24 / 390 * 100vw); } }
    .topSec02 .contentBox .btn03 {
      padding: 13px 25px 13px 45px;
      width: 162px;
      display: block; }
      @media (max-width: 767px) {
        .topSec02 .contentBox .btn03 {
          width: calc(260 / 390* 100vw);
          padding: calc(15 / 390* 100vw) calc(25 / 390* 100vw) calc(15 / 390* 100vw) calc(45 / 390* 100vw); } }
      .topSec02 .contentBox .btn03.btn {
        font-size: 1.6rem; }
        @media (max-width: 767px) {
          .topSec02 .contentBox .btn03.btn {
            font-size: calc(18 / 390 * 100vw); } }

.pconly {
  display: block; }
  @media (max-width: 767px) {
    .pconly {
      display: none; } }

.topCase {
  border-top: 2px solid #318A50;
  padding: 20px 22px 90px; }
  @media (max-width: 767px) {
    .topCase {
      padding: calc(20 / 390 * 100vw) calc(15 / 390 * 100vw) calc(50 / 390 * 100vw); } }
  .topCase .secTitle {
    font-size: 20px;
    text-align: center;
    flex-wrap: bold;
    margin-bottom: 27px; }
    @media (max-width: 767px) {
      .topCase .secTitle {
        font-size: calc(20 / 390 * 100vw);
        margin-bottom: calc(25 / 390 * 100vw); } }
  .topCase .topCaseList {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    gap: 16px;
    flex-wrap: wrap; }
    @media (max-width: 767px) {
      .topCase .topCaseList {
        gap: calc(20 / 390 * 100vw);
        flex-direction: column; } }
    .topCase .topCaseList .caseItem {
      width: calc((100% - 32px)/3);
      border: 2.5px solid #318A4F;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      display: block; }
      @media (max-width: 767px) {
        .topCase .topCaseList .caseItem {
          width: 100%; } }
      .topCase .topCaseList .caseItem:hover {
        opacity: 1; }
        .topCase .topCaseList .caseItem:hover .itemTitle {
          color: #318A50; }
        .topCase .topCaseList .caseItem:hover .itemText {
          color: #000; }
        .topCase .topCaseList .caseItem:hover .btn {
          color: #318A50;
          background: #fff; }
          .topCase .topCaseList .caseItem:hover .btn::before {
            border-color: transparent transparent #318A50 transparent; }
        .topCase .topCaseList .caseItem:hover .btnTab::after {
          background-image: url("../images/link-tab-hover.svg"); }
    .topCase .topCaseList .itemTitle {
      padding: 10.5px 13px;
      font-size: 18px;
      line-height: calc(26/18);
      position: relative;
      color: #000;
      transition: all 0.2s ease-out 0s; }
      @media (max-width: 767px) {
        .topCase .topCaseList .itemTitle {
          padding: calc(10 / 390 * 100vw) calc(12 / 390 * 100vw);
          font-size: calc(18 / 390 * 100vw); } }
      .topCase .topCaseList .itemTitle a {
        text-decoration: none; }
    .topCase .topCaseList .itemImg {
      position: relative;
      min-height: 163px;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: center;
      align-items: center; }
      .topCase .topCaseList .itemImg a:hover {
        opacity: 0.7; }
      .topCase .topCaseList .itemImg::before, .topCase .topCaseList .itemImg::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        display: block;
        background-image: linear-gradient(to right, #318A50 5px, transparent 5px);
        background-size: 10px 2px;
        background-repeat: repeat-x;
        background-position: left bottom; }
      .topCase .topCaseList .itemImg::before {
        top: -1px;
        bottom: initial; }
    .topCase .topCaseList .itemText {
      padding: 15px 10px;
      font-size: 16px;
      line-height: calc(27/16);
      font-weight: 500;
      color: #000; }
      @media (max-width: 767px) {
        .topCase .topCaseList .itemText {
          padding: calc(15 / 390 * 100vw) calc(10 / 390 * 100vw);
          font-size: calc(16 / 390 * 100vw); } }
    .topCase .topCaseList .btnArea {
      margin-bottom: 20px; }
      @media (max-width: 767px) {
        .topCase .topCaseList .btnArea {
          margin-bottom: calc(20 / 390 * 100vw); } }
    .topCase .topCaseList .btn03 {
      padding: 13px 10px 13px;
      width: 202px;
      display: block;
      font-size: 16px; }
      .topCase .topCaseList .btn03::before {
        position: static;
        display: inline-block;
        margin-right: 13px;
        vertical-align: text-bottom; }
      @media (max-width: 767px) {
        .topCase .topCaseList .btn03 {
          padding: calc(15 / 390 * 100vw) calc(10 / 390 * 100vw);
          width: calc(260 / 390 * 100vw);
          font-size: calc(18 / 390 * 100vw); } }