@charset "UTF-8";
/*------------------------------------------------------
 共通
-------------------------------------------------------*/
.mainvisual-page {
  padding: 5% 0;
  position: relative; }
  .mainvisual-page.outgoing {
    background-image: url("../img/outgoing/main-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
  .mainvisual-page.handy {
    background-image: url("../img/handy/main-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
  .mainvisual-page:after {
    position: absolute;
    content: "";
    z-index: 1;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: -moz-linear-gradient(left, #fff, #fff, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background: -webkit-linear-gradient(left, #fff, #fff, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background: linear-gradient(to right, #fff, #fff, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); }
  .mainvisual-page .container {
    position: relative;
    z-index: 2; }

section.box {
  padding-bottom: 100px; }

@media screen and (max-width: 768px) {
  section.box {
    padding-bottom: 50px; }

  .mainvisual-page {
    margin-top: 60px;
    padding: 10% 0; } }
/*------------------------------------------------------
 ハンディ業務名人
-------------------------------------------------------*/
.mainvisual-page img {
  vertical-align: bottom; }

.nayami {
  padding-bottom: 100px; }
  .nayami .border-frame {
    overflow: hidden;
    border: 2px solid #0065A6;
    border-radius: 30px; }
    .nayami .border-frame img {
      vertical-align: bottom; }
  @media screen and (max-width: 576px) {
    .nayami {
      padding-bottom: 50px; } }

.omakase {
  background: #0065A6;
  position: relative;
  margin-bottom: 100px; }
  .omakase .text {
    padding: 50px 10px; }
    .omakase .text p {
      border-radius: 1em;
      background: #fff;
      color: #0065A6;
      font-weight: bold;
      padding: 1em;
      display: block;
      font-size: 28px;
      max-width: 13em;
      margin: auto; }
      @media screen and (max-width: 576px) {
        .omakase .text p {
          font-size: 20px; } }
  .omakase img {
    vertical-align: bottom;
    margin-top: -40%; }
    @media screen and (max-width: 576px) {
      .omakase img {
        vertical-align: bottom;
        display: block;
        margin: -25% 0 0 auto;
        width: 40%; } }
  .omakase:after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -50px;
    margin-left: -120px;
    left: 50%;
    border-style: solid;
    border-width: 50px 120px 0 120px;
    border-color: #0065A6 transparent transparent transparent; }
    @media screen and (max-width: 576px) {
      .omakase:after {
        border-width: 30px 60px 0 60px;
        bottom: -30px;
        margin-left: -60px; } }

ol.feature-list > li {
  list-style-type: none;
  counter-increment: cnt;
  margin: 0 0 1em 0;
  position: relative;
  padding: 1em 1em 1em 6em;
  border: 1px solid #00BF98; }
  ol.feature-list > li:before {
    content: "" counter(cnt,decimal-leading-zero) "";
    position: absolute;
    left: 1em;
    top: 0.4em;
    font-size: 1.5em;
    color: #00BF98; }
  ol.feature-list > li:after {
    content: "▶";
    position: absolute;
    left: 3.7em;
    top: 1.1em;
    color: #00BF98; }

.device {
  background: #E6F2F2;
  padding: 100px 10px 60px 10px;
  font-weight: bold; }

.case {
  padding: 100px 10px; }
  @media screen and (max-width: 576px) {
    .case {
      padding: 50px 10px; } }

.entry-list .entry-list-item {
  margin-bottom: 30px; }
  .entry-list .entry-list-item .entry-eyecatch {
    padding-bottom: 60%;
    position: relative; }
    .entry-list .entry-list-item .entry-eyecatch a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block; }
      .entry-list .entry-list-item .entry-eyecatch a img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover; }
  .entry-list .entry-list-item [class*="entry-cat-"] {
    border-radius: 5px;
    background: #0099C9;
    display: inline-block;
    padding: 0.1em 1em;
    color: #fff;
    font-weight: bold;
    margin-top: 0.5em; }
    @media screen and (max-width: 576px) {
      .entry-list .entry-list-item [class*="entry-cat-"] {
        font-size: 14px; } }
  .entry-list .entry-list-item .entry-title {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    font-size: 22px; }
    @media screen and (max-width: 576px) {
      .entry-list .entry-list-item .entry-title {
        font-size: 16px; } }
    .entry-list .entry-list-item .entry-title a {
      text-decoration: none;
      color: #333;
      font-weight: bold; }
  .entry-list .entry-list-item p.entry-excerpt {
    font-size: 130%;
    font-weight: bold;
    color: #003E9F; }
    @media screen and (max-width: 576px) {
      .entry-list .entry-list-item p.entry-excerpt {
        font-size: 14px; } }
  .entry-list .entry-list-item a.btn-more {
    padding: 0.5em;
    max-width: 200px;
    margin-top: 1em; }

.qa {
  padding: 100px 10px;
  background: #E6F2F2;
  border-bottom: 2px solid #0065a6; }
  @media screen and (max-width: 576px) {
    .qa {
      padding: 50px 10px; } }

dl.qa-list {
  font-size: 20px;
  display: inline-block; }
  @media screen and (max-width: 576px) {
    dl.qa-list {
      font-size: 16px; } }
  dl.qa-list dt {
    position: relative;
    font-weight: bold;
    padding: 0.8em 0 0.8em 3.5em;
    margin: 0 0 0.5em 0;
    text-align: left; }
    dl.qa-list dt:before {
      content: "Q";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 1.8em;
      font-size: 1.5em;
      line-height: 1.8em;
      border-radius: 50%;
      color: #fff;
      background: #00BF98;
      font-weight: bold;
      text-align: center; }
  dl.qa-list dd {
    position: relative;
    font-weight: bold;
    padding: 0.8em 0 0.8em 3.5em;
    margin: 0 0 0.5em 0;
    text-align: left; }
    dl.qa-list dd:before {
      content: "A";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 1.8em;
      font-size: 1.5em;
      line-height: 1.8em;
      border-radius: 50%;
      color: #fff;
      background: #FC6806;
      font-weight: bold;
      text-align: center; }

.industry {
  background: #F9F9F9;
  padding: 100px 10px; }
  @media screen and (max-width: 576px) {
    .industry {
      padding: 50px 10px; } }
  .industry img {
    border-radius: 50%;
    vertical-align: bottom; }
  .industry h4 {
    color: #077329;
    font-weight: bold;
    font-size: 18px;
    margin: 1em auto;
    max-width: 14em; }
    @media screen and (max-width: 576px) {
      .industry h4 {
        font-size: 14px; } }

.system-in {
  padding: 0 10px 100px 10px;
  background: #E6F2F2; }
  .system-in h3 {
    max-width: 20em;
    color: #008F68;
    background: #fff;
    padding: 1em;
    border-radius: 0 0 2em 0; }
  .system-in h4 {
    color: #008F68;
    font-weight: bold; }
    .system-in h4 span {
      display: inline-block;
      background: #008F68;
      color: #fff;
      padding: 0.2em 1em;
      font-size: 75%;
      margin-right: 1em;
      vertical-align: middle; }
  .system-in p {
    line-height: 2; }
  .system-in h5 {
    max-width: 13em;
    margin: 1em auto 0 auto;
    display: block; }
    @media screen and (max-width: 576px) {
      .system-in h5 {
        font-size: 16px; } }

.marker {
  background: linear-gradient(transparent 60%, #FEA983 60%); }

/*------------------------------------------------------
 商品一覧
-------------------------------------------------------*/
.product-list-summary .product-list-item {
  margin-bottom: 20px; }
  .product-list-summary .product-list-item.new .product-item-image {
    position: relative; }
    .product-list-summary .product-list-item.new .product-item-image:after {
      position: absolute;
      content: "";
      display: block;
      background-image: url("../img/common/icon_new.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      width: 23%;
      padding-bottom: 23%;
      top: 0;
      left: 0; }
.product-list-summary h3.product-item-name {
  color: #fff;
  padding: 0.7em 10px;
  text-align: center;
  background: #0065A6;
  letter-spacing: 0.1em; }
.product-list-summary .inner {
  background: #F4F5ED;
  padding: 15px 15px 40px 15px;
  position: relative; }
  .product-list-summary .inner .product-item-catch {
    position: absolute;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    right: 15px;
    top: 15px;
    font-size: 24px;
    font-weight: bold; }
    @media screen and (max-width: 960px) {
      .product-list-summary .inner .product-item-catch {
        font-size: 20px; } }
    @media screen and (max-width: 576px) {
      .product-list-summary .inner .product-item-catch {
        font-size: 18px; } }
  .product-list-summary .inner .product-item-image {
    background: #fff;
    border-radius: 50%;
    width: 65%;
    margin: 20px auto;
    padding-bottom: 65%;
    position: relative; }
    .product-list-summary .inner .product-item-image img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 75%;
      transform: translate(-50%, -50%); }
  .product-list-summary .inner .product-item-explanation {
    max-width: 400px;
    display: block;
    margin: 0 auto 1.5em auto;
    padding: 0 30px; }
    @media screen and (max-width: 576px) {
      .product-list-summary .inner .product-item-explanation {
        font-size: 14px; } }
  .product-list-summary .inner a.btn-more {
    padding: 0.7em;
    max-width: 260px; }
.product-list-summary .beside .product-item-catch {
  position: static;
  -ms-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb; }
.product-list-summary .beside .product-item-explanation {
  padding: 0;
  margin: 1em 0;
  max-width: 100%; }
.product-list-summary .beside a.btn-more {
  max-width: 480px; }
.product-list-summary .beside .inner {
  padding: 15px; }

/*------------------------------------------------------
 導入までの流れ
-------------------------------------------------------*/
.flow .flow-item {
  padding: 20px;
  background: #f8ba00;
  color: #000;
  border: 2px dashed #ffeebc;
  box-shadow: 0 0  0 7px #f8ba00;
  margin: 7px 7px 6em 7px;
  position: relative; }
  .flow .flow-item:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    bottom: -4.5em;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-color: #f8ba00 transparent transparent transparent; }
  .flow .flow-item:last-child:after {
    display: none; }
  .flow .flow-item img {
    border-radius: 50%;
    vertical-align: bottom;
    margin: auto;
    width: 60%;
    display: block; }
  .flow .flow-item .inner {
    padding: 20px 0; }
  .flow .flow-item h4.flow-title {
    font-weight: bold;
    margin-bottom: 0.7em; }
    .flow .flow-item h4.flow-title span.flow-item-num {
      display: inline-block;
      width: 1.5em;
      background: #fff;
      border-radius: 50%;
      line-height: 1.5em;
      text-align: center;
      margin-right: 0.3em; }
  @media screen and (max-width: 576px) {
    .flow .flow-item p {
      font-size: 14px; } }

/*----iframe----*/
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 2px solid #ccc; }

.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block; }

select.ui-datepicker-year, select.ui-datepicker-month {
  padding: 2px; }

/*----Policy----*/
dl.policy dd {
  margin-left: 2.5em; }

/*------------------------------------------------------
 商品一覧
-------------------------------------------------------*/
@media screen and (max-width: 576px) {
  .product-main {
    padding: 0 10px; } }
.product-main h2 {
  font-weight: bold;
  color: #0b68a2;
  font-size: 278%; }
  @media screen and (max-width: 576px) {
    .product-main h2 {
      font-size: 180%; } }
.product-main p {
  font-weight: bold;
  font-size: 20px;
  max-width: 518px; }
  @media screen and (max-width: 576px) {
    .product-main p {
      font-size: 16px; } }

.product-riyuu {
  display: flex;
  padding: 10px;
  border-radius: 10px;
  background: #fff5dd;
  margin-top: 30px;
  align-items: center;
  gap: 20px; }
  @media screen and (max-width: 1024px) {
    .product-riyuu {
      display: block; } }
  .product-riyuu h3 {
    font-size: 18px;
    color: #0b68a2;
    width: 9em;
    padding: 0.3em; }
    @media screen and (max-width: 1024px) {
      .product-riyuu h3 {
        font-size: 15px;
        width: 100%; } }
  .product-riyuu .riyuu-list {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px; }
    @media screen and (max-width: 576px) {
      .product-riyuu .riyuu-list {
        flex-wrap: wrap; } }
  .product-riyuu .riyuu-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-weight: bold; }
    .product-riyuu .riyuu-list-item img {
      width: 30%; }
    @media screen and (max-width: 576px) {
      .product-riyuu .riyuu-list-item {
        font-size: 14px;
        width: calc( 50% - 10px ); } }

.product-list-summary-lank {
  display: flex;
  gap: 30px;
  flex-wrap: wrap; }
  .product-list-summary-lank .product-list-item {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    width: calc(33.333% - 20px);
    padding: 20px; }
    @media screen and (max-width: 576px) {
      .product-list-summary-lank .product-list-item {
        width: 100%; } }
    .product-list-summary-lank .product-list-item .ninki {
      background: #f3305d;
      position: relative;
      padding: 0.2em 50px 0.2em 50px;
      font-weight: bold;
      color: #fff;
      display: inline-block;
      font-size: 18px; }
      .product-list-summary-lank .product-list-item .ninki:after {
        content: "";
        display: block;
        position: absolute;
        right: -2px;
        top: 50%;
        margin-top: -30px;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-right: 20px solid #ffffff;
        border-left: 0; }
      .product-list-summary-lank .product-list-item .ninki img {
        position: absolute;
        left: 0;
        top: 50%;
        width: 60px;
        margin-top: -35px;
        margin-left: -15px; }
    .product-list-summary-lank .product-list-item .product-item-name {
      color: #0b68a2;
      margin: 0.3em 0 0.5em 0;
      text-align: left; }
      .product-list-summary-lank .product-list-item .product-item-name span {
        background: #0b68a2;
        color: #fff;
        padding: 0.2em 0.5em;
        font-size: 80%;
        margin-right: 0.5em;
        border-radius: 8px; }
    .product-list-summary-lank .product-list-item .product-item-image {
      text-align: center;
      margin-bottom: 10px; }
      .product-list-summary-lank .product-list-item .product-item-image img {
        width: 70%;
        vertical-align: middle; }
    .product-list-summary-lank .product-list-item .product-item-explanation {
      margin-bottom: 20px; }
      .product-list-summary-lank .product-list-item .product-item-explanation span {
        display: block;
        color: #0b68a2;
        font-weight: bold;
        margin-bottom: 0.3em;
        font-size: 110%; }