.separate-top {
    position: relative;
    width: 100%;
    height: 300px;
}
.separate-top h2 {
    position: absolute;/*重ねたい子要素にabsolute*/
    top:70%;
    left: 50%;
   -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    transform: translate(-50%,-50%);/*センター寄せの修正*/
    color: #ffffff;
    font-size: 5rem;
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
}
main {
    color: #000;
    padding: 100px 0;
  }
/* Styles for main container */
.main-inner {
    text-align: center;
  }
  
  /* Styles for the h4 heading */
  .main-inner h4 {
    font-size: 24px;
    color: #333;
    margin: 50px auto;
  }
  
  /* Styles for the submenu card */
  .submenu-card {
    width: 300px;
    height: 400px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Hide overflow content */
  }
  
  .submenu-card:hover {
    transform: scale(1.05);
  }
  
  .submenu-item1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-gap: 32px; /* Gap between grid items */
  }
  
  /* Styles for the image inside the submenu card */
  .submenu-card img {
    width: 100%;
    height: 70%;
    object-fit: cover; /* Ensure the image covers the entire space */
  }
  
  /* Styles for the paragraphs inside the submenu card */
  .submenu-card p {
    font-size: 16px;
    color: #333;
  }
  
  /* Styles for the anchor tag */
  .submenu-card a {
    text-decoration: none;
    color: inherit;
  }
  
  /* Additional hover effect for anchor tag */
  .submenu-card a:hover {
    color: #fff;
  }
  
  /* Styles for hover effect on submenu card */
  .submenu-card:hover {
    opacity: 0.5;
  }
  
/* メディアクエリ */
@media (max-width: 1024px) {
  main {
    padding: 50px 0;
  }
    /* 1024ピクセル以下のスクリーン幅に対するスタイル */
    .submenu-item1 {
      grid-template-columns: repeat(2, 1fr); /* 2つの列に調整 */
      margin-right: 10px;
    }
    .submenu-card {
        width: 110%;
        height: 200px;
    }
    .submenu-card p {
      font-size: 0.4rem;
    }
    .font_bold p {
      font-size: 0.7rem;
    }
    /* 画像のサイズを親要素に合わせて調整 */
    .submenu-card img {
      width: 110%; /* 親要素に合わせて画像の幅を調整 */
      height: 70%;
    }
      .main-inner h4 {
        font-size: 0.6rem;
        color: #333;
        margin: 0 0 40px 0;
      }    
      .main-inner h2 {
        font-size: 0.9rem;
        color: #333;
        margin: 0 0 10px 0;
      }        
      .top-text p {
        font-size: 0.8rem;
      }
  }