@charset "utf-8";
.page {
  --page-black: #333;
  --page-gray: #555;
  --page-light-gray: #ddd;
  --page-red: #d32f2f;
  --page-light-red: #fff5f5;
  --page-blue: #0056b3;
  --page-light-blue: #eef5ff;
  --page-green: #28a745;
  --page-orange: #e67e22;
  --page-yellow: #ffc107;
  --page-light-yellow: #fff8e1;
  
  color: var(--page-black);
  
  h2 {
    font-weight: bold;
  }
  
  .header {
    border-bottom: solid 3px var(--page-orange);
    
    h1 {
      color: var(--page-orange);
      text-align: center;
    }

    h1 + p {
      color: var(--page-gray);
    }

  }
  
  .step-box {
    background-color: var(--page-light-blue);
    border-left: solid 5px var(--page-blue);
    
    h2 {
      color: var(--page-blue);
    }
    
    ol {
      li {
        list-style: decimal;
        list-style-position: inside;
      }
    }
    
    .example-box {
      background-color: #FFF;
      border: dashed 1px var(--page-gray);
    }
    
    .flow-text {
      color: var(--page-blue);
      font-weight: bold;
    }
    
    .flow-text + p {
    }
    
  }
  
  .step-remove {
    background-color: var(--page-light-red);
    border-left-color: var(--page-red);
    
    h2 {
      color: var(--page-red);
    }
    
    h2 + p {
      color: var(--page-red);
      font-weight: bold;
    }
    
    ul {

      li {
        list-style: disc;
        list-style-position: inside;
      }
      
    }
    
  }
  
  .support-box {
    background-color: var(--page-light-yellow);
    border: solid 3px var(--page-yellow);
    border-radius: 10px;
    
    h2 {
      border-bottom: dashed 2px var(--page-yellow);
      color: var(--page-red);
      text-align: center;
    }
    
    h2 + p {
      text-align: center;
    }
    
    .contact-info {
      background-color: #FFF;
      border: solid 1px var(--page-light-gray);
    }
    
    .contact-info:last-of-type {
    }
    
    h3 {
      color: var(--page-blue);
    }
    
    h3 + p {
      font-weight: bold;
      text-align: center;
    }
    
    .phone-number {
      color: var(--page-red);
      font-weight: bold;
      text-align: center;
    }
    
    .guidance {
      background-color: var(--page-light-red);
    }
    
    .btn-num {
      background-color: var(--page-red);
      color: #FFF;
      display: inline-block;
      font-weight: bold;
      vertical-align: middle;
    }
    
  }
  
  .important-text {
    color: var(--page-red);
    font-weight: bold;
  }
  
  .notion {
    font-size: 0.85rem;
  }
  
  .link-button {
    background-color: var(--page-blue);
    border-radius: 5px;
    color: #FFF;
    font-weight: bold;
    display: inline-block;
  }
  
  .btn-red {
    background-color: var(--page-red);
  }
  
  .btn-green {
    background-color: var(--page-green);
  }
  
}
@media screen and (min-width:441px) {
  .page {
    font-size: 1.15rem;
    margin: 0 auto;
    padding: 0 0 2em 0;
    width: 940px;
    
    h2 {
      margin-bottom: 10px;
      padding: 0;
    }
    
    .header {
      margin-bottom: 40px;
      padding: 20px 0;
      
      h1 + p {
        font-size: 1.15rem;
        text-align: center;
      }
      
    }
    
    .step-box {
      margin-bottom: 30px;
      padding: 30px;

      h2 {
      }

      ol {
        li {
        }
      }

      .example-box {
        margin: 30px 0;
        padding: 20px;
      }

      .flow-text {
      }

      .flow-text + p {
        margin: 20px 0;
      }

    }
    
    .step-remove {

      h2 {
      }

      h2 + p {
      }

      ul {
        margin: 15px 0;

        li {
          margin: 5px 0;
        }

      }

    }
  
    .support-box {
      border-radius: 10px;
      padding: 30px;

      h2 {
        padding-bottom: 15px;
      }

      h2 + p {
        margin-top: 15px;
      }

      .contact-info {
        margin: 30px 0;
        padding: 20px;
      }

      .contact-info:last-of-type {
        margin-bottom: 0;
      }

      h3 {
        font-size: 1.25rem;
        margin: 0;
        padding: 0;
      }

      h3 + p {
        margin-top: 20px;
        text-align: center;
      }

      .phone-number {
        font-size: 2.5rem;
      }

      .guidance {
        margin: 30px 0 0 0;
        padding: 20px;
      }

      .btn-num {
        display: inline-block;
        font-size: 2rem;
        border-radius: 8px;
        margin: 10px 10px 10px 0;
        padding: 5px 22px;
      }

    }

    .important-text {
    }

    .notion {
    }

    .link-button {
      border-radius: 5px;
      display: inline-block;
      margin: 10px 0;
      padding: 12px 25px;
    }

    .btn-red {
    }

    .btn-green {
    }

    
  }
}
@media screen and (max-width:440px) {
  .page {
    font-size: 0.85rem;
    padding: 0 20px;
    
    h2 {
      margin-bottom: 10px;
      padding: 0;
    }
    
    .header {
      margin-bottom: 40px;
      padding: 0 0 20px 0;
      
      h1 {
        margin: 0;
        padding: 0;
      }
      
      h1 + p {
      }
      
    }
    
    .step-box {
      margin-bottom: 30px;
      padding: 30px;

      h2 {
      }

      ol {
        li {
        }
      }

      .example-box {
        margin: 30px 0;
        padding: 20px;
      }

      .flow-text {
      }

      .flow-text + p {
        margin: 20px 0;
      }

    }
    
    .step-remove {

      h2 {
      }

      h2 + p {
      }

      ul {
        margin: 15px 0;

        li {
          margin: 5px 0;
        }

      }

    }
  
    .support-box {
      border-radius: 10px;
      padding: 30px;

      h2 {
        padding-bottom: 15px;
      }

      h2 + p {
        margin-top: 15px;
      }

      .contact-info {
        margin: 30px 0;
        padding: 20px;
      }

      .contact-info:last-of-type {
        margin-bottom: 0;
      }

      h3 {
        font-size: 1.25rem;
        margin: 0;
        padding: 0;
      }

      h3 + p {
        margin-top: 20px;
        text-align: center;
      }

      .phone-number {
        font-size: 2.5rem;
      }

      .guidance {
        margin: 30px 0 0 0;
        padding: 20px;
      }

      .btn-num {
        display: inline-block;
        font-size: 2rem;
        border-radius: 8px;
        margin: 10px 10px 10px 0;
        padding: 5px 22px;
      }

    }

    .important-text {
    }

    .notion {
    }

    .link-button {
      border-radius: 5px;
      display: inline-block;
      margin: 10px 0;
      padding: 12px 25px;
    }

    .btn-red {
    }

    .btn-green {
    }

    
  }
}