/* ======================
   全体スタイル
   ====================== */
body {
  font-family: 'M PLUS Rounded 1c', sans-serif; /* 丸みフォントのみ */
  background-color: #fff8e7; /* クリーム色 */
  color: #333;
  margin: 0;
  padding: 0 20px;
  line-height: 1.6;
  box-sizing: border-box;
}


/* 最大幅で中央寄せ */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* ヘッダー */
header h1 {
  text-align: center;
  color: #d71a28;
  font-size: 2em;
  margin: 20px 0;
}

/* 見出し */
h2 {
  text-align: center;
  color: #d71a28;
  font-size: 1.5em;
  margin: 30px 0 15px;
}

/* 本文 */
main p {
  text-align: left;
  margin-bottom: 15px;
}

/* リスト */
ul, ol {
  text-align: left;
  margin-left: 2.5cm;
  margin-bottom: 15px;
}

/* 画像 */
img {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  border-radius: 5px;
}

/* ======================
   ボタン共通
   ====================== */
.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
}

/* ピンクボタン（体験レッスン予約・お問い合わせ） */
.btn-pink {
  background-color: #ff69b4;
  color: white;
}

.btn-pink:hover {
  background-color: #ff85c1;
}

/* 青ボタン（Google Map） */
.btn-blue {
  background-color: #4285F4;
  color: white;
}

.btn-blue:hover {
  background-color: #5a9cf0;
}

/* 住所エリア */
.contact-info {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;    /* 中央寄せ */
  gap: 10px;              /* 上下の間隔 */
  margin: 20px auto;      /* 上下20px、左右自動で中央 */
  max-width: 900px;
  padding: 0 20px;
}

.contact-info p {
  margin: 0;
  text-align: center;     /* テキストも中央寄せ */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact-info {
    padding: 10px;
    gap: 8px;             /* 間隔を少し詰める */
  }
  .contact-info p {
    font-size: 14px;      /* 小さめフォントに調整 */
  }
  .contact-info a.btn {
    width: 100%;          /* ボタンを横幅いっぱいに */
    text-align: center;
  }
}


/* Instagramボタン */
.btn-instagram {
  background-color: #E1306C;
  color: white;
  margin-top: 15px; /* 上に余白を追加 */
}


.btn-instagram:hover {
  background-color: #c72b5b;
}

h1 {
  text-align: center;
  color: #d71a28; /* 赤 */
  font-size: 2em; /* 必要に応じてサイズ調整 */
  margin: 20px 0;
}

/* index.html専用の中央寄せ */
body.index-page {
  text-align: center;
}

body.index-page h1,
body.index-page h2,
body.index-page p,
body.index-page .buttons,
body.index-page .contact-info {
  margin-left: auto;
  margin-right: auto;
}

body.index-page a.btn {
  display: inline-block; /* ボタンは横幅最小で中央 */
}



/* index以外のページでも適用 */
.top-title, .top-subtitle, h1, h2 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.top-title {
  text-align: center;
  color: #d71a28; /* 赤 */
  font-weight: 700; /* 太字 */
  font-size: 2.0rem;
}

.top-subtitle {
  text-align: center;
  color: #d71a28; /* 赤 */
  font-weight: 600; /* やや太め */
  font-size: 1.2rem;
}

/* 右下固定ボタン（PC＆スマホ対応） */
.btn-fixed {
  position: fixed;      /* 画面に固定 */
  bottom: 20px;         /* 下からの距離 */
  right: 20px;          /* 右からの距離 */
  background-color: #ff4444; /* 赤色 */
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  z-index: 1000;        /* 他の要素より前に表示 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* ちょっと浮かせる */
  transition: background-color 0.3s ease;
}

.btn-fixed:hover {
  background-color:#ff6666;
}

/* スマホ用：幅を少し広げてタップしやすく */
@media (max-width: 768px) {
  .btn-fixed {
    right: 10px;
    bottom: 10px;
    padding: 14px 24px;
    font-size: 1rem;
  }
}

/* 行間をタイトにする） */
p.tight {
  margin: 0;
  line-height: 1.4;
}