@charset "UTF-8";

/* main */
.article-mainvisual {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

@media screen and (min-width:769px) {
  main {
    width: 100%;
  }

  h1 {
    text-align:center;
    margin:25px;
  }

  .article-mainvisual img {
    width: 80%;
  }

  .article-description {
    margin: 0 100px;
    padding:30px;
  }

  .article-description2 {
    padding:30px;
  }

  .table_of_contents {
    border:1px solid black;
    margin: 0 120px;
    padding:20px;
  }

  .table_of_contents ol {
    padding-left:25px;
  }

  .table_of_contents2 {
    margin: 0 120px;
    padding:20px;
  }

  .table_of_contents2 ul {
  list-style: none;
}

  .article-contents {
    margin: 0 120px;
    width:80%;
  }

  .article-content-elements h2 {
    border-left:10px solid black;
    margin-top: 30px;
    margin-bottom: 10px;
    padding:10px;
  }

  .article-content-elements p {
     padding:0 30px;
  }

  .related-article-contents h3 {
     border-left:10px solid gray;
     margin-top: 30px;
     margin-bottom: 10px;
     padding:10px;
  }

  .related-article-contents p {
     padding:0 30px;
  }

  .recommended-article-contents h3 {
     border-left:10px solid gray;
     margin-top: 30px;
     margin-bottom: 10px;
     padding:10px;
  }

  .recommended-article-contents p {
     padding:0 30px;
  }

}

/*タブレット縦置きサイズ*/
@media screen and (max-width: 768px) {
  main {
    width: 100%;
  }

  h1 {
    text-align:center;
    margin:25px auto;
  }

  .article-mainvisual img {
    width: 100%;
  }

  .article-description {
    margin:0 10px;
    padding:10px;
  }

  .article-description2 {
    padding:10px;
  }


  .table_of_contents {
    border:1px solid black;
    margin:0 10px;
    padding:10px;
  }

  .table_of_contents2 {
    margin:10 10px;
    padding:10px;
  }

  .table_of_contents ol {
    padding-left:15px;
  }

  .table_of_contents2 ol {
    padding-left:15px;
  }

  .table_of_contents2 ul {
    margin-left:15px;
  }

  .article-contents {
    margin:0 15px;
  }

  .article-content-elements h2 {
    border-left:5px solid black;
    margin-top: 15px;
    margin-bottom: 15px;
    padding:5px;
  }

  .article-content-elements p {
     margin:0 15px;
  }

  .related-article-contents h3 {
     border-left:5px solid gray;
     margin-top: 15px;
     margin-bottom: 10px;
     padding:10px;
  }

  .related-article-contents p {
     margin:0 15px;
  }

  .recommended-article-contents h3 {
     border-left:5px solid gray;
     margin-top: 15px;
     margin-bottom: 10px;
     padding:10px;
  }

  .recommended-article-contents p {
     margin:0 15px;
  }

}

/*スマホサイズ*/
@media screen and (max-width: 425px) {
  main {
    width: 100%;
  }


    h1 {
      text-align:center;
      margin:25px auto;
    }

    .article-mainvisual img {
      width: 100%;
    }

    .article-description {
      margin:0 10px;
      padding:10px;
    }

    .article-description2 {
      padding:10px;
    }


    .table_of_contents {
      border:1px solid black;
      margin:0 10px;
      padding:10px;
    }

    .table_of_contents2 {
      margin:10 10px;
      padding:10px;
    }

    .table_of_contents ol {
      padding-left:15px;
    }

    .table_of_contents2 ol {
        padding-left:15px;
      }

    .table_of_contents2 ul {
        margin-left:15px;
      }  

    .article-contents {
      margin:0 10px;
    }

    .article-content-elements h2 {
      border-left:5px solid black;
      margin-top: 15px;
      margin-bottom: 15px;
      padding:5px;
    }

    .article-content-elements p {
       margin:0 10px;
    }

    .related-article-contents h3 {
       border-left:5px solid gray;
       margin-top: 15px;
       margin-bottom: 10px;
       padding:10px;
    }

    .related-article-contents p {
       margin:0 10px;
    }

    .recommended-article-contents h3 {
       border-left:5px solid gray;
       margin-top: 15px;
       margin-bottom: 10px;
       padding:10px;
    }

    .recommended-article-contents p {
       margin:0 10px;
    }

}