@charset "UTF-8";

/* ================================================================
   ちいかわもぐもぐ本舗 ベビーカステラ カスタムCSS

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

:root {
  /* ベビーカステラ固有の色設定 */
  --clp-color-BCD4E4: #c69ab9; /* ベビーカステラプライマリカラー（紫/ピンク） */
  --clp-color-text: #93402f; /* ベビーカステラテキストカラー（濃い紫） */
  --clp-color-base: #f2c867; /* ベビーカステラベースカラー（薄い紫/ピンク） */
  --clp-color-base-light: #f2c867; /* ベース（明るい） */
  --clp-color-accent: #e49e6e; /* ベビーカステラアクセントカラー（ゴールド） */
  --clp-color-bg-pink: #fbeac6; /* ベビーカステラ背景ピンク（薄いピンク） */
  --clp-color-primary: #c77941;

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

  /* 背景画像パス（ベビーカステラ専用） */
  --clp-bg-repeat-pattern: url("../../castella/images/backgrounds/backgrounds-repeat-pattern.png");
}
.chiikawa-lp-castella #wrapper {
  background-size: 1147px auto;
}

.chiikawa-lp-page-nav__item--news {
  background-image: url("../images/navigation/nav-bubble-01.svg");
}

/* GOODS - 中程度の高さ */
.chiikawa-lp-page-nav__item--goods {
  background-image: url("../images/navigation/nav-bubble-02.svg");
}

/* SNS - やや高い */
.chiikawa-lp-page-nav__item--sns {
  background-image: url("../images/navigation/nav-bubble-03.svg");
}

/* ACCESS - 最も高い & 幅広 */
.chiikawa-lp-page-nav__item--access {
  background-image: url("../images/navigation/nav-bubble-04.svg");
}

/* ================================================================
   ベビーカステラ固有のスタイル調整
   ================================================================ */

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

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

/* 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: #93402f !important;
}

#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: #fbeac6 !important;
  color: #93402f !important;
}

#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: #fbeac6 !important; /* ホバー時も背景色を維持 */
  color: #93402f !important; /* ホバー時もテキスト色を維持 */
}

.chiikawa-lp-footer__link {
  color: white;
  border-color: white;
}
.chiikawa-lp-intro {
  max-width: 720px;
}
.chiikawa-lp-intro__heading {
  font-family: var(--clp-font-body);
  font-size: 30px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--clp-color-text);
}

.chiikawa-lp-button--map {
  padding-block: 12px;
}
.chiikawa-lp-top-area {
  padding-top: 60px;
}
.chiikawa-lp-hero__logo-container {
  width: 560px;
  margin-bottom: 0;
}
.chiikawa-lp-hero__logo-character {
  width: calc(299 / 560 * 100%);
}
.chiikawa-lp-intro__content {
  gap: 30px;
  padding-top: 50px;
}
.chiikawa-lp-hero__logo-text {
  margin-top: calc(36 / 560 * 100%);
  width: calc(394 / 560 * 100%);
}
.chiikawa-lp-news {
  padding-top: 80px;
  padding-bottom: 25px;
}
.chiikawa-lp-goods__slider {
  margin-bottom: 20px;
}
.chiikawa-lp-intro__decorations {
  margin-top: 28px;
  gap: 20px;
}
.chiikawa-lp-intro__main-img {
  width: 304px;
}
.chiikawa-lp-intro__decoration {
  max-width: 80px;
}
.chiikawa-lp-nav-section {
  margin-top: 50px;
  padding-bottom: 50px;
}
.chiikawa-lp-sns {
  padding-bottom: 70px;
}
.chiikawa-lp-sns-divider {
  margin-top: 0;
}
.chiikawa-lp-sns-divider__wave {
  margin-bottom: 80px;
  width: 100%;
  max-width: 100%;
  background-color: var(--clp-color-white);;
}

.chiikawa-lp-button--primary .chiikawa-lp-button__icon {
  color: white !important;
}
.chiikawa-lp-button--primary {
  transition: background-color 0.35s;
}
.chiikawa-lp-button--primary:hover {
  opacity: 1;
  background-color: var(--clp-color-primary);
}
.chiikawa-lp-goods__title {
  text-align: center;
}
.chiikawa-lp-hero {
  gap: 100px;
}
@media screen and (max-width: 1023px) {
  .chiikawa-lp-top-area {
    gap: 0;
  }
}
@media screen and (max-width: 767px) {
  .chiikawa-lp-hero {
    gap: 60px;
  }
  .chiikawa-lp-hero__logo-container {
    width: 300px;
  }
  .chiikawa-lp-hero__logo-character {
    width: calc(167 / 300 * 100%);
  }
  .chiikawa-lp-hero__logo-text {
    width: calc(219 / 300 * 100%);
  }
  .chiikawa-lp-intro__description {
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.03em;
  }
  .chiikawa-lp-top-area {
    padding-top: 40px;
    gap: 25px;
  }
  .chiikawa-lp-intro__decorations {
    margin-top: 18px;
  }
  .chiikawa-lp-intro__decoration {
    width: 60px;
  }
  .chiikawa-lp-intro__content {
    padding-top: 20px;
  }
  .chiikawa-lp-intro__heading {
    font-size: 20px;
    text-align: center;
    line-height: 1.7;
    letter-spacing: 0.05em;
  }
  .chiikawa-lp-intro__main-img {
    width: calc(210 / 345 * 100%);
  }

  .chiikawa-lp-nav-section {
    margin-top: 20px;
    gap: 45px;
    padding-bottom: 20px;
  }
  .chiikawa-lp-access__map {
    gap: 30px;
  }
  .chiikawa-lp-news {
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .chiikawa-lp-goods {
    padding-bottom: 20px;
  }

  .chiikawa-lp-news .chiikawa-lp-section__icon {
    height: 84px;
  }
  .chiikawa-lp-goods .chiikawa-lp-section__icon,
  .chiikawa-lp-sns .chiikawa-lp-section__icon {
    height: 83px;
    margin-right: 0;
  }
  .chiikawa-lp-access .chiikawa-lp-section__icon {
    height: auto;
  }
  .chiikawa-lp-sns {
    padding-bottom: 50px;
  }
  .chiikawa-lp-section__header {
    margin-bottom: 34px;
  }
  .chiikawa-lp-sns-divider__wave {
    margin-bottom: 50px;
  }
}