/* ============================================
   style-plugins.css
   TOKYOミュージックカラー音楽教室

   【役割】外部プラグイン関連の装飾カスタマイズ
   【依存】style.css（CSS変数）
   【読み込み順】AOS.css / Slick CSS の後に読み込む
   【対象プラグイン】AOS / Slick / FAQ アコーディオン

   ■ 目次
   1. Slick カルーセル カスタマイズ
   2. FAQ アコーディオン
   3. AOS アニメーション微調整
   4. レスポンシブ：768px以下
   ============================================ */


/* ============================================
   ■ 1. Slick カルーセル カスタマイズ
   サイトの配色に合わせたスライダー装飾
   ============================================ */

/* --- スライダー外枠 --- */
.hero-slider {
  margin: 0 0 20px;
  border-radius: 10px;
  overflow: hidden;
}

/* --- スライド：画像読み込み前の高さ確保 --- */
/* アスペクト比 980:250 ≒ 3.92:1 */
.hero-slider .slick-slide {
  aspect-ratio: 980 / 250;
}

/* --- スライド画像 --- */
/*
   旧コードでは以下が2回定義されていた：
   1回目: width:100%; height:100%; object-fit:cover; display:block;
   2回目: width:100%; height:auto; display:block;
   → 2回目が object-fit:cover と height:100% を上書きしていた。
   統合し、aspect-ratio で高さを確保しつつ cover で表示。
*/
.hero-slider .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 前後ボタン --- */
.hero-slider .slick-prev,
.hero-slider .slick-next {
  z-index: 10;
  width: 44px;
  height: 44px;
}

.hero-slider .slick-prev { left: 12px; }
.hero-slider .slick-next { right: 12px; }

.hero-slider .slick-prev:before,
.hero-slider .slick-next:before {
  font-size: 28px;
  color: var(--white);
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  opacity: 0.85;
}

/* --- ドットナビ --- */
.hero-slider .slick-dots {
  bottom: 14px;
}

.hero-slider .slick-dots li button:before {
  font-size: 12px;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  opacity: 0.6;
}

/* アクティブドット */
.hero-slider .slick-dots li.slick-active button:before {
  color: var(--primary);
  opacity: 1;
}


/* ============================================
   ■ 2. FAQ アコーディオン
   JSで .is-open を付与して .faq-answer を表示切替
   ============================================ */

/* --- FAQアイテム外枠 --- */
.faq-item {
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-yellow);
  border: 1px solid rgba(0,0,0,0.06);
}

/* --- 質問（クリック対象） --- */
.faq-question {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  margin: 0;

  background: var(--bg-pink);
  border: none;
  border-left: solid 10px var(--accent-purple-light);
  border-radius: 0;
  cursor: pointer;

  font-size: 110%;
  font-weight: bold;
  color: var(--text);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: left;

  transition: background 0.2s ease;
}

.faq-question:hover {
  background: #ffe8dd;
}

/* Qマーク（丸バッジ） */
.faq-question::before {
  content: 'Q';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-purple-light);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  letter-spacing: 0;
}

/* 開閉アイコン（＋／−）※右端に自動配置 */
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  margin-left: auto;
  font-size: 22px;
  font-weight: normal;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.faq-question.is-open::after {
  content: '−';
}

/* --- 回答（初期状態：非表示） --- */
.faq-answer {
  display: none;
  padding: 18px 24px 18px 66px;
  line-height: 2em;
  font-size: 105%;
  color: var(--text);
}

/* Aマーク */
.faq-answer::before {
  content: 'A.';
  display: inline;
  font-weight: bold;
  color: var(--accent-purple);
  margin-right: 8px;
}


/* ============================================
   ■ 3. AOS アニメーション微調整
   デフォルトの duration を統一（700ms）
   transition-duration: 700ms !important;を4/2いったん削除
============================================ */
[data-aos] {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* 画面内に入ったら表示 */
.js-scrollfx .contents img[data-aos].is-visible {
  opacity: 1;
  transform: translateY(30px);
  transition:
  opacity 0.55s ease,
  transform 0.55s ease;
}

/* 動きを減らしたい環境ではアニメーションしない */
@media (prefers-reduced-motion: reduce) {
  .js-scrollfx .contents img[data-aos] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================
   ■ 4. レスポンシブ：768px以下
   ============================================ */
@media screen and (max-width: 768px) {

  /* --- Slick カルーセル --- */
  .hero-slider .slick-prev,
  .hero-slider .slick-next {
    width: 36px;
    height: 36px;
  }

  .hero-slider .slick-prev:before,
  .hero-slider .slick-next:before {
    font-size: 22px;
  }

  .hero-slider .slick-dots {
    bottom: 10px;
  }

  /* --- FAQ --- */
  .faq-question {
    padding: 14px 14px;
    font-size: 95%;
    gap: 10px;
    border-left-width: 8px;
  }

  .faq-question::before {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .faq-answer {
    padding: 14px 16px 14px 52px;
    font-size: 90%;
    line-height: 1.7;
  }
}