h1{margin-bottom:100px;}
    
    h2{text-align:center;}
    
    h3{font-weight:bold;margin-bottom:20px;}
    
    .red{color:red;}
    .blue{color:blue;}
    .bold{font-weight:bold;}
    
    .flex1 {
      display: flex;
      flex-wrap:wrap;
      justify-content: space-between;
      margin-bottom:80px;
    }
    
    .flex1 a{
      display: block;
      width: 49%;
      text-decoration:none;
    }
    
    .flex1:after {
      content: "";
      display: block;
      width: 49%;
      height: 0;
    }
    
    .flex {
      display: flex;
      justify-content: space-between;
      margin-bottom:40px;
    }
    
    .image {
    width: 50%;
    heiht:auto;
    overflow: hidden;/*同じサイズの画像を使う場合は不要*/
    }
    
    .image img{
    width: 100%;
    height: 100%;
    object-fit: contain;/*同じサイズの画像を使う場合は不要*/
    }
    
    .text {
      width: 100%;
      padding: 0 1%;
    }
    
    .flex p{line-height:2rem;}
    
    
    @media screen and (max-width: 767px) {
    h1{margin-bottom:50px;}
    h3{font-weight:bold; margin-bottom:10px;}
    .flex1 {margin-bottom:50px;}
    .flex p{line-height:1.2rem;}
    .flex {display:block; width:100%; padding:2%; margin-bottom:20px;}
    .flex .image {width:100%; height: inherit;}
    .flex .image img {width:95%;}