.about-section {
    /* background-color: #f9f9f9; */
    padding: 40px 20px;
}

.about-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    overflow: hidden; /* オーバーフローを防ぐ */
}

.about-background {
    font-size: clamp(30px, 10vw, 80px); /* 動的なフォントサイズ調整 */
    color: rgba(0, 122, 204, 0.1); /* 薄い青色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    white-space: nowrap;
    letter-spacing: 5px;
}

.about-title {
    position: relative;
    z-index: 1;
    font-size: 27px;
    color: #333;
    font-weight: 500;
}

.about-contents {
    display:grid;
    justify-content: center;
    gap: 20px; /* テキストと画像の間隔 */
    text-align: left; /* テキストを左寄せ */
    padding: 20px;
}

.about-content {
   
}

.about-head-title {
    font-size: 24px;
    color: #333;
    text-align: left;
}

.about-description {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    text-align: left;

}

.about-image {
    max-width: 320px;
}

.director-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    background-color: #ccc; /* 仮の背景色 */
}



.commitment-section {
    padding: 40px 0px;
    text-align: center;
}

.commitment-header {
    position: relative;
    text-align: center;
    overflow: hidden; /* オーバーフローを防ぐ */
}

.commitment-background {
    font-size: clamp(30px, 10vw, 90px); /* 動的なフォントサイズ調整 */
    color: rgba(0, 122, 204, 0.1); /* 薄い青色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    white-space: nowrap;
    letter-spacing: 5px;
}

.commitment-title {
    position: relative;
    z-index: 1;
    font-size: 35px;
    color: #333;
    font-weight: 500;
}

.commitment-container {
    display: flex;
    justify-content: center;;
    align-items: center;
    padding: 50px 0;
    gap :50px;
}

.commitment-text {
    flex: 1;
    text-align: left;
    max-width: 400px;
    margin-top: -60px;
}

.commitment-feature {
    font-size: 18px;
    color: #00aaff;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 2px;
}

.commitment-content {
  text-align: left; /* 左寄せ */
  margin: 0; /* 不要な余白を削除 */
}

.commitment-heading {
    font-size: 17px;
    color: #333;
    margin: 0; /* 上下の余白を削除 */
    line-height: 1.1; /* 行間を調整 */
    text-align: center;
}

.commitment-divider {
    width: 100%;
    text-align: center;
    /* max-width: 200px; */
    border: 1px solid (192,192,192);
    margin: 15px 0; /* 上下の余白 */
}

.commitment-description {
    font-size: 14px;
    color: #555;
    line-height: 1.3;
    margin: 10px 0 0 0; /* 上部余白を適度に設定 */
    padding: 0; /* パディングを削除 */
}


.commitment-image {
    flex: 1;
    text-align: center;
    max-width: 450px;
    /* width: 100%; */
}


.commitment-photo {
    width: 100%;
    max-width: 450px;
    height: auto;
}

.commitment-text .highlight {
    color: #00aaff;
}

.clinic-info-section {
    padding: 40px 0px;
    text-align: center;
}

.clinic-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
  gap:30px;
}

.clinic-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 子要素の左端を揃える */
  /* margin-left: 50px;: */
}

.clinic-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.clinic-table th,
.clinic-table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}

.clinic-table th {
  /* width: 100px;  */
  background-color: #f0f8ff;
  padding: 0px 50px;
  font-size: 13px;
}

.clinic-table td {
  padding: 8px 50px;
  font-size: 13px;
}

.clinic-schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左端を揃える */
  margin-top: 30px;
}

.clinic-schedule-img {
  width: 90%; /* テーブルの幅と一致する */
  max-width: 500px; /* 最大幅を指定 */
  height: auto;
  margin-top: 20px;
}

.clinic-schedule-note {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
  text-align: left;
}

.clinic-image {
  text-align: center;
  margin: 20px; /* 横並び時の余白 */
}

.clinic-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border: 1px solid #ccc;
}

.clinic-schedule table {
    width: 92%;
    border-collapse: collapse;


}
.clinic-schedule th, td {
    text-align: center;
    padding: 12px;
}
.clinic-schedule th {
    background-color: #00BFFF;
    color: white;
    font-weight: 100;
    font-size: 13px;
}

.clinic-schedule td {
    background-color: #FFFFFF;
    border-bottom:  1px solid #ddd;
}

.clinic-schedule tbody tr:first-child {
    border-bottom: 2px solid #00BFFF;
}

.clinic-schedule th:first-child {
    width: 170px;
}


.facility-section {
  padding: 40px 20px;
}

.facility-grid {
  display: flex;
  /* gap: 10px; */
  justify-content: center;
  gap:20px;
}

.facility-item {
  text-align: center;
}

.facility-image {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.facility-name {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

.facility-header-img {
  width: 100%; /* 画像を親要素の幅にフィット */
  max-width: 800px; /* 最大幅を指定 */
  height: auto; /* アスペクト比を維持 */
  margin: 0 auto; /* 中央寄せ */
  display: block; /* ブロック要素として扱う */
  margin-bottom: 20px;
}

.info-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    overflow: hidden; /* オーバーフローを防ぐ */
}

.info-background {
    font-size: clamp(30px, 20vw, 90px); /* 動的なフォントサイズ調整 */
    color: rgba(0, 122, 204, 0.1); /* 薄い青色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    white-space: nowrap;
    letter-spacing: 12px;
}

.info-title {
    position: relative;
    z-index: 1;
    font-size: 36px;
    color: #333;
    font-weight: 500;
}

/* スマホ用スタイル */
@media screen and (max-width: 960px) {


    .about-header{
      margin-bottom: 0;
    }

    .about-head-title {
      font-size: 18px;
    }

    .about-title {
        font-size: 20px; /* タイトルのフォントサイズを縮小 */
    }

    .about-background {
        font-size: clamp(20px, 14vw, 60px); /* さらに小さい画面用に調整 */
    }

    .about-description{
      font-size: 14px;
    }


    .about-contents {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;
        text-align: center; /* テキストを中央寄せ */
    }

    .about-image {
        margin-top: 20px;
    }

    .about-content {
        margin-left: 0px;
    }

    .commitment-title {
        font-size: 20px; /* タイトルのフォントサイズを縮小 */
    }

    .commitment-background {
        font-size: clamp(20px, 10vw, 60px); /* さらに小さい画面用に調整 */
    }

    .commitment-container {
      flex-direction: column;
      gap:0px;
      padding: 50px 20px;
    }

    .commitment-photo {
        margin-top: 20px;
    }

    .reverse {
        flex-direction: column-reverse; /* テキストを画像の下に配置 */
    }

    .commitment-content {
      text-align: left; /* 左寄せ */
      margin: 0; /* 不要な余白を削除 */
      padding:10px; /* 左側に20pxの余白を追加 */
    }

    .commitment-heading{
      font-size: 14px;
    }

    .commitment-description{
      font-size: 12px;
    }

    .info-title {
        font-size: 20px; /* タイトルのフォントサイズを縮小 */
    }

    .info-background {
        font-size: clamp(20px, 10vw, 60px); /* さらに小さい画面用に調整 */
        letter-spacing: 5px;
    }

    .info-header{
      margin-bottom: 20px;
    }

    .clinic-info {
      flex-direction: column; /* 縦並びに変更 */
      align-items: center; /* 子要素を中央寄せ */
      gap:0px;
      padding:0 15px;
    }

    .clinic-image {
      margin: 20px 0 0; /* 上に余白を追加 */
    }

    .clinic-schedule-img{
      width: 100%;
    }

    .clinic-details {
      width: 100%; /* 幅を親要素に合わせる */
      align-items: center; /* テーブルを中央揃え */
    }

    .clinic-table {
      max-width: 500px; /* スマホ表示用のテーブル幅 */
      margin: 0 auto; /* 中央寄せ */
    }

    .clinic-details{
      margin: 0;
    }

    .clinic-table th {
      padding: 5px;
    }

    .clinic-table td {
      padding: 0px;
      font-size: 13px;
    }

    .clinic-schedule{
      max-width: 500px;
      width: 100%;
    }

    .clinic-schedule table{
      width: 100%;
    }

    .clinic-schedule th{
      font-size:11px;
    }

    .circle{
      font-size: 8px;
    }

    .triangle{
      font-size: 10px;
    }

    .slash {
        font-size: 8px;
    }

    .facility-grid {
      flex-direction: column;
    }

    .facility-name {
      font-size: 14px;
    }

    .facility-image {
      max-width: 315px;
    }

    .facility-header-img{
      max-width: 500px;
    }
}