@charset "UTF-8";
/* =========================================================
   01-common-franchise.css
   独立加盟店用 共通CSS
========================================================= */

/* サイト名リンク横に独立加盟店ラベルを表示 */
html body .siteHeader_logo a,
html body .site-header-logo a,
html body .navbar-brand,
html body .site-title a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  text-decoration: none !important;
}

html body .siteHeader_logo a::after,
html body .site-header-logo a::after,
html body .navbar-brand::after,
html body .site-title a::after {
  content: "独立加盟店" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 3px 10px !important;
  border: 1px solid #C8D6AA !important;
  border-radius: 999px !important;
  background: #F3F7EE !important;
  color: #2F4635 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

@media screen and (max-width: 767px) {
  html body .siteHeader_logo a,
  html body .site-header-logo a,
  html body .navbar-brand,
  html body .site-title a {
    gap: 6px !important;
  }

  html body .siteHeader_logo a::after,
  html body .site-header-logo a::after,
  html body .navbar-brand::after,
  html body .site-title a::after {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }
}
/* =========================================================
   FRANCHISE BODY FIXED BADGE DISABLE
   body固定表示の独立加盟店バッジを無効化
   2026-07-02
========================================================= */

html body::before {
  content: none !important;
  display: none !important;
}
/* =========================================================
   TAKASU HEADER FONT MATCH YAGA
   ヘッダー・メニュー文字を矢賀寄りに調整
   2026-07-02
========================================================= */

html body .site-header,
html body .siteHeader,
html body header,
html body .site-header *,
html body .siteHeader *,
html body header * {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Yu Gothic Medium",
    "Meiryo",
    sans-serif !important;
}

/* サイト名 */
html body .site-header-logo,
html body .siteHeader_logo,
html body .navbar-brand,
html body .site-title,
html body .site-header-logo a,
html body .siteHeader_logo a,
html body .navbar-brand a,
html body .site-title a {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Yu Gothic Medium",
    "Meiryo",
    sans-serif !important;

  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* グローバルメニュー */
html body .global-nav a,
html body .globalNav a,
html body .vk-menu-acc a,
html body .gMenu a,
html body .site-header nav a,
html body .siteHeader nav a {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Yu Gothic Medium",
    "Meiryo",
    sans-serif !important;

  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* 独立加盟店バッジ */
html body .site-header-logo::after,
html body .siteHeader_logo::after,
html body .navbar-brand::after,
html body .site-title::after,
html body .site-header-logo a::after,
html body .siteHeader_logo a::after,
html body .navbar-brand a::after,
html body .site-title a::after {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Yu Gothic Medium",
    "Meiryo",
    sans-serif !important;

  font-weight: 700 !important;
}
/* =========================================================
   TAKASU HEADER MENU COMPACT
   ヘッダー文字間・メニュー余白を矢賀寄りに調整
   2026-07-02
========================================================= */

/* サイト名：少し文字間を詰める */
html body .site-header-logo,
html body .siteHeader_logo,
html body .navbar-brand,
html body .site-title,
html body .site-header-logo a,
html body .siteHeader_logo a,
html body .navbar-brand a,
html body .site-title a {
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

/* PCメニュー：左右余白を少し詰める */
@media screen and (min-width: 768px) {
  html body .global-nav a,
  html body .globalNav a,
  html body .gMenu a,
  html body .site-header nav a,
  html body .siteHeader nav a,
  html body .vk-menu-acc a {
    padding-left: 11px !important;
    padding-right: 11px !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* メニュー同士の間隔がgap指定の場合の保険 */
  html body .global-nav,
  html body .globalNav,
  html body .gMenu,
  html body .site-header nav ul,
  html body .siteHeader nav ul {
    gap: 0 !important;
  }
}

/* 独立加盟店バッジ：矢賀寄りに少しコンパクト */
html body .site-header-logo::after,
html body .siteHeader_logo::after,
html body .navbar-brand::after,
html body .site-title::after,
html body .site-header-logo a::after,
html body .siteHeader_logo a::after,
html body .navbar-brand a::after,
html body .site-title a::after {
  letter-spacing: 0 !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
}

/* =========================================================
   TAKARAZUKA HEADER FINAL CLEAN
   宝塚スタジオ：ヘッダー・独立加盟店表示・体験予約ボタン・スクロール時メニュー整理
   2026-07-05
========================================================= */

/* ---------------------------------------------------------
   1. ロゴ横・サイト名横の疑似バッジは使わない
--------------------------------------------------------- */

html body .siteHeader_logo::after,
html body .site-header-logo::after,
html body .navbar-brand::after,
html body .site-title::after,
html body .siteHeader_logo a::after,
html body .site-header-logo a::after,
html body .navbar-brand a::after,
html body .site-title a::after {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   2. PC通常時：上段ロゴ名を消し、メニュー列に
      「スタジオ名 → 独立加盟店 → メニュー」を表示
--------------------------------------------------------- */

@media screen and (min-width: 768px) {

  /* 上段に出る大きなサイト名・ロゴ名を非表示 */
  html body .siteHeader_logo,
  html body .site-header-logo,
  html body .site-title,
  html body .navbar-brand {
    display: none !important;
  }

  html body .siteHeader,
  html body .site-header,
  html body header.siteHeader,
  html body header.site-header {
    padding-top: 0 !important;
  }

  /* メニュー外枠 */
  html body #gMenu_outer,
  html body .gMenu_outer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    min-height: 66px !important;
    box-sizing: border-box !important;
  }

  /* スタジオ名 */
  html body #gMenu_outer::before,
  html body .gMenu_outer::before {
    content: "イルチブレインヨガ宝塚スタジオ" !important;
    order: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;

    margin-right: 10px !important;
    padding-right: 0 !important;

    color: #1F2E2A !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* 独立加盟店バッジ */
  html body #gMenu_outer::after,
  html body .gMenu_outer::after {
    content: "独立加盟店" !important;
    order: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;

    margin-right: 24px !important;
    padding: 4px 10px !important;

    border: 1px solid #C8D6AA !important;
    border-radius: 999px !important;
    background: #F3F7EE !important;
    color: #2F4635 !important;

    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* メニュー本体 */
  html body #gMenu_outer > *,
  html body .gMenu_outer > *,
  html body #gMenu_outer .gMenu,
  html body .gMenu_outer .gMenu,
  html body #gMenu_outer ul,
  html body .gMenu_outer ul {
    order: 3 !important;
  }

  html body #gMenu_outer .gMenu,
  html body .gMenu_outer .gMenu {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }

  html body .global-nav,
  html body .globalNav,
  html body .gMenu,
  html body .site-header nav ul,
  html body .siteHeader nav ul {
    gap: 0 !important;
  }

  html body .global-nav a,
  html body .globalNav a,
  html body .gMenu a,
  html body .site-header nav a,
  html body .siteHeader nav a,
  html body .vk-menu-acc a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
}

/* ---------------------------------------------------------
   3. 体験予約メニューをボタン化
--------------------------------------------------------- */

html body .site-header nav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
html body .siteHeader nav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
html body .global-nav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
html body .globalNav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
html body .gMenu a[href*="reserve.ilchibrainyoga.com/takarazuka"],
html body .vk-menu-acc a[href*="reserve.ilchibrainyoga.com/takarazuka"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 36px !important;
  margin-left: 6px !important;
  padding: 8px 16px !important;

  border-radius: 999px !important;
  background: #7A8F55 !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(47, 70, 53, 0.18) !important;
}

html body .site-header nav a[href*="reserve.ilchibrainyoga.com/takarazuka"]:hover,
html body .siteHeader nav a[href*="reserve.ilchibrainyoga.com/takarazuka"]:hover,
html body .global-nav a[href*="reserve.ilchibrainyoga.com/takarazuka"]:hover,
html body .globalNav a[href*="reserve.ilchibrainyoga.com/takarazuka"]:hover,
html body .gMenu a[href*="reserve.ilchibrainyoga.com/takarazuka"]:hover,
html body .vk-menu-acc a[href*="reserve.ilchibrainyoga.com/takarazuka"]:hover {
  background: #667844 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ---------------------------------------------------------
   4. スクロール時・固定ヘッダー時
      スタジオ名と独立加盟店バッジを消し、
      HOME〜体験のご予約だけを投稿/固定ページ幅に統一
--------------------------------------------------------- */

@media screen and (min-width: 768px) {

  /* スクロール時：疑似スタジオ名・疑似バッジを非表示 */
  html body.header_scrolled #gMenu_outer::before,
  html body.header_scrolled #gMenu_outer::after,
  html body.header_scrolled .gMenu_outer::before,
  html body.header_scrolled .gMenu_outer::after,
  html body.scrolled #gMenu_outer::before,
  html body.scrolled #gMenu_outer::after,
  html body.scrolled .gMenu_outer::before,
  html body.scrolled .gMenu_outer::after,
  html body .siteHeader.header_scrolled #gMenu_outer::before,
  html body .siteHeader.header_scrolled #gMenu_outer::after,
  html body .siteHeader.header_scrolled .gMenu_outer::before,
  html body .siteHeader.header_scrolled .gMenu_outer::after,
  html body .siteHeader.is-fixed #gMenu_outer::before,
  html body .siteHeader.is-fixed #gMenu_outer::after,
  html body .siteHeader.is-fixed .gMenu_outer::before,
  html body .siteHeader.is-fixed .gMenu_outer::after,
  html body .siteHeader.is-sticky #gMenu_outer::before,
  html body .siteHeader.is-sticky #gMenu_outer::after,
  html body .siteHeader.is-sticky .gMenu_outer::before,
  html body .siteHeader.is-sticky .gMenu_outer::after,
  html body .siteHeader.fixed #gMenu_outer::before,
  html body .siteHeader.fixed #gMenu_outer::after,
  html body .siteHeader.fixed .gMenu_outer::before,
  html body .siteHeader.fixed .gMenu_outer::after,
  html body .siteHeader.sticky #gMenu_outer::before,
  html body .siteHeader.sticky #gMenu_outer::after,
  html body .siteHeader.sticky .gMenu_outer::before,
  html body .siteHeader.sticky .gMenu_outer::after {
    content: none !important;
    display: none !important;
  }

  /* スクロール時：外枠を投稿/固定ページ幅へ */
  html body.header_scrolled #gMenu_outer,
  html body.header_scrolled .gMenu_outer,
  html body.scrolled #gMenu_outer,
  html body.scrolled .gMenu_outer,
  html body .siteHeader.header_scrolled #gMenu_outer,
  html body .siteHeader.header_scrolled .gMenu_outer,
  html body .siteHeader.is-fixed #gMenu_outer,
  html body .siteHeader.is-fixed .gMenu_outer,
  html body .siteHeader.is-sticky #gMenu_outer,
  html body .siteHeader.is-sticky .gMenu_outer,
  html body .siteHeader.fixed #gMenu_outer,
  html body .siteHeader.fixed .gMenu_outer,
  html body .siteHeader.sticky #gMenu_outer,
  html body .siteHeader.sticky .gMenu_outer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* スクロール時：メニュー本体 */
  html body.header_scrolled #gMenu_outer .gMenu,
  html body.header_scrolled .gMenu_outer .gMenu,
  html body.scrolled #gMenu_outer .gMenu,
  html body.scrolled .gMenu_outer .gMenu,
  html body .siteHeader.header_scrolled #gMenu_outer .gMenu,
  html body .siteHeader.header_scrolled .gMenu_outer .gMenu,
  html body .siteHeader.is-fixed #gMenu_outer .gMenu,
  html body .siteHeader.is-fixed .gMenu_outer .gMenu,
  html body .siteHeader.is-sticky #gMenu_outer .gMenu,
  html body .siteHeader.is-sticky .gMenu_outer .gMenu,
  html body .siteHeader.fixed #gMenu_outer .gMenu,
  html body .siteHeader.fixed .gMenu_outer .gMenu,
  html body .siteHeader.sticky #gMenu_outer .gMenu,
  html body .siteHeader.sticky .gMenu_outer .gMenu {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* スクロール時：ulを幅内で均等配置 */
  html body.header_scrolled #gMenu_outer .gMenu > ul,
  html body.header_scrolled .gMenu_outer .gMenu > ul,
  html body.scrolled #gMenu_outer .gMenu > ul,
  html body.scrolled .gMenu_outer .gMenu > ul,
  html body .siteHeader.header_scrolled #gMenu_outer .gMenu > ul,
  html body .siteHeader.header_scrolled .gMenu_outer .gMenu > ul,
  html body .siteHeader.is-fixed #gMenu_outer .gMenu > ul,
  html body .siteHeader.is-fixed .gMenu_outer .gMenu > ul,
  html body .siteHeader.is-sticky #gMenu_outer .gMenu > ul,
  html body .siteHeader.is-sticky .gMenu_outer .gMenu > ul,
  html body .siteHeader.fixed #gMenu_outer .gMenu > ul,
  html body .siteHeader.fixed .gMenu_outer .gMenu > ul,
  html body .siteHeader.sticky #gMenu_outer .gMenu > ul,
  html body .siteHeader.sticky .gMenu_outer .gMenu > ul {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.header_scrolled #gMenu_outer .gMenu > ul > li,
  html body.header_scrolled .gMenu_outer .gMenu > ul > li,
  html body.scrolled #gMenu_outer .gMenu > ul > li,
  html body.scrolled .gMenu_outer .gMenu > ul > li,
  html body .siteHeader.header_scrolled #gMenu_outer .gMenu > ul > li,
  html body .siteHeader.header_scrolled .gMenu_outer .gMenu > ul > li,
  html body .siteHeader.is-fixed #gMenu_outer .gMenu > ul > li,
  html body .siteHeader.is-fixed .gMenu_outer .gMenu > ul > li,
  html body .siteHeader.is-sticky #gMenu_outer .gMenu > ul > li,
  html body .siteHeader.is-sticky .gMenu_outer .gMenu > ul > li,
  html body .siteHeader.fixed #gMenu_outer .gMenu > ul > li,
  html body .siteHeader.fixed .gMenu_outer .gMenu > ul > li,
  html body .siteHeader.sticky #gMenu_outer .gMenu > ul > li,
  html body .siteHeader.sticky .gMenu_outer .gMenu > ul > li {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  html body.header_scrolled #gMenu_outer .gMenu > ul > li > a,
  html body.header_scrolled .gMenu_outer .gMenu > ul > li > a,
  html body.scrolled #gMenu_outer .gMenu > ul > li > a,
  html body.scrolled .gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.header_scrolled #gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.header_scrolled .gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.is-fixed #gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.is-fixed .gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.is-sticky #gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.is-sticky .gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.fixed #gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.fixed .gMenu_outer .gMenu > ul > li > a,
  html body .siteHeader.sticky #gMenu_outer .gMenu > ul > li > a {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------
   5. スマホ：疑似スタジオ名は出さない
--------------------------------------------------------- */

@media screen and (max-width: 767px) {

  html body #gMenu_outer::before,
  html body #gMenu_outer::after,
  html body .gMenu_outer::before,
  html body .gMenu_outer::after {
    content: none !important;
    display: none !important;
  }

  html body .site-header nav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
  html body .siteHeader nav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
  html body .global-nav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
  html body .globalNav a[href*="reserve.ilchibrainyoga.com/takarazuka"],
  html body .gMenu a[href*="reserve.ilchibrainyoga.com/takarazuka"],
  html body .vk-menu-acc a[href*="reserve.ilchibrainyoga.com/takarazuka"] {
    margin-left: 0 !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
  }
}