@charset "UTF-8";

/* =============================================================================

Flow CSS

・選考の流れ用CSS「.flow-×××」

上記はここに記述する

============================================================================= */

/* セクション
----------------------------------------------------------------------------- */
.flow-section {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
  .l-flow-A {
    --row-gap:4.0rem;
    --dt-w:12.0rem;
    --dd-pis:4.0rem;
    --ico-w:2.1rem;
    @media (width <= 767px) {
      --dt-w:5.2rem;
      --dd-pis:2.0rem;
      --ico-w:1.7rem;
    }

    .flow {
      grid-column:1/-1;
      display:grid;
      grid-template-columns:subgrid;

      > dt {
        > span {
          display:flex;
          gap:.4rem;
          line-height:1;
          font-size:1.8rem;
          letter-spacing: .05em;
          @media (width > 767px) {
            align-items: baseline;
          }
          @media (width <= 767px) {
            flex-direction: column;
            width:fit-content;
            align-items: center;
            text-align: center;
            font-size:1.4rem;
          }

          > span {
            font-size:3.0rem;
            @media (width <= 767px) {
              font-size:2.0rem;
            }
          }
        }
      }
      > dd {
        .heading {
          margin-top:calc(.5em - .5lh + .4rem);
          margin-bottom:.8rem;
          font-size:2.4rem;
          line-height:1.8;
          @media (width <= 767px) {
            margin-top:calc(.5em - .5lh + .3rem);
            margin-bottom:.4rem;
            font-size:1.8rem;
          }
          > small {
            font-size:calc(2/3 * 1em);
          }
        }
        .desc {
          line-height:1.8;
        }
      }
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.flow-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}