h1 {
  font-size: 100%;
  font-family: "M PLUS 1p", serif;
}
p {
  font-size: 90%;
  font-family: "M PLUS 1p", serif;
}

/* グリッドデザイン */
@media screen and (min-width: 1920px) {
  

    .main{
      width: 100vw;
      height: 100vh;
      background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .img2{
      width: 70%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container-breakinside {
      column-count: 3; /* こいつが肝 */
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      }
      .container-breakinside > div {
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      break-inside: avoid; /* こいつが肝 */
      margin: 0 0 10px;
      background-color: #333;
      color: #999;
      padding: 0.5em 1em;
      }
    }

    @media screen and (min-width: 993px) and (max-width: 1919px) {
    .main{
      width: 100vw;
      height: 100vh;
      background-color: red;
    }
    .main img{
      width: 70%;
      height: auto;
    }  
    .container-breakinside {
      column-count: 3; /* こいつが肝 */
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      }
      .container-breakinside > div {
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      break-inside: avoid; /* こいつが肝 */
      margin: 0 0 10px;
      background-color: #333;
      color: #999;
      padding: 0.5em 1em;
      }
    }
    @media screen and (min-width: 769px) and (max-width: 992px) {
      .container-breakinside {
        column-count: 2; /* こいつが肝 */
        height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
        }
        .container-breakinside > div {
        height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
        break-inside: avoid; /* こいつが肝 */
        margin: 0 0 10px;
        background-color: #333;
        color: #999;
        padding: 0.5em 1em;
        }
    }
    @media screen and (min-width: 481px) and (max-width: 768px) {
    .main{
      width: auto;
      height: 100vh;
      background-color: red;
    }
    .main img{
      width: 70%;
      height: auto;
    }
    .container-breakinside {
      column-count: 2; /* こいつが肝 */
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      }
      .container-breakinside > div {
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      break-inside: avoid; /* こいつが肝 */
      margin: 0 0 10px;
      background-color: #333;
      color: #999;
      padding: 0.5em 1em;
      }
    }
    @media screen and (max-width: 480px) {
    .main{
      width: 100vw;
      height: 100vh;
      background-color: red;
    }
    .main img{
      width: 70%;
      height: auto;
    }
    .container-breakinside {
      column-count: 1; /* こいつが肝 */
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      }
      .container-breakinside > div {
      height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
      break-inside: avoid; /* こいつが肝 */
      margin: 0 0 10px;
      background-color: #333;
      color: #999;
      padding: 0.5em 1em;
      }
    }
    .grid {
     display: inline-block;
     -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
     column-break-inside: avoid;
     background:#f6f6f6 !important;
        padding:1em;
        margin-right:3px;
        margin-bottom:15px;
        
    }
    img{
        width: 100%;
    }
    
    

    /* BugFix */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
     .grid {
      display: block !important;
     }
    }