@charset "utf-8";
/* CSS Document */


/********** flow **********/

main.flow {
  .p-body {
    .p-chapter {
      .p-chapter__inner {
        max-width: 1000px;
        ul {
          display: flex;
          flex-direction: column;
          gap: 6rem;
          li {
            h3 {
              margin: 0 0 4rem;
              padding: 2rem 0;
              font-size: 2.4rem;
              border-top: 2px solid var(--yellow);
              border-bottom: 2px solid var(--yellow);
              .step {
                display: inline-block;
                margin-right: 2rem;
                padding: .2em .8em;
                font-size: .8em;
                font-weight: 700;
                letter-spacing: .05em;
                background: var(--yellow);
                border-radius: 10px;
                color: #fff;
              }
            }
            img {
              display: block;
              margin: 0 auto 3rem;
              width: 100%;
              max-width: 600px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  main.flow {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          ul {
            gap: 4rem;
            li {
              h3 {
                display: flex;
                align-items: center;
                margin: 0 0 2rem;
                padding: 1.5rem 0;
                font-size: 1.8rem;
                .step {
                  margin-right: 1rem;
                  padding: .2em .8em;
                  font-size: .75em;
                }
              }
            }
          }
        }
      }
    }
  }
}