/* スマホサイズのCSS */
@media screen and (max-width: 500px) {
  /* 共通のCSS */
  p {
    font-size: 1rem;
  }

 /*========= ヒーローセクションのCSS ===============*/
 .hero-section {
  height: 100svh; /* 高さビューポートの100%に設定 */
}


  /* AboutのCSS */
  .about-content {
    width: 100vw;
  }
  .about-text {
    width: 85vw;
    max-width: 370px;
  }
  .about-img {
    width: 85vw;
    max-width: 370px;
  }
  .about-img-01 {
    width: 45vw;
    height: 60.01875vw;
  }

  /* MENUのCSS */
  .menu-card {
    width: 85vw;
    height: 100vw;
  }

  /* COLOR THERAPY, COUNSELINGの共通CSS */
  .whtis-box {
    max-height: 400px;
    padding: 5vw 0 0 0;
  }
  .whtis-box ul {
    padding: 2vw;
  }
  .wht-card, .clrtp-card, .cns-card {
    width: 90vw; /* スマホサイズでカードの幅を90vwに設定 */
    max-height: auto; /* 最大高さを自動に設定 */
  }

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

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

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

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