/*
  /rakurakucloud/mailmarketing/asset/css/page/p-flow-fv.css
  flowページFV＋次セクション用CSS
*/

.p-flow {
  .m-flow {
    margin: 0;
  }
  .m-flow-item-title {
    padding: 48px 0 0;
    height: 140px;
    @media screen and (max-width: 840px) {
      height: 120px;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: 10px;
      width: 8px;
      height: 8px;
      margin: auto;
      border-top: 2px solid var(--rmailmarketing-dark);
      border-right: 2px solid var(--rmailmarketing-dark);
      transition: all ease 0.3s;
      transform: translate(-50%, -50%) rotate(135deg);
      z-index: 10;
    }
    &:hover {
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      transition: all 0.3s;
      &::before {
        transform: translate(-50%, -20%) rotate(135deg);
      }
    }
  }
}