footer{padding: 5px;
    background-color: rgba(204, 204, 204, 0.175);
    a{color: black;}  
}



.h2 {
    font-size: x-large;
    position: relative;
    padding-left: 25px;
    width: 600;
  }
.h2:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(63, 53, 253);
}
.h2:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: solid 3px rgb(63, 53, 253);
}




img.image{
    border: solid black;
    width: 600px;
    margin: 0 0 30px 0;
}

/* スマホ（幅768px以下）の場合の調整 */
@media screen and (max-width: 768px) {
  
    body {
      font-size: 14px;  /* 全体的に少し小さく */
    }
  
    .h2 {
      font-size: medium;
      width: auto;  /* 固定幅だと画面からはみ出すため */
    }
  
    img.image {
      width: 100%;   /* 画面幅に合わせてリサイズ */
      height: auto;  /* 縦横比維持 */
    }
  
    .flex_container {
      flex-direction: column;  /* 横並びから縦並びに */
      align-items: stretch;
    }
  
    .box, .box_head, .box_big {
      width: 100%;   /* 幅を100%にしてスマホでの見やすさ向上 */
    }
  
  }