/* ============================================
   style-contents.css
   TOKYOミュージックカラー音楽教室 フランチャイズ 共通スタイル

   【役割】.contents 内部の装飾・見た目のみ
   【依存】style.css（CSS変数・レイアウト）
   【読み込み順】2番目（style.css の直後）
   【注意】レイアウト（幅・配置・余白）は style.css で管理

   ■ 目次
   1. 背景色
   2. 見出し（h1 / h2 / h3）
   3. 画像
   4. 段落
   5. リスト（ul / li）
   6. Slick スライダー除外ルール
   7. レスポンシブ：768px以下
   ============================================ */


/* ============================================
   ■ 1. 背景色
   コンテンツエリア全体のベース背景
   ============================================ */
.contents {
  background: var(--bg-cream);
}


/* ============================================
   ■ 2. 見出し
   h1：メインカラー左ボーダー（ページタイトル）
   h2：紫系左ボーダー（セクション見出し）
   h2.line：緑系（LINE問い合わせ等の別系統セクション）
   h3：薄紫左ボーダー（小見出し）
   ============================================ */
.contents h1 {
  clear: both;
  padding: 20px;
  background: var(--bg-pink);
  border-radius: 10px;
  border-left: solid 20px var(--primary);
  font-size: 150%;
  line-height: 1.5;
}

.contents h2 {
  clear: both;
  padding: 20px 0 20px 50px;
  background: var(--bg-pink);
  border-radius: 10px;
  border-left: solid 20px var(--accent-purple);
  font-size: 130%;
  line-height: 1.5;
}

/* LINE問い合わせ等の緑系セクション見出し */
.contents h2.line {
  clear: both;
  padding: 20px 0 20px 50px;
  background: var(--bg-green);
  border-radius: 10px;
  border-left: solid 20px var(--accent-green);
  font-size: 130%;
  line-height: 1.5;
}

.contents h3 {
  clear: both;
  padding: 20px 0 20px 50px;
  background: var(--bg-pink);
  border-radius: 10px;
  border-left: solid 20px var(--accent-purple-light);
  font-size: 115%;
  line-height: 1.5;
}


/* ============================================
   ■ 3. 画像
   .contents 内の全 img をフル幅表示
   ※ Slick スライダー内の画像は ■6 で除外
   ============================================ */
.contents img {
  width: 100%;
  padding: 10px 0;
}

/*
   補足：以前 .contents p img { width: 100%; } があったが、
   親ルール .contents img で全 img に適用済みのため削除。
*/


/* ============================================
   ■ 4. 段落
   ============================================ */
.contents p {
  width: 100%;
  padding: 0 30px;
  line-height: 2em;
  font-size: 120%;
}


/* ============================================
   ■ 5. リスト
   黄色背景＋丸ドットマーカーのカスタムリスト
   ============================================ */
.contents ul {
  width: 100%;
}

.contents ul li {
  position: relative;
  list-style-type: none !important;
  padding: 20px 0 20px 30px;
  margin-bottom: 10px;
  line-height: 1em;
  background: var(--bg-yellow);
  vertical-align: middle;
  color: var(--text);
  font-weight: bold;
  border-radius: 10px;
}

/* カスタム丸ドットマーカー */
.contents ul li:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 1em;
  height: 1em;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 2em;
}


/* ============================================
   ■ 6. Slick スライダー除外ルール
   .contents 内の汎用スタイルが Slick の
   ドットナビ・スライド画像に干渉しないよう除外
   ============================================ */

/* スライダー内の画像は padding なし */
.contents .hero-slider img {
  padding: 0;
  height: auto;
  display: block;
}

/* ドットナビのリセット */
.contents .slick-dots {
  padding: 0;
  margin: 0;
  width: 100%;
  background: none;
}

.contents .slick-dots li {
  position: relative;
  padding: 0;
  margin: 0 4px;
  background: none;
  border-radius: 0;
  line-height: normal;
  font-weight: normal;
}

.contents .slick-dots li:before {
  display: none;
}


/* ============================================
   ■ 7. レスポンシブ：768px以下
   コンテンツ装飾の調整のみ
   ※ レイアウト変更は style.css 側で管理
   ============================================ */
@media screen and (max-width: 768px) {

  /* --- 見出し共通：余白・フォントサイズ縮小 --- */
  .contents h1 {
    padding: 14px 12px;
    font-size: 100%;
    letter-spacing: 0.08em;
    line-height: 1.5;
    border-left-width: 10px;
  }

  .contents h2,
  .contents h2.line,
  .contents h3 {
    padding: 14px 12px 14px 18px;
    font-size: 100%;
    letter-spacing: 0.08em;
    line-height: 1.5;
    border-left-width: 10px;
  }

  /* --- 段落 --- */
  .contents p {
    padding: 0 8px;
    font-size: 90%;
    line-height: 1.5;
  }

  /* --- リスト --- */
  .contents ul {
    padding-left: 0;
  }

  .contents ul li {
    padding: 14px 10px 14px 18px;
    font-size: 90%;
    line-height: 1.5;
  }

  .contents ul li:before {
    margin-right: 12px;
  }
}