@charset "UTF-8";

/* -------------------------------------------------------------------------------
|  Created:     2025-03-11
|  Updated:     N/A
|------------------------------------------------------------------------------- */

/*---------------------------------------------------------
  共通
---------------------------------------------------------*/

/* border-radius
-------------------------------------------------------------------------------- */
.meswp-bdr15 {
  border-radius: 15px;
}

/* ドキュメントリンク
-------------------------------------------------------------------------------- */
.meswp-cmnDocInline {
  * {
    display: inline !important;
  }
}

/*---------------------------------------------------------
  remote.html
---------------------------------------------------------*/

/* Monitor according to your requirements
-------------------------------------------------------------------------------- */
.meswp-heading_sub--step {
  background: linear-gradient(90deg, var(--white), var(--meswBlueDarkColor) 2em 2em);
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
  color: var(--white);
}

/* Remotely monitor the site using web browser
-------------------------------------------------------------------------------- */
.meswp-heading_sub--speechBubble {
  position: relative;
  background-color: var(--meswBlueDarkColor);
  color: var(--white);
  
  &::after {
    content: "";
    width: 30px;
    height: 20px;
    bottom: -19px;
    left: calc(50% - 15px);
    position: absolute;
    background-color: var(--meswBlueDarkColor);
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
  }
}

/*---------------------------------------------------------
  maintenance.html
---------------------------------------------------------*/

/* Enhanced traceability enables quick troubleshooting
-------------------------------------------------------------------------------- */
.meswp-defaultArrow--gradientRed {
  background: linear-gradient(90deg, var(--white), var(--brandDark));

  &::before {
    border-left: solid 40px var(--brandDark);
  }
}