/* セクションタイトル */
.section-title {
    font-size: 1.8rem; /* 表題のフォントサイズ */
    font-weight: bold; /* 太字 */
    color: #333; /* 文字色 */
    text-align: center; /* 中央揃え */
    margin-bottom: 40px; /* 表題と内容の間に余白 */
    font-family: 'Georgia', serif; /* 優雅なフォント */
  }
  
  /* セクション全体 */
  .photo-comment-section {
    width: 68%; /* 全体の幅 */
    max-width: 1200px; /* 最大幅を指定 */
    margin: 0px auto; /* 上下余白を追加し中央揃え */
    margin-top: 110px;
    padding: 0px 0;
  }
  
  /* コンテンツ全体のラッパー */
  .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px; /* 左右間のスペース */
  }
  
  /* 写真部分 */
  .photo-section {
    flex: 0 0 45%; /* 幅の比率を設定 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .photo-section img {
    width: 100%; /* 写真を親要素に合わせる */
    height: auto;
    border-radius: 10px; /* 角を丸める */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  }
  
  /* コメント部分 */
  .comment-section {
    flex: 0 0 55%; /* 幅の比率を設定 */
    text-align: left; /* 左揃え */
  }
  
  .comment-section h3 {
    font-size: 1.5rem; /* コメント見出しのフォントサイズ */
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
  }
  
  .comment-section p {
    font-size: 1rem;
    color: #777;
    line-height: 1.6; /* 行間を調整 */
  }

  /* コメントと写真のセクション */
.comment-photo-section {
    width: 68%; /* 全体の幅 */
    max-width: 1200px; /* 最大幅を指定 */
    margin: 0px auto; /* 上下余白を追加し中央揃え */
    padding: 0px 0;
    margin-top: 20px;
    margin-bottom: 60px;
  }
  
  /* コンテンツ全体のラッパー */
  .comment-photo-section .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px; /* 左右間のスペース */
  }
  
  /* コメント部分 */
  .comment-photo-section .comment-section {
    flex: 0 0 55%; /* 幅の比率を設定 */
    text-align: left; /* 左揃え */
  }
  
  .comment-photo-section .comment-section h3 {
    font-size: 1.5rem; /* コメント見出しのフォントサイズ */
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
  }
  
  .comment-photo-section .comment-section p {
    font-size: 1rem;
    color: #777;
    line-height: 1.6; /* 行間を調整 */
  }
  
  /* 写真部分 */
  .comment-photo-section .photo-section {
    flex: 0 0 45%; /* 幅の比率を設定 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .comment-photo-section .photo-section img {
    width: 100%;
    max-width: 500px; /* 最大幅を指定 */
    height: auto;
    border-radius: 10px; /* 角を丸める */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  }
  .photo-section img,
.comment-photo-section .photo-section img {
    aspect-ratio: 4 / 3; /* 幅4:高さ3の比率を固定 */
    object-fit: cover; /* サイズ調整時に画像を適切にトリミング */
}

  .instruments img {
    max-width: 300px;
    width: 21vw;
    height: auto;
    margin-top: -5vw;
    margin-left:10vw;
    z-index: 0;
  }
  
 /* セクション全体 */
.student-feedback {
    text-align: center;
    background-color: transparent; /* common.cssの背景色を引き継ぐ */
    padding: 40px 20px;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* 表題 */
  .student-feedback h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-top: 30px;
    margin-bottom: 60px;
  }
  
  /* ギャラリー部分 */
  .feedback-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 70px;
    margin-bottom: 40px;
  }
  
  .feedback-image {
    width: 210px;
    height: 265px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.5s ease;
  }
  
  .feedback-image:hover {
    transform: scale(1.05);
  }
  


  /* 全体のセクションスタイル */
.lesson-details {
    margin: 50px auto;
    margin-top: 130px;
    padding: 20px;
    max-width: 800px;
    background-color: transparent; /* 背景色は共通の背景に合わせる */
    text-align: center;
  }
  


  /* 料金についてセクション */
  .pricing-section h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 5px;
  }

  .heart_music img {
    width: 180px;
    height: auto;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center;     /* 縦方向の中央揃え */
    margin-top: 0;
    margin-bottom: -140px;
    margin-left:0;
    z-index: 0;
  }
  
  .pricing-section .subtitle-lesson {
    font-size: 1.0rem;
    color: #666;
    margin-top: 0px; /* 「月謝」の上余白をなくす */
    margin-bottom: 30px;
  }
  
  
.pricing-table {
  width: 100%;
  margin: 20px 0 10px 0; /* 上20px 下10px */
  border-collapse: collapse;
  text-align: left;
}

  
  .pricing-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 1.2rem;
    color: #333;
  }
  
  .pricing-table td:first-child {
    text-align: left;
    font-family: fantasy;
  }
  
  .pricing-table td:last-child {
    text-align: right;
    font-family: fantasy;
  }
  
  .note {
    font-size: 0.9rem;
    color: #999;
    margin-top: 0px;
    margin-left: 10px;
    text-align: left;
  }

  .line_music {
    display: flex;
    justify-content: flex-start; /* 子要素を左に寄せる */
    align-items: center;         /* 垂直方向は中央揃え（必要なら） */
  }

  .line_music img {
    width: 400px;
    height: auto;
    margin-top: -100px;
    justify-content:left; /* 横方向の中央揃え */
    align-items: center;     /* 縦方向の中央揃え */
    z-index: 0;
  }
  
  /* レッスン日程についてセクション */
  .schedule-section h2 {
    font-size: 1.8rem;
    color: #333;
    margin-top: 0px;
    margin-bottom: 20px;
  }
  
  .schedule-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    text-align: center;
  }
  
  .classroom-gallery {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 50px auto;
    margin-bottom: 80px;
    max-width: 1000px;
    gap: 20px;
  }
  
  .classroom {
    display: inline-block;
    position: relative;
    width: 48%; /* 左右の幅を調整 */
    text-align: center;
    margin: 1%;
    vertical-align: top;
  }
  
  .classroom h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .classroom-slider {
    position: relative;
    height: 400px; /* スライダーの高さを設定 */
    width: 100%;
    max-width: 500px; /* 必要に応じて調整 */
    margin: 0 auto;
    overflow: hidden; /* 画像がはみ出さないようにする */
  }
  
  .classroom-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* 他の写真と同じ数値に合わせる */
    object-fit: cover;      /* 画像を縦横いっぱいに拡大・縮小 */
    opacity: 0;             /* デフォルトは透明 */
    display: block;          /* 表示上は非表示 */
    transition: opacity 1.3s ease; /* フェード速度を1.3秒に */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .classroom-image.show {
    opacity: 1;
  }
  
  .classroom-image:first-child {
    display: block; /* 最初の画像だけ表示 */
  }

  .prev-button,
  .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #444444cf, #222222c2); /* シンプルな斜めグラデーション */
    
    color: #fff; /* SVG の fill="currentColor" に影響 */
    border: none;
    border-radius: 50%;
    width: 48px;    /* 若干大きめに */
    height: 48px;
    padding: 0;     /* 内側の余白は不要 */
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }
  
  .prev-button:hover,
  .next-button:hover {
    background: linear-gradient(135deg, #333, #111);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  }
  
  .prev-button {
    left: 10px;
  }
  
  .next-button {
    right: 10px;
  }
  

.title-deco {
  width: 50px;   /* もしくは 50pt */
  height: auto;
  margin-left: 10px; /* 文字との距離を開ける */
  vertical-align: middle; /* 文字の中央揃え */
}

/* タイトル全体のラッパーは相対配置 */
.price-wrapper {
  position: relative;
  text-align: center; /* タイトルテキストは中央揃え */
  display: inline-block; /* 内容の幅に合わせる */
}

/* タイトルテキストは中央に配置（.title-wrapper の text-align: center で十分） */
.title-text {
  display: inline-block;
  margin: 0; /* 必要なら調整 */
}

/* 装飾画像は絶対配置し、テキストの中央からオフセットする */
.title-deco2 {
  position: absolute;
  /* 例として、タイトルテキストの右側に配置 */
  top: 50%;
  right: -100px; /* 画像の位置はお好みで調整 */
  transform: translateY(-50%);
  width: 90px;
  height: auto;
}


/* モーダル全体（背景オーバーレイ） */
.feedback-modal {
  /* display は常に flex にしておく */
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
  z-index: 1000;
  
  /* 初期状態は見えない */
  opacity: 0;
  visibility: hidden;
  
  /* opacity と visibility にトランジションを設定 */
  transition: opacity 1.1s ease, visibility 0.05s ease;
}

/* 表示状態 */
.feedback-modal.show {
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウの内容（65%幅） */
.feedback-modal-content {
  position: relative;
  width: 65%;                 /* 画面幅の65% */
  max-width: 800px;
  padding: 20px;
  border-radius: 10px;
  /* 背景画像と白い薄いオーバーレイを重ねる */
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
              url('assets/images/your-background.jpg'); /* 背景画像パスを指定 */
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* モーダル内の本体（2カラムレイアウト） */
.feedback-modal-body {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 左側：クリックした画像を表示 */
.feedback-modal-image {
  flex: 1;
  margin-right: 20px;
}

.feedback-modal-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 右側：文章（手紙調風） */
.feedback-modal-text {
  flex: 2;
  text-align: left;
  font-family: 'Courier New', Courier, monospace; /* 手紙調に合うフォント例。お好みの手書き・カリグラフィーフォントを指定しても良い */
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.feedback-modal-text h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.feedback-modal-text p {
  margin: 0;
}

/* 閉じるボタン */
.feedback-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  transition: color 0.3s ease;
}

.feedback-modal-close:hover {
  color: #333;
}

.classphoto{
  font-size: 1.2rem;
}

#message h1 {
  font-size: 1rem; /* 文字の大きさを変更 */
  font-family: "Georgia", serif; /* フォントの種類を変更 */
  font-weight: bold; /* 文字を太くする */
  color: white; /* 文字の色 */
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); /* 読みやすくするため影を追加 */
  text-align: center; /* 中央揃え */
  line-height: 1.5; /* 行間の調整 */
  padding: 10px 20px;
  max-width: 80%;
  margin: 0
}
  
  /* レスポンシブ対応（携帯表示） */
  @media screen and (max-width: 768px) {
    .content-wrapper {
      flex-direction: column; /* 縦並び */
      gap: 20px; /* 上下の間隔を調整 */
    }
  
    .photo-section,
    .comment-section {
      flex: none; /* 幅の比率を解除 */
      width: 100%; /* 全体幅を100%にする */
    }
  
    .photo-section img {
      max-width: 100%; /* 写真の幅を画面幅に合わせる */
    }
  
    .comment-section {
      text-align: center; /* コメントを中央揃えにする */
    }


    .comment-photo-section .content-wrapper {
        flex-direction: column-reverse; /* 子要素の順番を逆に */
        gap: 20px; /* 上下の間隔を調整 */
      }
    
      .comment-photo-section .comment-section,
      .comment-photo-section .photo-section {
        flex: none; /* 幅の比率を解除 */
        width: 100%; /* 全体幅を100%にする */
      }
    
      .comment-photo-section .photo-section img {
        max-width: 100%; /* 写真の幅を画面幅に合わせる */
      }
    
      .comment-photo-section .comment-section {
        text-align: center; /* コメントを中央揃えにする */
      }

      .line_music img {
        width:300px;
        height: auto;
        margin-top: -100px;
        margin-left:0px;
      }

      .feedback-modal-text p {
        font-size: 0.9rem; /* 例：デスクトップより小さめのサイズに変更 */
      }

      .feedback-gallery {
        flex-wrap: wrap; /* 画像を折り返し可能にする */
        justify-content: center; /* 中央揃え */
        gap: 20px; /* 間隔を適切に調整 */
      }
    
      .feedback-image {
        width: 170px; /* 携帯時の幅 */
        height: 220px; /* 携帯時の高さ */
      }

      .pricing-table td {
        font-size: 1.0rem; /* 携帯表示時は文字を少し小さく */
      }

      .classroom-slider {
        position: relative;
        height: 300px; /* スライダーの高さを設定 */
        width: 100%;      
      }

      .classphoto{
        font-size: 1.0rem;
      }
}


@media screen and (min-width: 1200px) {
  .line_music img {
    margin-top: -100px;
    margin-left: 300px;
    }
}

@media screen and (max-width: 430px) {

  /* セクションタイトルのサイズ縮小 */
  .section-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  /* 全体の幅・余白調整 */
  .photo-comment-section,
  .student-feedback,
  .comment-photo-section {
    width: 90%;
    margin: 0 auto;
    margin-top: 55px;
    padding: 0;
  }

  

  /* コンテンツラッパーは縦並びに変更 */
  .content-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  /* 写真部分、コメント部分は幅いっぱいに */
  .photo-section,
  .comment-section {
    width: 100%;
  }
  
  /* 写真のサイズ縮小 */
  .photo-section img,
  .comment-photo-section .photo-section img {
    max-width: 100%;
    height: auto;
  }

  /* コメント見出しと本文のサイズ調整 */
  .comment-section h3,
  .comment-photo-section .comment-section h3 {
    font-size: 1.0rem;
  }
  .comment-section p,
  .comment-photo-section .comment-section p {
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
  }

  .instruments img {
    margin-top: -2vw;
    margin-left:10vw;
    z-index: 0;
  }

  .heart_music img {
    margin-bottom: -65px;
    width: 100px;
  }
  .line_music img {
    margin-left: 10px;
    margin-top: -40px;
    width: 170px;
  }

    /* 「料金について（月謝/月に3回）」のセクションタイトルの文字サイズ縮小 */
    .pricing-section h2 {
      font-size: 1.2rem; /* 調整例 */
    }

    .pricing-section .subtitle-lesson {
      font-size: 0.7rem;
      color: #666;
      margin-top: 0px; /* 「月謝」の上余白をなくす */
      margin-bottom: 20px;
    }

    .title-deco {
      width: 30px;   /* もしくは 50pt */
      height: auto;
      margin-left: 10px; /* 文字との距離を開ける */
    }

    /* 装飾画像は絶対配置し、テキストの中央からオフセットする */
    .title-deco2 {
       /* 例として、タイトルテキストの右側に配置 */
       top: 50%;
       right: -60px; /* 画像の位置はお好みで調整 */
       width: 50px;
}

    .lesson-details {
      margin: 30px auto;
      margin-top: 70px;
      padding: 10px;
    }

    .note {
      font-size: 0.6rem;
      margin-top: 0px;
      margin-left: 9px;
    }

  /* 生徒の声セクションの表題 */
  .student-feedback h2 {
    font-size: 1.2rem;
      margin-top: 0px;
      margin-bottom: -30px;
  }

  .feedback-gallery {
    gap: 10px; /* 間隔を適切に調整 */
  }

  /* ギャラリー画像のサイズ縮小 */
  .feedback-image {
    width: 80px;
    height: 108px;
    border-radius: 5px;
  }

  /* 料金テーブルの文字サイズ縮小 */
  .pricing-table td {
    font-size: 0.9rem;
    white-space: pre-line; /* "\A" を改行として解釈する */
    line-height: 0.95; /* お好みの値に調整 */
  }

  .line-break::after {
    content: "\A";
    white-space: pre;  /* 改行を有効にする */
    display: block;
  }

  

  /* ヒーローセクション内のテキスト調整 */
  .hero-container h1 {
    font-size: 1.2rem;
    margin-top: 150px;
    margin-bottom: 150px;
  }
  .hero-container h2 {
    font-size: 1rem;
  }

  .schedule-section h2 {
    font-size: 1.2rem; /* 携帯表示用のフォントサイズ */
  }

  .schedule-description{
    font-size: 0.80rem; /* 携帯表示用のフォントサイズ */
    text-align: left;
  }

  .classroom-slider {
    position: relative;
    height: 160px; /* スライダーの高さを設定 */
    width: 100%;
    max-width: 500px; /* 必要に応じて調整 */
    margin: 0 auto;
    overflow: hidden; /* 画像がはみ出さないようにする */
  }

  .classroom-gallery {
    margin-top: -20px;
    margin: 5px auto;
    margin-bottom: 40px;
    gap: 0px !important; /* 必要に応じて調整 */
  }

  .classroom {
    margin: 0%;
  }

  .classroom-image {
    border-radius: 5px; /* 他の写真と同じ数値に合わせる */
  }

  .classphoto{
    font-size: 0.8rem;
  }

  .prev-button,
  .next-button {
    width: 24px;    /* 若干大きめに */
    height: 24px;
  }  

  /* 講師紹介などの文字サイズ縮小 */
  .teacher-name {
    font-size: 1.5rem;
  }
  .teacher-name ruby rt {
    font-size: 0.8rem;
  }

  /* モーダル全体（背景オーバーレイ） */
  

/* モーダルウィンドウの内容（65%幅） */
.feedback-modal-content {
  position: relative;
  width: 90%;                 /* 画面幅の65% */
  max-width: 800px;
  padding: 15px;
  border-radius: 5px;
  /* 背景画像と白い薄いオーバーレイを重ねる */
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
              url('assets/images/your-background.jpg'); /* 背景画像パスを指定 */
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* モーダル内の本体（2カラムレイアウト） */
.feedback-modal-body {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 左側：クリックした画像を表示 */
.feedback-modal-image {
  flex: 1;
  margin-right: 11px;
}

.feedback-modal-image img {
  border-radius: 5px;
}

/* 右側：文章（手紙調風） */
.feedback-modal-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
}

.feedback-modal-text h3 {
  font-size: 1.2rem;
  margin-bottom: 17px;
  font-weight: bold;
}

.feedback-modal-text p {
  margin: 0;
  margin-bottom: 8px;
}

  
  /* その他、必要な箇所の余白・サイズ調整 */
}