@charset "UTF-8";

#guide {
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        h1 {
          margin-bottom: 7.5rem;
          font-size: 5rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
        }
        .txtWrap {
          display: flex;
          align-items: flex-start;
          position: relative;
          &::after {
            content: "";
            display: block;
            width: 2px;
            height: 100%;
            background-color: var(--maincolor);
            position: absolute;
            top: 0;
            left: 3.2rem;
          }
          &:last-of-type::after {
            display: none;
          }
          .step {
            font-family: var(--roboto);
            font-weight: 700;
            background-color: var(--maincolor);
            color: #fff;
            padding: 1rem;
            position: relative;
            z-index: 1;
          }
          .txt {
            margin: -0.3rem 0 5.2rem 2rem;
            h2 {
              line-height: 1;
              letter-spacing: 0.1em;
              font-size: 4rem;
              letter-spacing: 0.05em;
              margin-bottom: 3rem;
            }
            p {
              line-height: 2.4;
              letter-spacing: 0.1em;
              font-size: 1.6rem;
            }
            .min {
              margin-top: 3rem;
              h3 {
                font-size: 1.4rem;
                letter-spacing: 0.1em;
                margin-bottom: 2rem;
                font-feature-settings: "palt";
              }
              .min p {
                font-size: 1.2rem;
                color: #7e7e7e;
                letter-spacing: 0.1em;
                font-feature-settings: "palt";
                line-height: 2;
              }
            }
          }
        }
      }
      .bki {
        content: "";
        display: block;
        width: 58rem;
        height: 100%;
        background-image: url(/images/sec1.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 0;
          h1 {
            font-size: 2.3rem;
            line-height: 1.5;
            letter-spacing: 0.19em;
            margin-bottom: 4.5rem;
            text-align: center;
          }
          .txtWrap {
            &::after {
              left: 2.4rem;
            }
            .step {
              padding: 0.5rem;
              font-size: 1.2rem;
            }
            .txt {
              margin: 0 0 2.6rem 2rem;
              h2 {
                font-size: 1.5rem;
                letter-spacing: 0.1em;
                margin-bottom: 1.5rem;
                line-height: 1.8;
              }
              p {
                font-size: 1.2rem;
                line-height: 1.8;
                letter-spacing: 0.1em;
                br {
                  display: none;
                }
              }
              .min {
                margin-top: 2rem;
                h3 {
                  font-size: 1.2rem;
                  margin-bottom: 1rem;
                }
                p {
                  font-size: 1rem;
                }
              }
            }
          }
          .caution {
            font-size: 1.2rem;
            line-height: 2.4;
            margin-bottom: 6rem;
          }
        }
        .bki {
          content: "";
          width: 100%;
          height: 1.5rem;
          top: auto;
          bottom: 0;
          right: 0;
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    #pageGuide .outer .inr {
      max-width: 960px;
      margin: 0 auto;
    }
  }
}