@charset "UTF-8";

/* ================================================================
   ちいかわもぐもぐ本舗 川越店 カスタムCSS

   このファイルで川越店固有の設定を定義します
   共通CSS (chiikawa-store-common.css) の後に読み込んでください
   ================================================================ */

:root {
  /* 川越店固有の色設定 */
  --clp-color-primary: #c69ab9; /* 川越店プライマリカラー（紫/ピンク） */
  --clp-color-text: #5c3859; /* 川越店テキストカラー（濃い紫） */
  --clp-color-base: #dfc7d8; /* 川越店ベースカラー（薄い紫/ピンク） */
  --clp-color-base-light: #dfc7d8; /* ベース（明るい） */
  --clp-color-accent: #eac267; /* 川越店アクセントカラー（ゴールド） */
  --clp-color-bg-pink: #f3e2ef; /* 川越店背景ピンク（薄いピンク） */

  /* ボタンホバーカラー（プライマリカラーより少し暗め） */
  --clp-color-accent-hover: #d9b279;

  /* 背景画像パス（川越店専用） */
  --clp-bg-repeat-pattern: url("../../common/images/backgrounds/backgrounds-repeat-pattern.png");
}

/* ================================================================
   川越店固有のスタイル調整
   ================================================================ */

/* ================================================================
   川越店固有のボタンスタイル
   ================================================================ */

/* プライマリボタンのホバーカラー */
.chiikawa-lp-button--primary:hover {
  background-color: #c69ab9;
}

.chiikawa-lp-button--primary:hover .chiikawa-lp-button__icon {
  color: #b5d09c;
}

/* プライマリボタンの三角アイコン色を川越店カラーに */
.chiikawa-lp-button--primary .chiikawa-lp-button__icon {
  color: #e8824b;
}

/* ================================================================
   川越店固有の背景・レイアウト
   ================================================================ */

/* 川越店のボディクラスにカラーを適用 */
.chiikawa-lp-kawagoe #wrapper {
  background-color: var(--clp-color-base-light);
}

/* Goodsカードの背景色を川越店カラーに */
.chiikawa-lp-goods__card {
  background-color: var(--clp-color-bg-pink);
}

/* ================================================================
   川越店固有のセクションスタイル
   ================================================================ */

/* Newsセクションのボタンスタイル調整 */
.chiikawa-lp-news .chiikawa-lp-button--secondary {
  background-color: var(--clp-color-bg-pink);
  color: var(--clp-color-text);
}

.chiikawa-lp-news .chiikawa-lp-button--secondary:hover {
  opacity: 0.8;
}

/* Accessセクションのマップボタン */
.chiikawa-lp-access .chiikawa-lp-button--primary {
  background-color: var(--clp-color-accent);
}

/* ================================================================
   川越店固有のフッタースタイル
   ================================================================ */

/* フッター背景色は既にCSS変数で適用されているため追加不要 */
/* 必要に応じてフッターテキスト色などの微調整をここに追加 */

/* ================================================================
   川越店 セクションタイトル画像のサイズ設定（2倍PNG画像を元サイズで表示）
   ================================================================ */

/* PC版（768px以上）のセクションタイトル画像サイズ */
@media (min-width: 768px) {
  .chiikawa-lp-news .chiikawa-lp-section__icon {
    width: 720px;
    height: 128px;
  }

  .chiikawa-lp-goods .chiikawa-lp-section__icon {
    width: 720px;
    height: 112px;
  }

  .chiikawa-lp-sns .chiikawa-lp-section__icon {
    width: 720px;
    height: 111px;
  }

  .chiikawa-lp-access .chiikawa-lp-section__icon {
    width: 720px;
    height: 147px;
  }
}

/* SP版（767px以下）のセクションタイトル画像サイズ */
@media (max-width: 767px) {
  .chiikawa-lp-news .chiikawa-lp-section__icon {
    width: 355px;
    height: 73px;
  }

  .chiikawa-lp-goods .chiikawa-lp-section__icon {
    width: 355px;
    height: 70px;
  }

  .chiikawa-lp-sns .chiikawa-lp-section__icon {
    width: 355px;
    height: 74px;
  }

  .chiikawa-lp-access .chiikawa-lp-section__icon {
    width: 355px;
    height: 83px;
  }
}

/* ================================================================
   川越店 イントロセクションの行ごとアニメーション
   ================================================================ */

/* 行ごとのラッパー */
.chiikawa-lp-intro__line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* アニメーション実行後 */
.chiikawa-lp-intro__line.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   川越店 Instagram Feed ボタンの色設定
   ================================================================ */

#sbi_load > a,
#sbi_load > button,
.chiikawa-lp-sns #sbi_load a[href*="load-more"],
.chiikawa-lp-sns #sbi_load > a,
.chiikawa-lp-sns #sbi_load > button,
div[id="sbi_load"] > a,
div[id="sbi_load"] > button {
  color: var(--clp-color-text) !important; /* #5c3859 */
}

#sbi_load > span > a,
#sbi_load > span > button,
#sbi_load span a,
#sbi_load span button,
.chiikawa-lp-sns #sbi_load span a[href*="instagram.com"],
.chiikawa-lp-sns #sbi_load > span > a,
.chiikawa-lp-sns #sbi_load > span > button,
div[id="sbi_load"] > span > a,
div[id="sbi_load"] > span > button {
  background-color: var(--clp-color-bg-pink) !important; /* #f3e2ef */
  color: var(--clp-color-text) !important; /* #5c3859 */
}

#sbi_load > span > a:hover,
#sbi_load > span > button:hover,
#sbi_load span a:hover,
#sbi_load span button:hover,
.chiikawa-lp-sns #sbi_load span a[href*="instagram.com"]:hover,
.chiikawa-lp-sns #sbi_load > span > a:hover,
.chiikawa-lp-sns #sbi_load > span > button:hover,
div[id="sbi_load"] > span > a:hover,
div[id="sbi_load"] > span > button:hover {
  background-color: var(
    --clp-color-bg-pink
  ) !important; /* ホバー時も背景色を維持 */
  color: var(--clp-color-text) !important; /* ホバー時もテキスト色を維持 */
}