/* タブレットサイズのCSS */
@media screen and (max-width: 996px) {
  /*========= ヒーローセクションのCSS ===============*/
  .hero-section {
    overflow: hidden; /* セクション内のはみ出しを隠す */
    position: relative; /* 相対位置を指定 */
    width: 100vw;
    margin-top: 0;
    height: 100svh;
    margin-bottom: 20vh;
  }

  .text-contents {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .text-contents .hero-logo {
    width: 50vw;
    height: auto;
  }

  .logo-container,
  .msg-container {
    justify-content: center;
  }

  .text-contents .msg {
    font-size: calc(0.8rem + 0.9vw);
    font-weight: bold;
    text-align: left;
    margin-top: 5vw;
  }

  .img-contents {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* ビューポートの幅に合わせる */
    height: 100svh; /* ビューポートの高さに合わせる */
    z-index: 1;
    overflow: hidden; /* はみ出しを切り取る */
  }

  .img-contents::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* 薄い白色のマスク */
    z-index: 1;
  }

  #waveCanvas {
    position: absolute;
    top: -125svh;
    left: 0;
    width: 100%;
    height: 400svh;
    z-index: 10;
    pointer-events: none;  /* キャンバスがクリックを受け付けないようにする */
  }

  /* AboutのCSS */
  .about {
    /* ヒーローセクションの高さと追加のスペースを加味してmargin-topを指定 */
    margin-top: 255svh;
    text-align: left;
  }

  .about-content {
    width: 100vw;
    align-items: center;
  }

  .about-text, .about-img {
    width: 100vw;
  }

  .about-img-01 {
    width: 45vw;
    height: auto;
    margin: 0;
  }
  .about-img-02 {
    width: 30vw;
    height: 28.85vw;
    margin: 38vw 0 0 -3vw;
  }

  .menu-card {
    width: 90vw;
    height: 55vw;
  }

  /* PRICE */
  .price-card {
    width: 90vw;
  }
  .price-att {
    width: 80vw;
  }

  /* カラーセラピーとは、カウンセリングとは のCSS */
  .wht-card {
    width: 90vw;
    height: auto;
    max-height: 250px;
  }
  .wht-card h3 {
    border-bottom: 1px solid #494746;
  }
  .wht-card h3,
  .whtis-h {
    font-size: clamp(24px, 1.5vw, 28px);
  }
  .whtis-dtl,
  .whtis-box {
    width: 100%; /* 小さいスクリーンでの幅を100%に設定 */
  }

  .whtis-dtl {
    width: 80vw;
  }

  .whtis-box {
    width: 100vw;
    max-width: 80vw;
    height: auto;
    max-height: 250px;
  }

  .num {
    margin-bottom: -4vw;
  }

  /* THERAPISTのCSS */
  .img-intro img {
    width: 60vw;
    max-width: 80vw;
    height: auto;
  }

  /* CONTACTのCSS */

  /* SNSアイコンのCSS */
  .fixed-social-icons {
    display: flex; /* モバイルデバイスで表示 */
    opacity: 1;
    transition: opacity 1s ease 0s;
    right: 20px; /* 画面右に配置 */
    bottom: 18svh; /* 画面下に配置 */
  }

  /* SNSアイコン自体のスタイル */
  .fixed-social-icons a {
    width: 8vw;
    height: 8vw;
  }
}