/* ========== Piano detail page additions ========== */

/* ページ先頭のバナー */
.hero-course { margin: 0 0 1.5rem; text-align: center; }
.hero-course .hero-banner{
  display:block; width:100%; max-width:800px; margin:0 auto;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* パンくず */
.breadcrumb{
  font-size:.9rem; margin:0 auto 1.5rem; max-width:720px;
}
.breadcrumb a{ color:#0077b6; text-decoration:none; border-bottom:1px dashed #0077b6; }
.breadcrumb a:hover{ opacity:.8; }

/* リード段落と画像 */
.lead{ max-width:720px; margin:0 auto 1.25rem; line-height:1.9; }
.figure{ display:block; width:100%; max-width:720px; margin:1rem auto 0; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,.08); }

/* 箇条書き（♪マーク） */
.check-list{ max-width:720px; margin:0 auto; padding-left:0; list-style:none; }
.check-list li{
  position:relative; padding-left:1.6em; margin:.4rem 0; line-height:1.8;
}
.check-list li::before{
  content:"♪"; position:absolute; left:0; top:0; color:#7d5a50; font-weight:700;
}

/* 特徴カード */
.features{ max-width:720px; margin:0 auto; display:grid; gap:1rem; }
@media(min-width:720px){ .features{ grid-template-columns:1fr 1fr; } }
.feature{
  background:rgba(190,211,218,.12); border-radius:10px; padding:1rem 1.2rem;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.feature h3{
  font-family:"M PLUS 1p",sans-serif; font-size:1.1rem; margin:0 0 .4rem;
  border-left:4px solid #bed3da; padding-left:.6rem;
}

/* 料金表画像 */
.fee-image{ display:block; width:100%; max-width:720px; margin:0 auto; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,.08); }

/* 体験CTA（既存 #trial を流用） */
#trial{
  background:linear-gradient(135deg, rgba(190,211,218,0.6), rgba(190,211,218,0.2));
  border-radius:16px; text-align:center; padding:2rem 1rem; margin-top:1.5rem;
  position:relative; overflow:hidden;
}
#trial::before{
  content:""; position:absolute; inset:1rem; border:2px solid #fff;
  border-radius:12px; pointer-events:none;
}
#trial h2{ color:#7d5a50; border-bottom:none; margin-bottom:1.2rem; }
#trial .trial-btn{
  display:inline-block; padding:1rem 2.2rem; background:#fff; color:#333;
  border:3px solid #bed3da; border-radius:9999px; font-family:"M PLUS 1p",sans-serif;
  font-size:1.05rem; font-weight:700; line-height:1.45; text-decoration:none;
  box-shadow:0 4px 8px rgba(0,0,0,.08); transition:opacity .25s, transform .15s;
}
#trial .trial-btn:hover{ opacity:.9; transform:translateY(-2px); }
#trial .arrow{ font-size:1.1rem; }

/* 2カラム画像 */
.two-col{ max-width:720px; margin:0 auto; display:grid; gap:1rem; }
@media(min-width:640px){ .two-col{ grid-template-columns:1fr 1fr; } }
.two-col img{ width:100%; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.08); }




/* FAQ（details/summary） */
.faq details{ max-width:720px; margin:.6rem auto; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:.75rem 1rem; }
.faq summary{
  cursor:pointer; list-style:none; font-weight:700;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq .ans{ margin-top:.5rem; line-height:1.9; }

/* スクロール時フェードイン（index と同じ動き） */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* セクションの上下マージンを拡げる（このページだけ） */
.section{
  margin: 2.5rem 0 3rem;   /* 好みで 3rem〜4rem に */
}

/* 見出し下の余白も気持ち増やす */
.section h2{ 
  margin-bottom: .9rem;    /* 既存より少し広めに */
}
.piano-page .p-intro{ text-align:center; max-width:34em; margin:0 auto 2rem; }
.piano-page .p-intro p{ margin:0 0 1.1rem; text-indent:0; }

/* ピアノコース：リード文を中央寄せ */
.piano-page .p-intro{
  text-align:center;
  max-width:34em;
  margin:0 auto 2rem;
}
.piano-page .p-intro p{
  margin:0 0 1.1rem;
  text-indent:0;
}
/* <br>で区切っている場合の応急処置（使わなければ消してOK） */
/* .p-intro br{ content:""; display:block; margin-bottom:1.1rem; } */

/* リード全体（中央寄せのブロック） */
.p-intro{
  text-align: center;
  max-width: 28em;        /* ← 行の長さを少しだけ短く */
  margin: 0 auto 2.2rem;  /* 下の余白を気持ち増やす */
}

/* リード内の各段落 */
.p-intro p{
  line-height: 1.95;      /* 行間を少し広げて読みやすく */
  letter-spacing: .015em; /* わずかに字間を広げる */
  margin: .75rem 0;       /* 段落間の余白を整える */
}



/* 講師より：段落の折り返しと余白を強制（弾き語りページ限定） */
.piano-page #teacher-message {
  max-width: 720px;
  margin: 0 auto;
}
.piano-page #teacher-message p {
  display: block;            /* 念のため */
  white-space: normal;       /* nowrap/pre を打ち消す */
  word-break: break-word;    /* 長い語を折り返し */
  overflow-wrap: anywhere;   /* Safari/Chrome での保険 */
  line-height: 1.9;          /* 行間を他セクションと揃える */
  margin: 0 0 1rem;          /* 段落間の余白 */
  text-indent: 0;            /* 先頭字下げが入っていた場合の打ち消し */
}

/* 講師より：段落の余白を増やす */
#teacher-message p{
  margin: 0;            /* まず上下マージンをリセット */
  line-height: 1.9;     /* 読みやすい行間（お好みで） */
  /* text-indent: 1em;  ← 1行目の字下げを入れたい場合だけ有効化 */
}
#teacher-message p + p{
  margin-top: 1.1rem;   /* 2段落目以降の“上”だけ空ける（0.9〜1.4remで調整） */
}

.piano-page .section p{ margin: 0; line-height: 1.9; }
.piano-page .section p + p{ margin-top: 1.1rem; }