@charset "UTF-8";

/* -------------------------------------------------------------------------------
|  Created:     2024-03-26
|  Updated:     2026-02-17
|------------------------------------------------------------------------------- */

/*---------------------------------------------------------
  共通
---------------------------------------------------------*/
/* Table
-------------------------------------------------------------------------------- */

/* table内のtableの枠線を復活させる */
.c-table__content table td.meswg-table--border,.c-table__content table th.meswg-table--border{
  padding:7.5px 15px;
  border:1px solid #b2b2b2;
}

/*---------------------------------------------------------
  Screen Configuration
---------------------------------------------------------*/
/* 見出し */
.meswp-titleDec {
  position: relative;
  background: linear-gradient(90deg, var(--white) 10px 10px, var(--meswBlueLightColor) 10px, var(--white));
  color: var(--white);

  &::before {
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: calc(50% - 50px);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: var(--white);
    border: 1px solid var(--grey400);
    box-shadow: 0 0 5px var(--grey400);
    border-radius: 50%;
  }

  p {
   margin-left: 100px; 
  }
}
.meswp-titleDec--screen {
    &::before {
      background-image: url(../../../../../../assets/img/products/hmi/got/smerit/gt_works3/icon_screen.jpg);
    }
  }
.meswp-titleDec--debug {
    &::before {
      background-image: url(../../../../../../assets/img/products/hmi/got/smerit/gt_works3/icon_debug.jpg);
    }
  }
.meswp-titleDec--utilize {
    &::before {
      background-image: url(../../../../../../assets/img/products/hmi/got/smerit/gt_works3/icon_utilize.jpg);
    }
  }
.meswp-titleDec--management {
    &::before {
      background-image: url(../../../../../../assets/img/products/hmi/got/smerit/gt_works3/icon_management.jpg);
    }
  }

/* Before・Afterラベルレイアウト */
.meswp-beforeAfterLabel {
  position: relative;

  p:nth-child(even) {
    position: absolute;
    left: 55%;
  }
  
  span {
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
  }
}

/* 両矢印アイコン */
.meswp-doubleArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 13px;
  position: relative;
  background-color: var(--meswBlueLightColor);
  margin-top: 150%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
  }

  &::before {
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--meswBlueLightColor) transparent transparent;
    left: -10px;
  }

  &::after {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--meswBlueLightColor);
    right: -10px;
  }
}

/* 見出し(ふきだし) */
.meswp-titleText--square {
  position: relative;
  background-color: var(--meswNavyLightColor);
  color: var(--white);
  
  &::after {
    content: "";
    width: 30px;
    height: 20px;
    bottom: -19px;
    left: calc(50% - 15px);
    position: absolute;
    background-color: var(--meswNavyLightColor);
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
  }
}

/* 両矢印アイコン スマホ */
@media (max-width: 767px) {
  .meswp-doubleArrow {
    flex-direction: column;
    width: 10px;
    height: 35px;
    margin: 0 auto;

    &::before {
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent var(--meswBlueLightColor) transparent;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
    }

    &::after {
      border-width: 10px 10px 0 10px;
      border-color: var(--meswBlueLightColor) transparent transparent transparent;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}