@charset "UTF-8";
/*
*
* product_module_addition.css
* 商品ページ共通モジュールを個別に上書き・追加するCSS
* 初期値はデフォルトのスタイルを当てていますので、値を変更してご使用下さい
*
*/
:root {
    --base-color: #c02;
    --hover-color: #333;
    --bg-color: #f2f2f2;
    --heading-color: #000;
}

/* --------------------------------
配下ページのメインビジュアル
-------------------------------- */
.hs-main-visual {
    background-image: url(/rpa/asset/images/common/kv_img_lower_sm.jpg);
}
@media (min-width: 768px) {
    .hs-main-visual {
        background-image: url(/rpa/asset/images/common/kv_img_lower_lg.jpg);
    }
}
.util-bg--color-01 {
    background-color: #99cc33;
}
.util-bg--color-02 {
    background-color: #f39417;
}
/* --------------------------------
  ブランドカラーを使用
　使用するときはコメント削除してください
-------------------------------- */
/*
.hs-c-overview{
 // とは
    background-color: var(--bg-color) !important;
}
//３つのポイント、他商品と組み合わせ
.hs-pointcard__image,
.hs-alignment-box__icon{
    background-color: var(--base-color);
}
*/

/*ローカルナビにメガメニューを設置する場合
    /asset/css/localheader.html 内のクラスhs-navigation-mega--default 削除
    <div id="hs-navigation-nav01" class="hs-navigation-mega hs-navigation-mega--default" aria-hidden="true">
    →<div id="hs-navigation-nav01" class="hs-navigation-mega"  aria-hidden="true">
*/

/* --------------------------------
もっと知る　基本は--bg-color
-------------------------------- */
/*.hs-content-footer {
    background-color: var(--base-color);
}*/

/* --------------------------------
  背景の指定がある場所でベースの背景カラーを使用したい場合は
  .u-background--type-brand（ブランドカラー）
　.u-background--type-brand-bg（ブランド背景カラー）
　クラスを使用
-------------------------------- */

/* --------------------------------
/localheader 個別CSS
-------------------------------- */

.hs-navigation-mega {
  background-color: #333 !important;
}
.hs-navigation-mega a {
  color: #fff !important;
}

/* --------------------------------
/rpa/products/workato/ 背景色用CSS
-------------------------------- */
.rpa-products-workato-bg01 {
  background-color: #fff;
  border: 1px solid #bbb;
}
/* --------------------------------
/rpa/about/ 個別CSS
-------------------------------- */
@media (max-width: 767.98px) {
  .rpa-index-grid.hs-l-grid--column-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:5px;
  }
}
/* --------------------------------
/rpa/index 個別CSS
-------------------------------- */
.product-list {
  display: flex;
  list-style: none;
}
.product-list>li {
  width: calc(5/100%);
  margin: 20px;
}
@media (max-width: 767.98px) {
  .product-list {
    display: block;

  }
  .product-list>li {
    width: 100%;
    margin: 5px;
  }
}
/* --------------------------------
/rpa/about/ 個別CSS
-------------------------------- */
.hs-section-arrow .hs-section-arrow__right .hs-section-arrow__detail.rpa-about-bg01 {
  background-color: #f6e9e7;
}
@media screen and (max-width: 767px) {
  .hs-l-grid.rpa-about-column-sm-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------
/rpa/products/ 個別CSS
-------------------------------- */
.rpa-products-index-link-area {
  margin-top: 36px;
}
.rpa-products-index-link-area + * {
  margin-top: 36px!important;
}
.rpa-products-index-link-area .rpa-products-index-link-area__column {
  display: flex;
  flex-flow: row wrap;
}
.rpa-products-index-link-area .rpa-products-index-link-area__column > .rpa-products-index-link-area__item,
.rpa-products-index-link-area .rpa-products-index-link-area__column > .rpa-products-index-link-area__item-v2,
.rpa-products-index-link-area .rpa-products-index-link-area__column > .rpa-products-index-link-area__item-v3,
.rpa-products-index-link-area .rpa-products-index-link-area__column > .rpa-products-index-link-area__item-v4 {
  width: 33%;
}
.rpa-products-index-link-area .rpa-products-index-link-area__item,
.rpa-products-index-link-area .rpa-products-index-link-area__item-v2,
.rpa-products-index-link-area .rpa-products-index-link-area__item-v3,
.rpa-products-index-link-area .rpa-products-index-link-area__item-v4 {
  display: inline-block;
  padding: 15px 20px;
  width: 99%;
  text-align: center;
  text-decoration: none;
}
.rpa-products-index-link-area .rpa-products-index-link-area__item:hover .rpa-products-index-link-area__figure,
.rpa-products-index-link-area .rpa-products-index-link-area__item-v2:hover .rpa-products-index-link-area__figure,
.rpa-products-index-link-area .rpa-products-index-link-area__item-v3:hover .rpa-products-index-link-area__figure,
.rpa-products-index-link-area .rpa-products-index-link-area__item-v4:hover .rpa-products-index-link-area__figure {
  opacity: .7;
  -webkit-transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.rpa-products-index-link-area .rpa-products-index-link-area__item {
  background-color: #fafad2;
}
.rpa-products-index-link-area .rpa-products-index-link-area__item-v2 {
  background-color: #dff6ec;
}
.rpa-products-index-link-area .rpa-products-index-link-area__item-v3 {
  background-color: #fde9e9;
}
.rpa-products-index-link-area .rpa-products-index-link-area__item-v4 {
  background-color: #ffedba;
}
.rpa-products-index-link-area .rpa-products-index-link-area__head {}
.rpa-products-index-link-area .rpa-products-index-link-area__head > *:first-child {
  margin-top: 0 !important;
}
.rpa-products-index-link-area .rpa-products-index-link-area__title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  color: #000;
}
.rpa-products-index-link-area .rpa-products-index-link-area__body {
  margin-top: 10px;
}
.rpa-products-index-link-area .rpa-products-index-link-area__body > *:first-child {
  margin-top: 0 !important;
}
.rpa-products-index-link-area .rpa-products-index-link-area__description {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: #000;
}
.rpa-products-index-link-area .rpa-products-index-link-area__figure {
  display: inline-block;
  margin-top: 10px;
  width: 120px;
  -webkit-transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.rpa-products-index-link-area .rpa-products-index-link-area__figure img {
  width: 100%;
}
.rpa-products-index-link-area .rpa-products-index-link-area__note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
}


@media screen and (max-width: 767px) {
  .workato_in_m {
    margin: 0 15px;
  }
}

/*********************
202412products
***********************/
.rpa-products-box {
  margin-top: 30px;
}
.rpa-products-box .title {
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  font-size: large;
}
.rpa-products-box .dis {
  text-align: center;
  color: #000;
  line-height: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.rpa-products-box .memo {
  text-align: center;
  color: #000;
  font-size: small;
  line-height: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.rpa-products-box li {
  display: inline-block;
  text-align: center;
  padding-bottom: 10px;
  padding-top: 10px;
}
.rpa-products-box img {
  width: 120px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.rpa-products-box-a {
  list-style: none;
  display: flex;
}
.rpa-products-box-a .box1 {
  width: 66%;
  background-color: #fafad2;
  padding: 10px auto;
}
.rpa-products-box-a .box1 .inner {
  display: flex;

}
.rpa-products-box-a .box1 .inner a {
  width: calc(2/100%);
  margin: 0 auto;
}
.rpa-products-box-a .box2 {
  width: 33%;
  background-color: #dff6ec;
  padding: 10px auto;
}
.rpa-products-box-b {
  list-style: none;
}
.rpa-products-box-b .box3 {
  width: 99%;
  background-color: #fde9e9;
}
.rpa-products-box-b .box4 {
  width: 99%;
  background-color: #ffedba;
}
.rpa-products-box:hover {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .rpa-products-box-a {
    display: block;
  }
  .rpa-products-box-a .box1 {
    width: 100%;
  }
  .rpa-products-box-a .box1 .inner a {
    width: 100%;
  }
  .rpa-products-box-a .box2 {
    width: 100%;
  }
}


@media screen and (max-width: 767px) {
  .rpa-products-index-link-area {
    margin-top: 28px;
  }
  .rpa-products-index-link-area + * {
    margin-top: 28px!important;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__item,
  .rpa-products-index-link-area .rpa-products-index-link-area__item-v2,
  .rpa-products-index-link-area .rpa-products-index-link-area__item-v3,
  .rpa-products-index-link-area .rpa-products-index-link-area__item-v4 {
    padding: 14px 10px;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__item:hover .rpa-products-index-link-area__figure,
  .rpa-products-index-link-area .rpa-products-index-link-area__item-v2:hover .rpa-products-index-link-area__figure,
  .rpa-products-index-link-area .rpa-products-index-link-area__item-v3:hover .rpa-products-index-link-area__figure,
  .rpa-products-index-link-area .rpa-products-index-link-area__item-v4:hover .rpa-products-index-link-area__figure {
    opacity: 1;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__title {
    margin-top: 11px;
    font-size: 4.2666666667vw;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__body {
    margin-top: 11px;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__description {
    margin-top: 11px;
    font-size: 3.2vw;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__figure {
    margin-top: 11px;
    width: 21.3vw;
    min-width: 80px;
    max-width: 120px;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__figure img {
    width: 100%;
  }
  .rpa-products-index-link-area .rpa-products-index-link-area__note {
    margin-top: 11px;
    font-size: 3.2vw;
  }
}
/* --------------------------------
/rpa/products/automation_360/ 個別CSS
-------------------------------- */
.rpa-products-automation_360-index_arousel {
  margin: 1.625em 0 1.2em;
  padding: 2em 0;
  background-color: #f2f2f2;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list {
  padding-inline: 3.5em;
  position: relative;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list >.slick-list {
  margin: 0 -10px;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-arrow {
  position: absolute;
  top: 50%;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  white-space: nowrap;
  text-indent: -100vw;
  overflow: hidden;
  transform: translateY(-50%);
  transform-origin: center;
  z-index: 1;
  width: 49px;
  height: 49px;
  transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  background-color: #707070;
  transform-origin: center;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius : 50%;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform-origin: center;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  z-index: 2;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-prev {
  left: 6px;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-prev::after {
  transform: translate(-50%, -50%) scale(-1, 1);
  left: calc(50% - 2px);
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-prev::before {
  transform: translate(-50%, -50%) rotate(225deg);
  left: 50%;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-next {
  right: 6px;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-next::after {
  left: calc(50% + 2px);
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-next::before {
  transform: translate(-50%, -50%) rotate(45deg);
  left: 50%;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .rpa-products-automation_360-carousel__item {
  padding: 0 10px;
}
.rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .rpa-products-automation_360-carousel__item img{
  border: 1px solid #bbb;
}
@media (min-width: 768px) {
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-arrow:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px) {
  .rpa-products-automation_360-index_arousel {
    margin: 1.625em 0 1.4em;
    padding: 1.8em 0;
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list {
    padding-inline: 3em;
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-prev::after  {
    left: calc(50% + 2px)
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-next::after {
    left: calc(50% + 2px)
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-prev {
    left: 0px;
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-next {
    right: 6px;
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-arrow {
    width: 42px;
    height: 42px;
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-prev::before {
    transform: translateY( -50%) rotate(225deg);
    left: 20px;
  }
  .rpa-products-automation_360-index_arousel .rpa-products-automation_360-carousel__list .slick-next::before {
    transform: translateY( -50%) rotate(45deg);
    left: 18px;
  }
}