.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;
    background: #f1f1f1;
    padding: 100px 0;
}
.mens-title {
    text-align: center;
    margin: 40px;
}
.mens-title h2 {
   font-size: 2.5rem; 
}
.mens-title p {
   font-size: 1rem; 
}
.mens-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    gap: 20px; /* 要素間の間隔 */
    background: #000000;
}
.mens-image img{
    height: 100%;
}
.mens-explanation {
    width: 100%;
    height: 100%;
}
.mens-explanation h5 {
   font-size: 1.7rem;
   color: #362d7d;
   text-align: center;
}
.mens-explanation p {
   font-size: 1rem;
   color: rgb(255, 255, 255);
   margin: 40px;
}
.mens-QA table {
    width: 100%; /* テーブルの幅を100%に設定 */
    border-collapse: collapse; /* セルの境界を重ねる */
}

.mens-QA th, .mens-QA td {
    border: 1px solid #cbcbcb; /* セルの境界線を設定 */
    padding: 8px; /* セルの内側の余白を設定 */
    text-align: left; /* テキストを左揃えに設定 */
}

.mens-QA th {
    background-color: #f2f2f2; /* ヘッダーの背景色を設定 */
}
.td-color {
    background: #e3e3e3;
}
.mens-type {
    margin-top: 40px;
    border-top: #000 solid 3px;
}
.type-item {
    display: flex;
    width: 100%;
    list-style: none;
}
.type-item li {
    width: 25%;
    color: #fff;
    border: 1px solid #cbcbcb; /* セルの境界線を設定 */
    text-align: center;
    background: #000;
    height: 60px;
    line-height: 60px;
}
li p {
    font-size: 1.5rem;
}
h4 {
    border: 1px solid #cbcbcb; /* セルの境界線を設定 */
    width: 100%;
    font-size: 1.4rem;
    font-weight: 100;
    padding: 15px;
}
.mens-giftcoin {
    margin-top: 40px;
    border-top: #000 solid 3px;
}
.giftmessage {
    margin: 30px 0;
    padding: 20px;
    background-color: #ebebeb;
    border: dashed 1px ;
}
.backtherapist {
    margin-top: 80px;
    text-align: center;  
}
.backtherapist a {
    font-size: 1.5rem;
    border: #c7c7c7 solid;
    color: #7b7b7b;
    padding: 10px 30px;
}
.mens-therapist {
    margin-top: 100px;
    text-align: center;
  }
  .mens-therapist h2 {
    font-size: 2rem;
  }
/* メディアクエリ */
@media (max-width: 1024px) {
    .mens-title h2 {
        font-size: 1.3rem;
    }
    .mens-title p {
        font-size: 0.5rem;
    }
    .mens-card {
        flex-direction: column; /* 子要素を縦方向に配置 */
        align-items: center; /* 子要素を中央揃えに */
        gap: 20px; /* 要素間の間隔 */
    }
    .mens-image img {
        width: 100%; /* 画像を親要素に合わせる */
        height: auto; /* 高さを自動調整 */
    }
    .mens-explanation {
        width: 100%; /* 幅を100%に設定 */
    }
    .mens-explanation h5 {
       font-size: 1.2rem; /* フォントサイズを調整 */
       color: rgb(155, 155, 227);
       text-align: center;
    }
    .mens-explanation p {
       font-size: 0.8rem; /* フォントサイズを調整 */
       color: rgb(255, 255, 255);
       margin: 20px;
       text-align: justify; /* テキストを均等割り付け */
    }
    .mens-QA th, .mens-QA td {
        padding: 6px; /* セルの内側の余白を調整 */
    }
    .mens-QA th {
        font-size: 0.5rem; /* フォントサイズを調整 */
    }
    .mens-QA td {
        font-size: 0.5rem; /* フォントサイズを調整 */
    }
    .mens-type {
        margin-top: 20px; /* マージンを調整 */
    }
    .type-item {
        flex-wrap: wrap; /* 要素を折り返す */
    }
    .type-item li {
        width: 50%; /* 幅を50%に設定 */
        height: auto; /* 高さを自動調整 */
        padding: 10px 5px;
        line-height: normal; /* 行の高さをデフォルトに設定 */
        font-size: 0.5rem; /* フォントサイズを調整 */
    }
    h4 {
        font-size: 0.8rem; /* フォントサイズを調整 */
    }
    .giftmessage {
        margin: 10px 0;
        padding: 15px; /* パディングを調整 */
        font-size: 0.7rem;
    }
    .minititel {
        font-size: 0.5rem;
        margin: 20px 0;
    }
}
/* メンセラから追加 */
.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 {
    margin-top: 50px;
    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) {
    /* 1024ピクセル以下のスクリーン幅に対するスタイル */
    .submenu-item1 {
      grid-template-columns: repeat(2, 1fr); /* 2つの列に調整 */
      grid-gap: 20px; /* グリッドアイテム間の間隔を小さく */
    }
    .submenu-card {
        width: 100%;
        height: 200px;
    }
    /* 画像のサイズを親要素に合わせて調整 */
    .submenu-card img {
      width: 100%; /* 親要素に合わせて画像の幅を調整 */
      height: 70%;
    }
    .submenu-card p {
        margin: 5px 0;
        font-size: 0.4rem;
        color: #333;
      }    
    .font_bold p {
        margin: 5px 0;
        font-size: 0.7rem;
        color: #333;
      }    
      .separate-top h2 {
        top: 40%;
        font-size: 1.5rem;
    }
      /* メンセラから追加 */
  }