@charset "UTF-8";
/* =========================================
   PuPu COLLECTION - 共通スタイル v2.0
   カラーシステム / ベース / ヘッダー / フッター
   ========================================= */

/* =========================================
   CSS カスタムプロパティ（カラーシステム）
   ========================================= */
:root {
  /* --- ベースカラー（明るく爽やかなライト基調） --- */
  --c-bg:            #FAFAF8;   /* ウォームホワイト */
  --c-bg-2:          #F0F7F6;   /* 極薄ミントティント（交互セクション） */
  --c-bg-card:       #ffffff;   /* カード */
  --c-bg-light:      #ffffff;   /* 最も明るい背景 */
  --c-bg-card-light: #ffffff;   /* ライトセクション内カード */
  --c-text:          #2A2520;   /* ソフトダークブラウン */
  --c-text-muted:    rgba(42, 37, 32, 0.62);   /* 控えめテキスト */
  --c-text-on-light:       #2A2520;              /* ＝ --c-text と統一 */
  --c-text-muted-on-light: rgba(42, 37, 32, 0.58);
  --c-border:        rgba(42, 37, 32, 0.10);    /* ソフトボーダー */
  --c-border-light:  rgba(42, 37, 32, 0.08);    /* 軽いボーダー */
  --c-overlay:       rgba(10, 10, 10, 0.45);    /* ヒーロー用オーバーレイ */

  /* --- グローバルアクセント（デュアルトーン：ティファニーブルー × グリーン） --- */
  --c-accent:            #5bbfb7;          /* ティール（ライト背景で映える濃度） */
  --c-accent-hover:      #4aada5;          /* ホバー */
  --c-accent-on-light:   #00704A;          /* グリーン（CTA・ラベル用） */
  --c-accent-on-light-h: #005c3d;          /* グリーンホバー */
  --c-accent-mid:        #3a9e8a;          /* ブレンドティール */
  --c-accent-soft:       rgba(129, 216, 208, 0.12); /* 極薄ティファニー背景 */
  --c-gold:              #c8a882;          /* 旧ゴールド（退避・限定利用） */

  /* --- 芝公園店：ティファニーブルー --- */
  --c-shiba:         #81D8D0;
  --c-shiba-dark:    #5bbfb7;
  --c-shiba-light:   #b3ece8;
  --c-shiba-bg:      rgba(129, 216, 208, 0.08);

  /* --- 自由が丘店：スターバックスグリーン --- */
  --c-jiyugaoka:        #00704A;          /* メイングリーン */
  --c-jiyugaoka-dark:   #1E3932;          /* ダークフォレスト */
  --c-jiyugaoka-light:  #D4E9E2;          /* セージ（薄緑） */
  --c-jiyugaoka-brown:  #CBA258;          /* ゴールドブラウン */
  --c-jiyugaoka-cream:  #F5F0E8;          /* ウォームクリーム */
  --c-jiyugaoka-bg:     rgba(0,112,74,0.07);

  /* --- タイポグラフィ --- */
  --font-base:   'Noto Sans JP', sans-serif;
  --font-serif:  'Noto Sans JP', sans-serif;
  --font-sans:   var(--font-base);
  --font-g:      var(--font-base);

  /* --- レイアウト --- */
  --max-width:     1160px;
  --header-h:      80px;
  --header-h-mb:   64px;
  --sp-section:    clamp(48px, 6vw, 80px);
  --sp-content:    clamp(24px, 4vw, 56px);
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-pill:   50px;

  /* --- トランジション --- */
  --ease:        all 0.3s ease;
  --ease-slow:   all 0.6s ease;
}

/* 芝公園店ページ：アクセントカラーを上書き */
body.store-shiba {
  --c-store:       var(--c-shiba);
  --c-store-dark:  var(--c-shiba-dark);
  --c-store-light: var(--c-shiba-light);
  --c-store-bg:    var(--c-shiba-bg);
}

/* 自由が丘店ページ：アクセントカラーを上書き */
body.store-jiyugaoka {
  --c-store:       var(--c-jiyugaoka);
  --c-store-dark:  var(--c-jiyugaoka-dark);
  --c-store-light: var(--c-jiyugaoka-light);
  --c-store-bg:    var(--c-jiyugaoka-bg);
}


/* =========================================
   ベース
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth は GSAP ScrollTrigger と干渉するため無効化 */
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open,
body.lb-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--ease);
}

/* reCAPTCHA バッジ非表示 */
.grecaptcha-badge {
  visibility: hidden;
}


/* =========================================
   ロゴイントロ（ページロード時アニメーション）
   ========================================= */
#site-intro {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

#site-intro.is-done {
  display: none;
}

/* GSAPがtransformを制御するため、CSSアニメーションは使わない */
.intro-logo {
  position: relative;
  z-index: 2;
}

.intro-logo img {
  width: clamp(120px, 17vw, 170px);
  height: auto;
  display: block;
}

/* 動画リビールレイヤー：clip-pathでロゴ中央から開花 */
.intro-video-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: circle(0% at 50% 50%);
}

.intro-video-reveal video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================
   ヘッダー
   ========================================= */
.js-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
  /* 初期状態：白背景 */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(42, 37, 32, 0.06);
}

/* スクロール後：フロストホワイト */
.js-header.change-color {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(42, 37, 32, 0.08);
}

/* 全ページ：透明ヘッダーも白で統一 */
.js-header.has-transparent-header {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(42, 37, 32, 0.06) !important;
}

/* 全ページ：スクロール後はフロストホワイト */
.js-header.has-transparent-header.change-color {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 rgba(42, 37, 32, 0.08) !important;
}


/* ロゴ */
.hdLogo a {
  display: block;
}

.hdLogo img {
  height: 38px;
  width: auto;
}

/* ---- PC ナビ ---- */
#pcHeader {
  display: flex;
  align-items: center;
}

#pcHeader > ul {
  display: flex;
  align-items: stretch;
  gap: 4px;
  list-style: none;
  height: var(--header-h) !important;
}

.navMenu > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  color: var(--c-text);
  opacity: 1;
  position: relative;
  white-space: nowrap;
  transition: color 0.25s;
  text-shadow: none;
}

.navMenu > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background: var(--c-accent-on-light);
  transition: width 0.3s ease;
}

.navMenu > a:hover {
  color: var(--c-accent-on-light);
}

.navMenu > a:hover::after {
  width: 60%;
}

.navMenu > a .en {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.navMenu > a .ja {
  font-size: 0.62rem;
  color: var(--c-text-muted);
  margin-top: 2px;
  letter-spacing: 0.06em;
}

/* Services など親リンクなしの場合 */
.navMenu > .navMenu__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  position: relative;
  color: var(--c-text);
  opacity: 1;
  cursor: default;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: none;
}

.navMenu > .navMenu__label .en {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.navMenu > .navMenu__label .ja {
  font-size: 0.58rem;
  opacity: 0.92;
  margin-top: 2px;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-transform: none;
}

/* 親テーマのホバー下線（bottom:-12px）を無効化 */
li.navMenu::after { display: none !important; }

/* スクロール後：ナビ文字をダークに（フロストホワイトヘッダー上） */
.js-header.change-color .navMenu > a {
  color: var(--c-text);
  text-shadow: none;
}

.js-header.change-color .navMenu > a .ja {
  color: var(--c-text-muted);
}

.js-header.change-color .navMenu > a:hover {
  color: var(--c-accent-on-light);
}

.js-header.change-color .navMenu > a::after {
  background: var(--c-accent-on-light);
}

.js-header.change-color .navMenu > .navMenu__label {
  color: var(--c-text);
  text-shadow: none;
}

.js-header.change-color .navMenu > .navMenu__label .ja {
  color: var(--c-text-muted);
}

.js-header.change-color .toggle span {
  background: var(--c-text);
}

/* ドロップダウン — 表示制御はJSに一任 */
.has-dropdown {
  position: static !important;  /* containing block から外す */
}

.dropdown {
  position: fixed !important;
  top: 0;   /* JS で headerH + 4px に上書きされる */
  left: 0;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(42, 37, 32, 0.08);
  border-top: 2px solid var(--c-accent-mid);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 10px 0;
  list-style: none;
  display: flex !important;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  z-index: 9999 !important;
  transition: opacity 0.2s ease, visibility 0.2s;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.dropdown li a {
  display: block;
  padding: 11px 20px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.dropdown li a:hover {
  background: rgba(42, 37, 32, 0.04);
  color: var(--c-accent-on-light);
}

/* NEW バッジ（自由が丘店） */
.badge-new {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  background: var(--c-jiyugaoka);
  color: #fff;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.06em;
}

/* ヘッダーSNSリンク */
.hdSns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  list-style: none;
}

.hdSns__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 0.92rem;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.hdSns__link:hover {
  color: var(--c-accent-on-light);
  border-color: var(--c-accent-on-light);
}

/* ご予約ボタン（<li>から独立した<a>要素） */
.contactMenu__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-on-light) 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  margin-left: 16px;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 112, 74, 0.15);
  transition: var(--ease);
}

.contactMenu__btn:hover {
  background: linear-gradient(135deg, var(--c-accent-hover) 0%, var(--c-accent-on-light-h) 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0, 112, 74, 0.22);
}


/* ---- ハンバーガーボタン ---- */
.toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
  position: relative;
}

.toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-text);
  transition: transform 0.35s ease, opacity 0.2s ease, width 0.3s ease;
  transform-origin: center;
}

/* X アニメーション */
.toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.toggle.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ---- モバイル ナビ オーバーレイ ---- */
#global_navi {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  background: #ffffff;
  z-index: 900;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  padding: calc(var(--header-h-mb) + 24px) 28px 48px;
}

#global_navi.is-open {
  transform: translateX(0);
}

/* モバイルナビ：内部 */
.mb-nav__inner {
  max-width: 400px;
  margin: 0 auto;
}

.mb-nav__section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mb-nav__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
}

.mb-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mb-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1614;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: color 0.2s;
}

.mb-nav__link:last-child {
  border-bottom: none;
}

.mb-nav__link i {
  width: 20px;
  text-align: center;
  color: var(--c-accent-on-light);
  font-size: 0.85rem;
}

.mb-nav__link:hover {
  color: var(--c-accent-on-light);
}

/* 電話リンク */
.mb-nav__link--tel {
  color: #1a1614;
}

.mb-nav__link--tel i {
  color: var(--c-accent-on-light);
}

/* 予約CTA */
.mb-nav__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.mb-nav__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  transition: opacity 0.25s;
}

.mb-nav__cta-btn:hover {
  opacity: 0.85;
}

.mb-nav__cta-btn--shiba {
  background: #81d8d0;
  color: #0a2e2d;
}

.mb-nav__cta-btn--jiyugaoka {
  background: #00704a;
  color: #ffffff;
}

/* ×ボタン（白背景用） */
#global_navi.is-open ~ .toggle span {
  background: #1a1614;
}


/* =========================================
   ヘッダー背景切替トリガー
   ========================================= */
.hdChangTrigger {
  height: 0;
}


/* =========================================
   フッター
   ========================================= */
.site-footer {
  /* フッター専用カラー：ディープティール基調 */
  --c-text:       #e8f6f4;
  --c-text-muted: rgba(232, 246, 244, 0.72);
  --c-border:     rgba(255, 255, 255, 0.12);
  background: linear-gradient(175deg, #1a5c56 0%, #0f3d38 100%);
  border-top: none;
  padding: 64px 0 32px;
  color: var(--c-text-muted);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--c-text-muted);
}

.site-footer a:hover {
  color: #ffffff;
}

/* 芝公園店：ティファニーブルー系フッター */
body.store-shiba .site-footer {
  --c-text:       #0a2e2d;
  --c-text-muted: rgba(10, 46, 45, 0.75);
  --c-border:     rgba(10, 46, 45, 0.15);
  background: linear-gradient(175deg, #81d8d0 0%, #5cb8b0 100%);
}

body.store-shiba .site-footer,
body.store-shiba .site-footer a {
  color: rgba(10, 46, 45, 0.75);
}

body.store-shiba .site-footer a:hover {
  color: #0a2e2d;
}

body.store-shiba .site-footer h3,
body.store-shiba .site-footer .ft-sitemap h3 {
  color: #0a2e2d;
}

/* 店舗ページ以外：フッター白背景 */
body:not(.store-shiba):not(.store-jiyugaoka) .site-footer {
  --c-text:       #1a1614;
  --c-text-muted: rgba(26, 22, 20, 0.65);
  --c-border:     rgba(26, 22, 20, 0.12);
  background: #f8f8f8;
  border-top: 1px solid rgba(26, 22, 20, 0.08);
  color: var(--c-text-muted);
}

body:not(.store-shiba):not(.store-jiyugaoka) .site-footer a {
  color: var(--c-text-muted);
}

body:not(.store-shiba):not(.store-jiyugaoka) .site-footer a:hover {
  color: #1a1614;
}

.ft-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* フッター：ロゴ */
.ft-logo img {
  height: 72px;
  width: auto;
  margin-bottom: 40px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.ft-logo:hover img {
  opacity: 1;
}

/* フッター：メインコンテンツグリッド */
.ft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

/* フッター：店舗コンテナ（縦並び） */
.ft-stores {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* フッター：店舗情報 */
.ft-store h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}

.ft-store h3 .jp {
  font-size: 0.62rem;
  opacity: 0.5;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-left: 8px;
  text-transform: none;
}

.ft-store address {
  font-style: normal;
  line-height: 1.9;
  margin-bottom: 12px;
}

.ft-store .store-hours {
  line-height: 1.8;
  margin-bottom: 16px;
  color: var(--c-text-muted);
}

/* 店舗カラーアクセント */
.ft-store.ft-store--shiba h3 {
  border-bottom-color: var(--c-shiba-light);
}

.ft-store.ft-store--jiyugaoka h3 {
  border-bottom-color: var(--c-jiyugaoka-light);
}

/* 白背景フッター時：店舗カラーの左ボーダー */
body:not(.store-shiba):not(.store-jiyugaoka) .ft-store.ft-store--shiba {
  border-left: 3px solid #81d8d0;
  padding-left: 20px;
}

body:not(.store-shiba):not(.store-jiyugaoka) .ft-store.ft-store--jiyugaoka {
  border-left: 3px solid #00704a;
  padding-left: 20px;
}

body:not(.store-shiba):not(.store-jiyugaoka) .ft-store.ft-store--shiba h3 {
  color: #81d8d0;
}

body:not(.store-shiba):not(.store-jiyugaoka) .ft-store.ft-store--jiyugaoka h3 {
  color: #00704a;
}

/* Coming Soon バッジ */
.ft-store .badge-soon {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid var(--c-jiyugaoka-light);
  color: var(--c-jiyugaoka-light);
  border-radius: 2px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* フッター：サイトマップ */
.ft-sitemap h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}

.ft-sitemap__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ft-sitemap__col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ft-sitemap__item {
  line-height: 1;
}

.ft-sitemap__item a,
.ft-sitemap__item span {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 7px 0;
  color: var(--c-text-muted);
  transition: color 0.2s;
}

.ft-sitemap__item a:hover {
  color: var(--c-text);
}

/* 親項目 */
.ft-sitemap__item--parent > a,
.ft-sitemap__item--parent > span {
  color: var(--c-text);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

/* 子項目（インデント） */
.ft-sitemap__item--child > a {
  padding-left: 14px;
  position: relative;
}

.ft-sitemap__item--child > a::before {
  content: '—';
  position: absolute;
  left: 0;
  font-size: 0.6rem;
  opacity: 0.4;
  top: 50%;
  transform: translateY(-50%);
}

/* ご予約CTAリンク */
.ft-sitemap__item--reserve {
  margin-top: 12px;
}

.ft-sitemap__item--reserve > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid var(--c-shiba-light);
  border-radius: var(--radius-pill);
  color: var(--c-shiba-light) !important;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.2s, color 0.2s;
}

.ft-sitemap__item--reserve > a:hover {
  background: var(--c-shiba-light);
  color: #0f3d38 !important;
}

/* フッター：SNS */
.ft-sns {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.ft-sns a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  transition: border-color 0.2s, color 0.2s;
}

.ft-sns a:hover {
  border-color: var(--c-shiba-light);
  color: #ffffff;
}

.ft-sns svg,
.ft-sns i {
  font-size: 0.9rem;
}

/* SP: フッターSNS・予約ボタンをアイコン中心に */
@media (max-width: 599px) {
  .ft-sns {
    gap: 8px;
  }

  .ft-sns a,
  .ft-reserve-btn {
    padding: 8px 12px;
    font-size: 0.65rem;
    gap: 4px;
  }

  .ft-sns__text {
    display: none;
  }

  .ft-sns svg,
  .ft-sns i {
    font-size: 1.1rem;
  }
}

/* フッター：予約ボタン */
.ft-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

.ft-reserve-btn--shiba {
  background: transparent;
  border: 1px solid #81d8d0;
  color: #81d8d0;
}

.ft-reserve-btn--shiba:hover {
  background: #6bc4bc;
  color: #fff;
  box-shadow: 0 4px 12px rgba(129, 216, 208, 0.4);
}

.ft-reserve-btn--jiyugaoka {
  background: transparent;
  border: 1px solid #00704a;
  color: #00704a;
}

.ft-reserve-btn--jiyugaoka:hover {
  background: #005a3b;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 112, 74, 0.4);
}

/* フッター：コピーライト */
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
  gap: 12px;
}

.ft-bottom small {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.ft-legal {
  display: flex;
  gap: 16px;
}

.ft-legal a {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}


/* =========================================
   共通：セクションヘッダー / ラベル
   ========================================= */
.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent-on-light);
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--c-text);
  line-height: 1.55;
  margin-bottom: 0;
}

/* セクションタイトル下の肉球アクセント */
.section-header::after {
  content: '\f1b0';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: block;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--c-accent);
  opacity: 0.5;
  letter-spacing: 0.3em;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}


/* =========================================
   ヒーローテキスト text-shadow（オーバーレイ無効化対応）
   ========================================= */
.about-hero__content,
.sd-hero__content,
.sv-hero__content,
.sl-hero__content,
.gl-hero__content,
.info-hero__content,
.faq-hero__content,
.review-hero__content,
.rv-hero__content,
.teaser-hero__content {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.35);
}


/* =========================================
   ユーティリティ
   ========================================= */

/* コンテンツ幅 */
.conWrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* リンクボタン */
.linkBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-on-light) 100%);
  border: none;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(0, 112, 74, 0.18);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.linkBtn:hover {
  background: linear-gradient(135deg, var(--c-accent-hover) 0%, var(--c-accent-on-light-h) 100%);
  color: #ffffff;
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 112, 74, 0.25);
}


/* =========================================
   芝公園店：ヘッダー / ナビ テーマ
   ========================================= */

/* 通常時：芝公園カラー */
body.store-shiba .js-header {
  background: rgba(129, 216, 208, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10) !important;
}

/* スクロール後：白 */
body.store-shiba .js-header.change-color {
  background: rgba(252, 243, 208, 0.90) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(129, 216, 208, 0.35) !important;
}

/* ナビ：通常時はダークティール（予約ボタンと同色） */
body.store-shiba .navMenu > a {
  color: #1e5e59 !important;
  text-shadow: none !important;
}

body.store-shiba .navMenu > a .ja {
  color: rgba(30, 94, 89, 0.60) !important;
}

body.store-shiba .navMenu > a:hover {
  color: #0a2e2d !important;
}

body.store-shiba .navMenu > a::after {
  background: #1e5e59;
}

/* スクロール後：ナビ文字をダークティールに */
body.store-shiba .js-header.change-color .navMenu > a {
  color: #1e5e59 !important;
  text-shadow: none !important;
}

body.store-shiba .js-header.change-color .navMenu > a .ja {
  color: rgba(30, 94, 89, 0.60) !important;
}

body.store-shiba .js-header.change-color .navMenu > a:hover {
  color: var(--c-shiba-dark) !important;
}

body.store-shiba .js-header.change-color .navMenu > a::after {
  background: var(--c-shiba-dark);
}

/* ご予約ボタン：通常時は白 */
body.store-shiba .contactMenu__btn {
  background: #ffffff !important;
  color: #1e5e59 !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
}

body.store-shiba .contactMenu__btn:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1e5e59 !important;
}

/* スクロール後：予約ボタンをティファニーブルーに */
body.store-shiba .js-header.change-color .contactMenu__btn {
  background: #81d8d0 !important;
  color: #1e5e59 !important;
  border-color: #81d8d0 !important;
  box-shadow: 0 3px 12px rgba(129, 216, 208, 0.3) !important;
}

body.store-shiba .js-header.change-color .contactMenu__btn:hover {
  background: #6bc4bc !important;
  color: #1e5e59 !important;
}

/* ハンバーガー */
body.store-shiba .toggle span {
  background: #ffffff;
}

body.store-shiba .js-header.change-color .toggle span {
  background: #1e5e59;
}

/* スクロール後：SNSアイコンを白に */
body.store-shiba .js-header.change-color .hdSns__link {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body.store-shiba .js-header.change-color .hdSns__link:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
}


/* =========================================
   自由が丘店：ヘッダー / ナビ テーマ
   （全テンプレート共通 — store.css の複製を含む）
   ========================================= */

/* 通常時：自由が丘カラー */
body.store-jiyugaoka .js-header {
  background: rgba(0, 112, 74, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10) !important;
}

/* スクロール後：ブラウン */
body.store-jiyugaoka .js-header.change-color {
  background: rgba(156, 184, 154, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10) !important;
}

/* ナビ：通常時は白（自由が丘カラー背景のため） */
body.store-jiyugaoka .navMenu > a {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: none !important;
}

body.store-jiyugaoka .navMenu > a .ja {
  color: rgba(255, 255, 255, 0.60) !important;
}

body.store-jiyugaoka .navMenu > a:hover {
  color: #ffffff !important;
}

body.store-jiyugaoka .navMenu > a::after {
  background: #ffffff;
}

/* スクロール後：ナビ文字をダークグリーンに */
body.store-jiyugaoka .js-header.change-color .navMenu > a {
  color: #1E3932 !important;
  text-shadow: none !important;
}

body.store-jiyugaoka .js-header.change-color .navMenu > a .ja {
  color: rgba(30, 57, 50, 0.55) !important;
}

body.store-jiyugaoka .js-header.change-color .navMenu > a:hover {
  color: #1E3932 !important;
  opacity: 0.7;
}

body.store-jiyugaoka .js-header.change-color .navMenu > a::after {
  background: #1E3932;
}

/* ご予約ボタン */
body.store-jiyugaoka .contactMenu__btn {
  background: #ffffff;
  color: var(--c-jiyugaoka-dark);
  border: 1.5px solid var(--c-jiyugaoka);
}

body.store-jiyugaoka .contactMenu__btn:hover {
  background: var(--c-jiyugaoka);
  color: #ffffff;
  border-color: var(--c-jiyugaoka);
}

/* スクロール後：白ボタン */
body.store-jiyugaoka .js-header.change-color .contactMenu__btn {
  background: #ffffff;
  color: #2d5438;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

body.store-jiyugaoka .js-header.change-color .contactMenu__btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-jiyugaoka-dark);
  border-color: #ffffff;
}

/* ハンバーガー */
body.store-jiyugaoka .toggle span {
  background: #ffffff;
}

body.store-jiyugaoka .js-header.change-color .toggle span {
  background: #ffffff;
}

/* スクロール後：SNSアイコンを白に */
body.store-jiyugaoka .js-header.change-color .hdSns__link {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body.store-jiyugaoka .js-header.change-color .hdSns__link:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
}


/* =========================================
   レスポンシブ
   =========================================
   PC      : 1025px〜
   Tablet  : 600px〜1024px
   Mobile  : 〜599px
   ========================================= */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .js-header {
    height: var(--header-h-mb);
    padding: 0 24px;
  }

  #pcHeader {
    display: none;
  }

  .toggle {
    display: flex;
    position: relative;
    right: auto;
    top: auto;
    width: 28px;
    height: 18px;
  }

  .toggle span {
    position: static;
    border-bottom: none;
    padding-top: 0;
    right: auto;
    width: 100%;
    height: 1.5px;
  }

  /* フッター：タブレットは1カラム */
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ft-sitemap__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Mobile ---- */
@media (max-width: 599px) {
  .conWrap {
    padding: 0 16px;
  }

  .ft-inner {
    padding: 0 16px;
  }

  /* フッター：モバイルは1カラム */
  .ft-grid {
    grid-template-columns: 1fr;
  }

  .ft-sitemap {
    grid-column: auto;
  }

  .ft-sitemap__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* SP: フッターロゴ中央寄せ */
  .ft-logo {
    display: block;
    text-align: center;
  }

  /* SP: CTAボタン・CTAコンテナを中央寄せ（全ページ共通） */
  .linkBtn {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }

  .sv-service__cta,
  .about-training__cta,
  .sa-cta__back,
  .sd-overview__body,
  .sd-flow__item,
  .sr-methods {
    text-align: center;
  }
}

/* ========================================
   Decorative Divider
   ======================================== */
.deco-divider {
    text-align: center;
    padding: 4px 0;
    line-height: 0;
    overflow: hidden;
}
.deco-divider img {
    max-width: 400px;
    width: 55%;
    opacity: 0.55;
    display: inline-block;
}
.deco-divider--white img {
    filter: brightness(0) invert(1);
    opacity: 0.35;
}
@media (max-width: 599px) {
    .deco-divider img {
        width: 75%;
    }
}


/* =========================================
   パンくずリスト
   ========================================= */
.breadcrumb {
    background: #f5f2ef;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 0;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 24px;
    max-width: 1200px;
    margin-inline: auto;
    font-size: 0.75rem;
    color: var(--c-text-muted-on-light);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: var(--c-text-muted-on-light);
    opacity: 0.5;
}

.breadcrumb__link {
    color: var(--c-text-muted-on-light);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb__link:hover {
    color: var(--c-accent);
}

.breadcrumb__item--current span {
    color: var(--c-text-on-light);
    font-weight: 600;
}

@media (max-width: 599px) {
    .breadcrumb__list {
        padding: 0 16px;
        font-size: 0.7rem;
    }
}


/* =========================================
   トップへ戻るボタン
   ========================================= */
.pagetop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
}

.pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pagetop__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pagetopBounce 1.8s ease-in-out infinite;
}

@keyframes pagetopBounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px) rotate(-6deg); }
  50%      { transform: translateY(0); }
  70%      { transform: translateY(-5px) rotate(3deg); }
}

.pagetop:hover .pagetop__img {
  animation: pagetopBounce 0.8s ease-in-out infinite;
}

@media (max-width: 599px) {
  .pagetop {
    right: 12px;
    bottom: 16px;
    width: 60px;
    height: 60px;
  }
}