@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



/*
================================================================================
  latte-style.css
  らてめぃど SWELL Child — v0完全準拠スタイル
  配置場所: /wp-content/themes/swell-child/latte-style.css

  ■ クラス体系
    #latte-page   ← ページ全体スコープ（SWELLと干渉しない）
    .lp-*         ← このページ専用クラス
    .glass        ← v0の .glass ユーティリティ
    .glass-strong ← v0の .glass-strong ユーティリティ
    .btn-cute     ← v0の .btn-cute ユーティリティ
    .animate-bounce ← v0の animate-bounce

  ■ カラーパレット（v0 globals.css 準拠）
    --lp-primary    : oklch(0.65 0.15 210)  ≒ #5aa3cc
    --lp-accent     : oklch(0.88 0.08 210)  ≒ #b8d8e8
    --lp-bg         : oklch(0.97 0.015 210) ≒ #f0f7fb
    --lp-fg         : oklch(0.35 0.03 220)  ≒ #3d5060
    --lp-muted      : oklch(0.55 0.04 220)  ≒ #6e8899
================================================================================
*/

/* ============================================================
   0. SWELL 標準ヘッダー・フッターを非表示
      wp_head / wp_footer は生かす（SEO/OGP/GTMのため）
   ============================================================ */
body.page-template-page-latte .l-header,
body.page-template-page-latte .l-footer,
body.page-template-page-latte .l-fixedNav,
body.page-template-page-latte .c-fixedBtn,
body.page-template-page-latte #wpadminbar + .l-header { /* ログイン時も非表示 */
  display: none !important;
}

/* SWELLのコンテンツ幅制限・パディングをリセット */
body.page-template-page-latte .l-main,
body.page-template-page-latte .c-contentArea,
body.page-template-page-latte .l-content,
body.page-template-page-latte .wp-site-blocks {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ページ自体を100vw展開 */
body.page-template-page-latte {
  overflow-x: hidden;
  background: oklch(0.97 0.015 210);
}


/* ============================================================
   1. CSS変数 — v0 globals.css 準拠
   ============================================================ */
#latte-page {
  /* v0カラートークン（oklchを互換HEXで併記） */
  --lp-bg:           oklch(0.97 0.015 210);   /* #f0f7fb相当 */
  --lp-fg:           oklch(0.35 0.03 220);    /* #3d5060相当 */
  --lp-primary:      oklch(0.65 0.15 210);    /* #5aa3cc相当 */
  --lp-primary-dark: oklch(0.55 0.16 210);    /* hover用 */
  --lp-secondary:    oklch(0.94 0.03 210);    /* #e5f0f7相当 */
  --lp-muted:        oklch(0.55 0.04 220);    /* #6e8899相当 */
  --lp-accent:       oklch(0.88 0.08 210);    /* #b8d8e8相当 */
  --lp-border:       oklch(0.88 0.03 210 / 0.6);

  /* glass */
  --lp-glass-bg:     oklch(0.98 0.015 210 / 0.5);
  --lp-glass-bd:     oklch(0.95 0.025 210 / 0.7);
  --lp-glass-sh:     0 4px 24px oklch(0.7 0.1 210 / 0.1);
  --lp-glass-strong-bg: oklch(0.98 0.015 210 / 0.75);
  --lp-glass-strong-bd: oklch(0.95 0.025 210 / 0.85);
  --lp-glass-strong-sh: 0 4px 24px oklch(0.7 0.1 210 / 0.15);

  /* radius — v0: --radius: 1.25rem */
  --lp-radius:    1.25rem;   /* 20px */
  --lp-radius-sm: 1rem;      /* 16px */
  --lp-radius-lg: 1.5rem;    /* 24px */
  --lp-radius-xl: 2rem;      /* 32px ≒ rounded-3xl */

  /* typography */
  --lp-font: 'Zen Maru Gothic', 'Hiragino Maru Gothic Pro', 'Yu Gothic', sans-serif;

  /* spacing */
  --lp-section-py: clamp(5rem, 8vw, 8rem);  /* py-24 lg:py-32 */
  --lp-section-px: clamp(1.5rem, 4vw, 3rem); /* px-6 lg:px-12 */
}


/* ============================================================
   2. ベース / リセット（#latte-page スコープ）
   ============================================================ */
#latte-page {
  font-family: var(--lp-font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--lp-fg);
  background: var(--lp-bg);
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#latte-page *,
#latte-page *::before,
#latte-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

#latte-page a {
  color: inherit;
  text-decoration: none;
}

#latte-page button {
  font-family: inherit;
  cursor: pointer;
}


/* ============================================================
   3. ユーティリティ — v0グローバルクラス再現
   ============================================================ */

/* .glass — v0: glass morphism */
#latte-page .glass {
  background:      var(--lp-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:          1px solid var(--lp-glass-bd);
  box-shadow:      var(--lp-glass-sh);
}

/* .glass-strong — v0: header用 */
#latte-page .glass-strong {
  background:      var(--lp-glass-strong-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:          1px solid var(--lp-glass-strong-bd);
  box-shadow:      var(--lp-glass-strong-sh);
}

/* .btn-cute — v0: gradient blue pill button */
#latte-page .btn-cute {
  display:         inline-block;
  background:      linear-gradient(135deg,
                     oklch(0.7 0.14 210),
                     oklch(0.6 0.16 210));
  color:           white;
  border-radius:   9999px;
  padding:         0.875rem 2rem;
  font-weight:     500;
  font-size:       0.875rem;
  letter-spacing:  0.05em;
  box-shadow:      0 4px 16px oklch(0.6 0.15 210 / 0.3);
  transition:      all 0.2s ease;
  white-space:     nowrap;
  border:          none;
  text-align:      center;
}
#latte-page .btn-cute:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px oklch(0.6 0.15 210 / 0.4);
  color:      white;
}

/* .animate-bounce — v0: chevron下スクロールアニメ */
#latte-page .animate-bounce {
  animation: lpBounce 1s infinite;
}
@keyframes lpBounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(4px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* .js-fade — フェードインターゲット */
#latte-page .js-fade {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#latte-page .js-fade.is-visible {
  opacity:   1;
  transform: translateY(0);
}


/* ============================================================
   4. コンテナ — max-w-* 再現
   ============================================================ */
#latte-page .lp-container {
  width:          100%;
  margin-inline:  auto;
  padding-inline: var(--lp-section-px);
}
/* max-w-4xl = 896px */
#latte-page .lp-container--sm  { max-width: 896px; }
/* max-w-5xl = 1024px */
#latte-page .lp-container--md  { max-width: 1024px; }
/* max-w-6xl = 1152px */
#latte-page .lp-container--lg  { max-width: 1152px; }
/* max-w-7xl = 1280px */
#latte-page .lp-container--xl  { max-width: 1280px; }


/* ============================================================
   5. セクション共通
   ============================================================ */
#latte-page .lp-section {
  padding-block: var(--lp-section-py);
}
/* bg-gradient-to-b from-transparent via-accent/15 to-transparent */
#latte-page .lp-section--accent {
  background: linear-gradient(
    to bottom,
    transparent,
    oklch(0.88 0.08 210 / 0.15) 30%,
    oklch(0.88 0.08 210 / 0.15) 70%,
    transparent
  );
}

/* ---- セクションヘッダー ---- */
#latte-page .lp-section-header {
  text-align:    center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
#latte-page .lp-section-header__en {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            0.5rem;
  font-size:      0.75rem;
  letter-spacing: 0.3em;
  color:          var(--lp-primary);
  margin-bottom:  0.75rem;
}
#latte-page .lp-section-header__ja {
  font-size:      clamp(1.875rem, 4vw, 3rem); /* text-3xl〜5xl */
  font-weight:    500;
  color:          var(--lp-fg);
  margin-bottom:  1rem;
  letter-spacing: 0.02em;
}
/* 区切り線: w-8 h-px + dot + w-8 h-px */
#latte-page .lp-section-header__rule {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
}
#latte-page .lp-section-header__line {
  display:          block;
  width:            2rem;
  height:           1px;
  background:       oklch(0.65 0.15 210 / 0.4);
  border-radius:    1px;
}
#latte-page .lp-section-header__dot {
  display:       block;
  width:         0.5rem;
  height:        0.5rem;
  border-radius: 50%;
  background:    oklch(0.65 0.15 210 / 0.4);
}


/* ============================================================
   6. HEADER — v0: header.tsx
   fixed top-0 / glass-strong rounded-b-2xl / max-w-7xl
   ============================================================ */
#latte-page .lp-header {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
}

#latte-page .lp-header__glass {
  /* glass-strong + rounded-b-2xl */
  background:      var(--lp-glass-strong-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom:   1px solid var(--lp-glass-strong-bd);
  border-radius:   0 0 var(--lp-radius-lg) var(--lp-radius-lg);
  box-shadow:      var(--lp-glass-strong-sh);
}

#latte-page .lp-header__inner {
  max-width:       1280px; /* max-w-7xl */
  margin-inline:   auto;
  padding-inline:  1rem;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          4rem; /* h-16 */
}

/* Desktop: h-20 */
@media (min-width: 1024px) {
  #latte-page .lp-header__inner {
    padding-inline: 2rem;
    height:         5rem;
  }
}

/* Logo */
#latte-page .lp-header__logo-link {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}
#latte-page .lp-header__logo {
  height: 2.5rem;    /* h-10 */
  width:  auto;
}
@media (min-width: 1024px) {
  #latte-page .lp-header__logo { height: 3rem; } /* lg:h-12 */
}

/* Desktop Nav — hidden lg:flex */
#latte-page .lp-header__nav {
  display: none;
}
@media (min-width: 1024px) {
  #latte-page .lp-header__nav {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
  }
}

#latte-page .lp-header__nav-link {
  position:    relative;
  padding:     0.5rem 0.75rem;
  color:       var(--lp-muted);
  font-size:   0.875rem;
  font-weight: 500;
  transition:  color 0.2s;
}
#latte-page .lp-header__nav-link:hover { color: var(--lp-primary); }
/* アンダーライン hover演出 */
#latte-page .lp-header__nav-link::after {
  content:          '';
  position:         absolute;
  bottom:           -2px;
  left:             50%;
  transform:        translateX(-50%);
  width:            0;
  height:           2px;
  background:       oklch(0.65 0.15 210 / 0.5);
  border-radius:    1px;
  transition:       width 0.3s ease;
}
#latte-page .lp-header__nav-link:hover::after { width: 100%; }

/* Right: lang + hamburger */
#latte-page .lp-header__right {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

/* Language switcher */
#latte-page .lp-lang {
  display:       none;
  align-items:   center;
  gap:           0.375rem;
  font-size:     0.75rem;
  background:    oklch(0.94 0.03 210 / 0.5);
  border-radius: 9999px;
  padding:       0.375rem 0.75rem;
}
@media (min-width: 640px) {
  #latte-page .lp-lang { display: flex; }
}
#latte-page .lp-lang__active { color: var(--lp-fg); font-weight: 500; }
#latte-page .lp-lang__sep    { color: oklch(0.55 0.04 220 / 0.5); }
#latte-page .lp-lang__other  { color: var(--lp-muted); cursor: pointer; transition: color 0.2s; }
#latte-page .lp-lang__other:hover { color: var(--lp-fg); }

/* Hamburger — lg:hidden */
#latte-page .lp-hamburger {
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0.5rem;
  background:    transparent;
  border:        none;
  border-radius: 9999px;
  color:         var(--lp-fg);
  transition:    background 0.2s;
}
#latte-page .lp-hamburger:hover { background: oklch(0.94 0.03 210 / 0.5); }
@media (min-width: 1024px) {
  #latte-page .lp-hamburger { display: none; }
}

/* hamburger icon切替はJSで .is-open を付与 */
#latte-page .lp-hamburger__icon--close { display: none; }
#latte-page .lp-hamburger.is-open .lp-hamburger__icon--menu  { display: none; }
#latte-page .lp-hamburger.is-open .lp-hamburger__icon--close { display: block; }

/* Mobile Menu */
#latte-page .lp-mobile-menu {
  display:      none;
  margin-top:   0.5rem;
  margin-inline: 1rem;
  border-radius: var(--lp-radius-lg);
  overflow:      hidden;
}
#latte-page .lp-mobile-menu.is-open { display: block; }
#latte-page .lp-mobile-menu__nav {
  /* glass-strong */
  background:      var(--lp-glass-strong-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:          1px solid var(--lp-glass-strong-bd);
  border-radius:   var(--lp-radius-lg);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding-block:   1.5rem;
  gap:             0.25rem;
}
#latte-page .lp-mobile-menu__link {
  width:       100%;
  text-align:  center;
  padding:     0.75rem 1.5rem;
  color:       var(--lp-muted);
  font-size:   0.875rem;
  font-weight: 500;
  transition:  color 0.2s, background 0.2s;
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         0.5rem;
}
#latte-page .lp-mobile-menu__link:hover {
  color:      var(--lp-primary);
  background: oklch(0.65 0.15 210 / 0.05);
}
#latte-page .lp-mobile-menu__ja { }
#latte-page .lp-mobile-menu__en {
  font-size: 0.75rem;
  color:     oklch(0.55 0.04 220 / 0.6);
}
#latte-page .lp-mobile-menu__lang {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  font-size:       0.875rem;
  padding-top:     1rem;
  margin-top:      0.5rem;
  border-top:      1px solid oklch(0.88 0.03 210 / 0.3);
  width:           80%;
  justify-content: center;
}


/* ============================================================
   7. HERO — v0: hero-section.tsx
   min-h-screen / 背景1枚full / 下部ガラスバー / scroll bounce
   ============================================================ */
#latte-page .lp-hero {
  position:        relative;
  min-height:      100svh;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
}

/* 背景 */
#latte-page .lp-hero__bg {
  position: absolute;
  inset:    0;
}
#latte-page .lp-hero__bg-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}
/* Bottom fade overlay — h-48 bg-gradient-to-t from-background/80 */
#latte-page .lp-hero__bottom-fade {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     12rem; /* h-48 */
  background: linear-gradient(
    to top,
    oklch(0.97 0.015 210 / 0.8),
    transparent
  );
}

/* Spacer flex-1 */
#latte-page .lp-hero__spacer { flex: 1; }

/* Bottom content */
#latte-page .lp-hero__bottom {
  position:  relative;
  z-index:   20;
  width:     100%;
  padding:   0 1rem 1.5rem;
}
@media (min-width: 640px) {
  #latte-page .lp-hero__bottom { padding: 0 1.5rem 2rem; }
}

/* Bar wrap: max-w-4xl mx-auto */
#latte-page .lp-hero__bar-wrap {
  max-width:     896px;
  margin-inline: auto;
}

/* Glass card — v0: glass rounded-2xl sm:rounded-3xl */
#latte-page .lp-hero__bar {
  background:      var(--lp-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:          1px solid var(--lp-glass-bd);
  box-shadow:      var(--lp-glass-sh);
  border-radius:   var(--lp-radius-lg);    /* rounded-2xl */
  padding:         1.25rem;                /* px-5 py-4 */
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1rem;
}
@media (min-width: 640px) {
  #latte-page .lp-hero__bar {
    flex-direction:  row;
    justify-content: space-between;
    padding:         1.25rem 2rem;   /* sm:px-8 sm:py-5 */
    border-radius:   var(--lp-radius-xl); /* sm:rounded-3xl */
    gap:             1.5rem;
  }
}

/* Tagline */
#latte-page .lp-hero__tagline {
  font-size:  0.875rem;
  color:      oklch(0.35 0.03 220 / 0.8);
  text-align: center;
}
@media (min-width: 640px) {
  #latte-page .lp-hero__tagline {
    font-size:  1rem;
    text-align: left;
  }
}

/* Divider — hidden sm:block */
#latte-page .lp-hero__divider {
  display: none;
}
@media (min-width: 640px) {
  #latte-page .lp-hero__divider {
    display:    block;
    width:      1px;
    height:     2.5rem;
    background: oklch(0.88 0.03 210 / 0.4);
    flex-shrink: 0;
  }
}

/* Open Hours */
#latte-page .lp-hero__hours {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.875rem;
  flex-shrink: 0;
}
#latte-page .lp-hero__hours-label { color: oklch(0.35 0.03 220 / 0.6); }
#latte-page .lp-hero__hours-value { color: var(--lp-fg); font-weight: 500; }

/* CTA */
#latte-page .lp-hero__cta { flex-shrink: 0; }

/* Scroll indicator */
#latte-page .lp-hero__scroll {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.125rem;
  margin-top:      1rem;
  color:           oklch(0.35 0.03 220 / 0.5);
}
#latte-page .lp-hero__scroll-text {
  font-size:      0.75rem;
  letter-spacing: 0.1em;
}
#latte-page .lp-hero__scroll-icon {
  display: block;
  stroke:  currentColor;
}


/* ============================================================
   8. CONCEPT — v0: concept-section.tsx
   py-24 lg:py-32 / max-w-5xl / grid lg:grid-cols-2
   text order-2 lg:order-1 / image order-1 lg:order-2
   ============================================================ */
#latte-page .lp-concept { }

#latte-page .lp-concept__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   3rem;
  align-items:           center;
}
@media (min-width: 1024px) {
  #latte-page .lp-concept__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   4rem;
  }
}

/* Text: order-2 lg:order-1 */
#latte-page .lp-concept__text {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  #latte-page .lp-concept__text { order: 1; }
}

#latte-page .lp-concept__lead {
  font-size:   clamp(1.25rem, 2.5vw, 1.5rem); /* text-xl sm:text-2xl */
  font-weight: 500;
  line-height: 1.7;
  color:       var(--lp-fg);
}
#latte-page .lp-concept__body {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  color:          var(--lp-muted);
  font-size:      clamp(0.875rem, 1.5vw, 1rem);
  line-height:    1.8;
}
#latte-page .lp-concept__en-note {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  color:          oklch(0.65 0.15 210 / 0.6);
}

/* Image: order-1 lg:order-2 */
#latte-page .lp-concept__image-wrap { order: 1; }
@media (min-width: 1024px) {
  #latte-page .lp-concept__image-wrap { order: 2; }
}

/* aspect-[3/4] rounded-3xl overflow-hidden shadow-lg */
#latte-page .lp-concept__image-frame {
  position:      relative;
  aspect-ratio:  3 / 4;
  border-radius: var(--lp-radius-xl); /* rounded-3xl */
  overflow:      hidden;
  box-shadow:    0 10px 40px oklch(0.7 0.1 210 / 0.15);
}
#latte-page .lp-concept__image {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
#latte-page .lp-concept__image-frame:hover .lp-concept__image {
  transform: scale(1.03);
}
/* bg-gradient-to-t from-primary/10 via-transparent to-transparent */
#latte-page .lp-concept__image-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    oklch(0.65 0.15 210 / 0.1),
    transparent 50%,
    transparent
  );
}


/* ============================================================
   9. HOW TO ENJOY — v0: howto-section.tsx
   bg-gradient-to-b via-accent/10 / max-w-6xl
   grid md:grid-cols-3 / card: bg-white/60 backdrop-blur rounded-3xl
   ============================================================ */
#latte-page .lp-howto { }

/* Steps grid */
#latte-page .lp-howto__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.5rem;
}
@media (min-width: 768px) {
  #latte-page .lp-howto__grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
  }
}

/* Card wrapper (group) */
#latte-page .lp-howto__item { }

/* v0: bg-white/60 backdrop-blur-md rounded-3xl p-6 lg:p-8 h-full
        border border-white/50 shadow-lg hover:shadow-xl hover:shadow-primary/15 */
#latte-page .lp-howto__card {
  background:      oklch(1 0 0 / 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:          1px solid oklch(1 0 0 / 0.5);
  border-radius:   var(--lp-radius-xl); /* rounded-3xl */
  padding:         1.5rem;
  height:          100%;
  box-shadow:      0 8px 24px oklch(0.65 0.15 210 / 0.05);
  transition:      box-shadow 0.3s, transform 0.3s;
  display:         flex;
  flex-direction:  column;
  gap:             1.25rem;
}
@media (min-width: 1024px) {
  #latte-page .lp-howto__card { padding: 2rem; }
}
#latte-page .lp-howto__card:hover {
  box-shadow: 0 20px 48px oklch(0.65 0.15 210 / 0.15);
  transform:  translateY(-2px);
}

/* Head: number + icon */
#latte-page .lp-howto__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
/* text-5xl font-light text-primary/25 */
#latte-page .lp-howto__num {
  font-size:   3rem;
  font-weight: 300;
  color:       oklch(0.65 0.15 210 / 0.25);
  line-height: 1;
  transition:  color 0.3s;
}
#latte-page .lp-howto__card:hover .lp-howto__num {
  color: oklch(0.65 0.15 210 / 0.4);
}
/* w-12 h-12 rounded-2xl bg-gradient-to-br from-primary/20 to-accent/30 */
#latte-page .lp-howto__icon-wrap {
  width:            3rem;
  height:           3rem;
  border-radius:    1rem; /* rounded-2xl */
  background:       linear-gradient(135deg,
                      oklch(0.65 0.15 210 / 0.2),
                      oklch(0.88 0.08 210 / 0.3));
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--lp-primary);
  flex-shrink:      0;
  box-shadow:       0 2px 8px oklch(0.65 0.15 210 / 0.1);
}

/* Image: aspect-[4/3] rounded-2xl overflow-hidden */
#latte-page .lp-howto__img-wrap {
  position:      relative;
  aspect-ratio:  4 / 3;
  border-radius: var(--lp-radius-lg); /* rounded-2xl */
  overflow:      hidden;
  box-shadow:    0 4px 16px oklch(0 0 0 / 0.08);
  flex-shrink:   0;
}
#latte-page .lp-howto__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
#latte-page .lp-howto__card:hover .lp-howto__img {
  transform: scale(1.05);
}
/* bg-gradient-to-t from-black/10 */
#latte-page .lp-howto__img-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, oklch(0 0 0 / 0.1), transparent);
}

/* Body */
#latte-page .lp-howto__body { display: flex; flex-direction: column; gap: 0.75rem; }
#latte-page .lp-howto__title {
  font-size:   1.125rem;
  font-weight: 500;
  color:       var(--lp-fg);
}
#latte-page .lp-howto__title-en {
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  color:          oklch(0.65 0.15 210 / 0.6);
}
#latte-page .lp-howto__desc {
  font-size:   0.875rem;
  color:       var(--lp-muted);
  line-height: 1.75;
}

/* Note: bg-white/50 backdrop-blur-sm border border-white/40 inline-flex rounded-full */
#latte-page .lp-howto__note {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  background:      oklch(1 0 0 / 0.5);
  backdrop-filter: blur(8px);
  border:          1px solid oklch(1 0 0 / 0.4);
  border-radius:   9999px;
  padding:         0.75rem 1.5rem;
  font-size:       0.875rem;
  color:           var(--lp-muted);
  margin-top:      3rem;
  /* center */
  display:         flex;
  width:           fit-content;
  margin-inline:   auto;
  box-shadow:      0 4px 16px oklch(0 0 0 / 0.05);
}
#latte-page .lp-howto__note-icon { color: oklch(0.65 0.15 210 / 0.6); }


/* ============================================================
   10. GALLERY — v0: gallery-section.tsx
   max-w-5xl / grid-cols-1 md:grid-cols-2 / aspect-[16/10]
   filter: all / interior / menu (castなし)
   ============================================================ */
#latte-page .lp-gallery { }

/* Filter: flex flex-wrap justify-center gap-2 mb-10 */
#latte-page .lp-gallery__filter {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             0.5rem;
  margin-bottom:   2.5rem;
}
#latte-page .lp-gallery__filter-btn {
  padding:         0.625rem 1.25rem;
  border-radius:   9999px;
  font-size:       0.875rem;
  border:          none;
  cursor:          pointer;
  transition:      all 0.2s;
  /* default: glass */
  background:      var(--lp-glass-bg);
  backdrop-filter: blur(8px);
  border:          1px solid var(--lp-glass-bd);
  color:           var(--lp-muted);
}
#latte-page .lp-gallery__filter-btn:hover {
  color: var(--lp-primary);
}
/* active: btn-cute */
#latte-page .lp-gallery__filter-btn.is-active {
  background:  linear-gradient(135deg,
                 oklch(0.7 0.14 210),
                 oklch(0.6 0.16 210));
  color:       white;
  border-color: transparent;
  box-shadow:   0 4px 12px oklch(0.6 0.15 210 / 0.3);
}

/* Grid: grid-cols-1 md:grid-cols-2 */
#latte-page .lp-gallery__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
}
@media (min-width: 768px) {
  #latte-page .lp-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.25rem;
  }
}

/* Item: aspect-[16/10] rounded-2xl overflow-hidden cursor-pointer */
#latte-page .lp-gallery__item {
  position:      relative;
  aspect-ratio:  16 / 10;
  border-radius: var(--lp-radius-lg);
  overflow:      hidden;
  cursor:        pointer;
  box-shadow:    0 4px 16px oklch(0 0 0 / 0.08);
  transition:    box-shadow 0.3s;
}
#latte-page .lp-gallery__item:hover {
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.15);
}

#latte-page .lp-gallery__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
#latte-page .lp-gallery__item:hover .lp-gallery__img {
  transform: scale(1.05);
}

/* Hover overlay */
#latte-page .lp-gallery__hover {
  position:    absolute;
  inset:       0;
  background:  oklch(0.65 0.15 210 / 0);
  transition:  background 0.3s;
  display:     flex;
  align-items: center;
  justify-content: center;
}
#latte-page .lp-gallery__item:hover .lp-gallery__hover {
  background: oklch(0.65 0.15 210 / 0.1);
}
#latte-page .lp-gallery__hover-label {
  opacity:       0;
  transition:    opacity 0.3s;
  padding:       0.5rem 1rem;
  border-radius: 9999px;
  font-size:     0.875rem;
  color:         var(--lp-fg);
  /* glass */
  background:      var(--lp-glass-bg);
  backdrop-filter: blur(16px);
  border:          1px solid var(--lp-glass-bd);
}
#latte-page .lp-gallery__item:hover .lp-gallery__hover-label { opacity: 1; }

/* View more */
#latte-page .lp-gallery__more {
  margin-top: 2.5rem;
  text-align: center;
}
#latte-page .lp-gallery__more-link {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.875rem;
  color:       var(--lp-primary);
  transition:  color 0.2s;
}
#latte-page .lp-gallery__more-link:hover { color: var(--lp-primary-dark); }

/* ---- Lightbox ---- */
#latte-page .lp-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  opacity:         0;
  transition:      opacity 0.3s;
}
#latte-page .lp-lightbox.is-open {
  pointer-events: auto;
  opacity:        1;
}
#latte-page .lp-lightbox__bg {
  position:   absolute;
  inset:      0;
  background: oklch(0 0 0 / 0.9);
  cursor:     pointer;
}
#latte-page .lp-lightbox__content {
  position:  relative;
  z-index:   1;
  max-width:  90vw;
  max-height: 85vh;
  display:    flex;
  align-items: center;
  justify-content: center;
}
#latte-page .lp-lightbox__img {
  max-width:     90vw;
  max-height:    85vh;
  object-fit:    contain;
  border-radius: var(--lp-radius);
  box-shadow:    0 8px 48px oklch(0 0 0 / 0.5);
}
#latte-page .lp-lightbox__close,
#latte-page .lp-lightbox__prev,
#latte-page .lp-lightbox__next {
  position:        fixed;
  z-index:         2;
  background:      oklch(1 0 0 / 0.15);
  backdrop-filter: blur(8px);
  border:          1px solid oklch(1 0 0 / 0.25);
  border-radius:   9999px;
  width:           3rem;
  height:          3rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           white;
  transition:      background 0.2s;
  cursor:          pointer;
}
#latte-page .lp-lightbox__close:hover,
#latte-page .lp-lightbox__prev:hover,
#latte-page .lp-lightbox__next:hover { background: oklch(1 0 0 / 0.25); }
#latte-page .lp-lightbox__close { top: 1.5rem; right: 1.5rem; }
#latte-page .lp-lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
#latte-page .lp-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }


/* ============================================================
   11. SNS — v0: sns-section.tsx
   bg-gradient-to-b via-accent/15 / max-w-4xl
   grid sm:grid-cols-2 / glass rounded-3xl p-6 lg:p-8
   ============================================================ */
#latte-page .lp-sns { }

/* Grid: grid sm:grid-cols-2 gap-4 lg:gap-6 */
#latte-page .lp-sns__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
}
@media (min-width: 640px) {
  #latte-page .lp-sns__grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
  }
}

/* Card: glass group rounded-3xl p-6 lg:p-8 */
#latte-page .lp-sns__card {
  border-radius: var(--lp-radius-xl); /* rounded-3xl */
  padding:       1.5rem;
  display:       block;
  transition:    box-shadow 0.3s, transform 0.2s;
  text-decoration: none;
  color:         inherit;
}
@media (min-width: 1024px) {
  #latte-page .lp-sns__card { padding: 2rem; }
}
#latte-page .lp-sns__card--instagram:hover {
  box-shadow: 0 12px 32px oklch(0.65 0.2 0 / 0.1); /* pink */
  transform:  translateY(-2px);
}
#latte-page .lp-sns__card--twitter:hover {
  box-shadow: 0 12px 32px oklch(0.65 0.15 210 / 0.1);
  transform:  translateY(-2px);
}

/* Card top: flex items-start justify-between mb-5 */
#latte-page .lp-sns__card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   1.25rem;
}

/* Icon wrap: w-12 h-12 rounded-2xl */
#latte-page .lp-sns__icon-wrap {
  width:            3rem;
  height:           3rem;
  border-radius:    1rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}
/* Instagram: from-pink-400/20 to-purple-400/20 */
#latte-page .lp-sns__icon-wrap--instagram {
  background: linear-gradient(135deg,
                oklch(0.75 0.2 0 / 0.2),
                oklch(0.6 0.25 320 / 0.2));
  color: oklch(0.7 0.2 0); /* pink */
}
/* Twitter: bg-foreground/5 */
#latte-page .lp-sns__icon-wrap--twitter {
  background: oklch(0.35 0.03 220 / 0.05);
  color:      oklch(0.35 0.03 220 / 0.7);
}
#latte-page .lp-sns__x-icon { color: inherit; }

/* Arrow: text-xs text-muted group-hover:text-primary */
#latte-page .lp-sns__arrow {
  font-size:  0.75rem;
  color:      var(--lp-muted);
  transition: color 0.2s;
}
#latte-page .lp-sns__card:hover .lp-sns__arrow { color: var(--lp-primary); }

#latte-page .lp-sns__name {
  font-size:     1.125rem;
  font-weight:   500;
  color:         var(--lp-fg);
  margin-bottom: 0.25rem;
}
#latte-page .lp-sns__handle {
  font-size:     0.875rem;
  color:         var(--lp-primary);
  margin-bottom: 0.75rem;
}
#latte-page .lp-sns__desc {
  font-size: 0.875rem;
  color:     var(--lp-muted);
}

/* Hashtag: glass inline-flex rounded-full px-6 py-3 */
#latte-page .lp-sns__hashtag-wrap {
  margin-top: 2.5rem;
  text-align: center;
}
#latte-page .lp-sns__hashtag {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.75rem 1.5rem;
  border-radius:   9999px;
  font-size:       0.875rem;
  color:           var(--lp-muted);
}
#latte-page .lp-sns__hashtag-icon { color: oklch(0.65 0.15 210 / 0.6); }
#latte-page .lp-sns__hashtag-tag  { color: var(--lp-primary); font-weight: 500; margin-inline: 0.25rem; }


/* ============================================================
   12. ACCESS — v0: access-section.tsx
   max-w-6xl
   ■ オタロード店 (mb-20): lg:grid-cols-2
     左: map(aspect-4/3) + photos(grid-cols-2)
     右: 4cards + btn-cute
   ■ 黒門店 (pt-12 border-t): lg:grid-cols-3
     地図 / 写真2枚 / 住所+座席
   ============================================================ */
#latte-page .lp-access { }

/* ── 店舗ブロック共通 ── */
#latte-page .lp-access__store { }
#latte-page .lp-access__store--main { margin-bottom: 5rem; }
#latte-page .lp-access__store--sub  {
  padding-top:  3rem;
  border-top:   1px solid oklch(0.65 0.15 210 / 0.2);
}

/* 店舗タイトル行 */
#latte-page .lp-access__store-title {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin-bottom: 2rem;
}
/* Dot: w-3 h-3 rounded-full bg-primary (main) */
#latte-page .lp-access__store-dot {
  border-radius: 50%;
  flex-shrink:   0;
}
#latte-page .lp-access__store-dot--main {
  width:      0.75rem;
  height:     0.75rem;
  background: var(--lp-primary);
}
#latte-page .lp-access__store-dot--sub {
  width:      0.625rem;
  height:     0.625rem;
  background: oklch(0.65 0.15 210 / 0.6);
}
/* 店舗名 */
#latte-page .lp-access__store-name--main {
  font-size:   clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 500;
  color:       var(--lp-fg);
}
#latte-page .lp-access__store-name--sub {
  font-size:   clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  color:       var(--lp-fg);
}
/* Badge */
#latte-page .lp-access__store-badge {
  font-size:     0.75rem;
  border-radius: 9999px;
  padding:       0.25rem 0.75rem;
}
#latte-page .lp-access__store-badge--main {
  color:      var(--lp-primary);
  background: oklch(0.65 0.15 210 / 0.1);
}
#latte-page .lp-access__store-badge--sub {
  color:      var(--lp-muted);
  background: oklch(0.94 0.03 210 / 0.5);
}

/* ── オタロード店 grid lg:grid-cols-2 gap-8 lg:gap-12 ── */
#latte-page .lp-access__main-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
}
@media (min-width: 1024px) {
  #latte-page .lp-access__main-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   3rem;
  }
}

/* 左カラム: space-y-4 */
#latte-page .lp-access__map-col {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* Map wrap: aspect-[4/3] rounded-2xl overflow-hidden shadow-lg */
#latte-page .lp-access__map-wrap {
  position:      relative;
  aspect-ratio:  4 / 3;
  border-radius: var(--lp-radius-lg);
  overflow:      hidden;
  box-shadow:    0 8px 32px oklch(0 0 0 / 0.1);
}
#latte-page .lp-access__map-iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}

/* 写真 2枚: grid grid-cols-2 gap-3 */
#latte-page .lp-access__photos {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   0.75rem;
}
/* 写真ラップ: aspect-[4/3] rounded-xl overflow-hidden group shadow-md */
#latte-page .lp-access__photo-wrap {
  position:      relative;
  aspect-ratio:  4 / 3;
  border-radius: 0.75rem; /* rounded-xl */
  overflow:      hidden;
  box-shadow:    0 4px 16px oklch(0 0 0 / 0.08);
}
#latte-page .lp-access__photo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
#latte-page .lp-access__photo-wrap:hover .lp-access__photo { transform: scale(1.05); }
/* from-black/40 to-transparent */
#latte-page .lp-access__photo-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, oklch(0 0 0 / 0.4), transparent);
}
#latte-page .lp-access__photo-label {
  position:    absolute;
  bottom:      0.5rem;
  left:        0.75rem;
  font-size:   0.75rem;
  color:       white;
  text-shadow: 0 1px 3px oklch(0 0 0 / 0.5);
}

/* 右カラム: space-y-4 */
#latte-page .lp-access__info-col {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* Info card: glass rounded-2xl p-5 lg:p-6 */
#latte-page .lp-access__info-card {
  border-radius: var(--lp-radius-lg);
  padding:       1.25rem;
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
}
@media (min-width: 1024px) {
  #latte-page .lp-access__info-card { padding: 1.5rem; }
}
/* sm版 (黒門店) */
#latte-page .lp-access__info-card--sm { padding: 1.25rem; }

/* Icon wrap: w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-accent/30 */
#latte-page .lp-access__info-icon-wrap {
  width:            2.5rem;
  height:           2.5rem;
  border-radius:    0.75rem; /* rounded-xl */
  background:       linear-gradient(135deg,
                      oklch(0.65 0.15 210 / 0.2),
                      oklch(0.88 0.08 210 / 0.3));
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--lp-primary);
  flex-shrink:      0;
}
/* sm版 */
#latte-page .lp-access__info-icon-wrap--sm {
  width:  2.25rem;
  height: 2.25rem;
}

#latte-page .lp-access__info-label {
  font-size:     1rem;
  font-weight:   500;
  color:         var(--lp-fg);
  margin-bottom: 0.375rem;
}
#latte-page .lp-access__info-label--sm { font-size: 0.875rem; }
#latte-page .lp-access__info-value {
  font-size:   0.875rem;
  color:       var(--lp-muted);
  line-height: 1.7;
}
#latte-page .lp-access__info-note {
  font-size:  0.75rem;
  color:      oklch(0.55 0.04 220 / 0.7);
  margin-top: 0.25rem;
}
/* 電話番号リンク */
#latte-page .lp-access__tel {
  font-size:  0.875rem;
  color:      var(--lp-primary);
  transition: text-decoration 0.2s;
}
#latte-page .lp-access__tel:hover { text-decoration: underline; }

/* Web予約ボタン: btn-cute block w-full */
#latte-page .lp-access__reserve-btn {
  display:    block;
  width:      100%;
  text-align: center;
  margin-top: 0.5rem;
}

/* ── 黒門店 grid lg:grid-cols-3 gap-6 lg:gap-8 ── */
#latte-page .lp-access__sub-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.5rem;
}
@media (min-width: 1024px) {
  #latte-page .lp-access__sub-grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
  }
}

/* 黒門地図: aspect-[4/3] lg:aspect-auto lg:min-h-[240px] */
#latte-page .lp-access__sub-map-wrap {
  position:      relative;
  aspect-ratio:  4 / 3;
  border-radius: var(--lp-radius-lg);
  overflow:      hidden;
  box-shadow:    0 4px 16px oklch(0 0 0 / 0.08);
}
@media (min-width: 1024px) {
  #latte-page .lp-access__sub-map-wrap {
    aspect-ratio: auto;
    min-height:   240px;
  }
}

/* 黒門写真: grid grid-cols-2 lg:grid-cols-1 */
#latte-page .lp-access__sub-photos {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   0.75rem;
}
@media (min-width: 1024px) {
  #latte-page .lp-access__sub-photos {
    grid-template-columns: 1fr;
  }
}
/* 黒門写真wrap: aspect-[4/3] lg:aspect-[16/9] */
#latte-page .lp-access__photo-wrap--sub {
  aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) {
  #latte-page .lp-access__photo-wrap--sub {
    aspect-ratio: 16 / 9;
  }
}

/* 黒門情報: space-y-4 */
#latte-page .lp-access__sub-info {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}


/* ============================================================
   13. FOOTER — v0: footer.tsx
   py-12 / border-t border-border/30 / max-w-5xl
   flex-col items-center gap-8
   ============================================================ */
#latte-page .lp-footer {
  padding-block: 3rem;
  border-top:    1px solid oklch(0.88 0.03 210 / 0.3);
  background:    var(--lp-bg);
}

#latte-page .lp-footer .lp-container { }

#latte-page .lp-footer__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2rem;
  text-align:     center;
}

/* Logo: h-12 w-auto mx-auto mb-3 */
#latte-page .lp-footer__logo-wrap { text-align: center; }
#latte-page .lp-footer__logo {
  height:        3rem;
  width:         auto;
  margin-inline: auto;
  margin-bottom: 0.75rem;
}
#latte-page .lp-footer__catchcopy {
  font-size: 0.875rem;
  color:     var(--lp-muted);
}

/* Links: flex flex-wrap justify-center gap-6 text-sm */
#latte-page .lp-footer__links {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             1.5rem;
}
#latte-page .lp-footer__link {
  font-size:  0.875rem;
  color:      var(--lp-muted);
  transition: color 0.2s;
}
#latte-page .lp-footer__link:hover { color: var(--lp-primary); }

/* Deco: ✧ ✦ ✧ */
#latte-page .lp-footer__deco {
  display: flex;
  gap:     0.5rem;
  color:   oklch(0.65 0.15 210 / 0.4);
  font-size: 1rem;
}

/* Copyright: 2行 */
#latte-page .lp-footer__copy-wrap { text-align: center; }
#latte-page .lp-footer__copy {
  font-size: 0.75rem;
  color:     oklch(0.55 0.04 220 / 0.7);
}
#latte-page .lp-footer__copy--sub {
  font-size:  0.75rem;
  color:      oklch(0.55 0.04 220 / 0.5);
  margin-top: 0.25rem;
}


/* ============================================================
   14. アクセシビリティ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #latte-page .animate-bounce,
  #latte-page .js-fade,
  #latte-page *  {
    animation:  none !important;
    transition: none !important;
  }
  #latte-page .js-fade { opacity: 1 !important; transform: none !important; }
}




/* SWELL標準ヘッダー非表示 */
.l-header {
  display: none !important;
}


/* SWELL標準フッター非表示 */
.l-footer {
  display: none !important;
}

/* 上余白削除 */
.l-mainContent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* コンテンツ幅制限解除 */
.l-container {
  max-width: none !important;
  padding: 0 !important;
}

.p-contentWide {
  max-width: none !important;
}

/* 横幅全開放 */
body.latte-lp .shop-body,
body.latte-lp .shop-hero,
body.latte-lp .shop-section,
body.latte-lp .shop-footer {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


.lp-hero__bg picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.lp-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .lp-hero__bg-img {
    object-position: center top;
  }
}



/* ================================================================
   latte-style.css への追記
   ================================================================
   既存の latte-style.css の末尾（最終行の後）に追記してください。
   既存の .lp-hero { } ブロックは削除しないでください。
   このブロックは既存スタイルを上書き・拡張します。
   ================================================================ */


/* ============================================================
   HERO UPGRADE — 背景フェードイン + ズームアウト + ロゴパーティクル
   ============================================================ */

/* ── 背景: 初期状態（is-loading）→ 表示（is-loaded）────────── */

/* ロード前: 非表示・拡大状態 */
#latte-page .lp-hero__bg.is-loading {
  opacity: 0;
  /* 初期スケールをラップ側（.lp-hero__bg）で持つ */
}

/* ロード後: フェードイン + ズームアウト */
#latte-page .lp-hero__bg.is-loaded {
  animation: heroFadeIn 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 背景画像自体のズームアウトアニメ */
#latte-page .lp-hero__bg.is-loaded .lp-hero__bg-img {
  animation: heroZoomOut 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes heroFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes heroZoomOut {
  0%   { transform: scale(1.06); }
  100% { transform: scale(1.0); }
}

/* ── ロゴ + パーティクル レイヤー ──────────────────────────── */

#latte-page .lp-hero__logo-layer {
  /* 背景(z:1)の上、UIバー(z:20)の下 */
  position:        absolute;
  inset:           0;
  z-index:         10;
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* ロゴを画面中央より少し上に配置（UIバーとの重なり防止） */
  padding-bottom:  clamp(6rem, 14vw, 10rem);
  pointer-events:  none; /* クリックをUIバーに透過 */
}

/* パーティクル canvas — ロゴと同位置に重ねる */
#latte-page .lp-hero__particle-canvas {
  position: absolute;
  /* サイズ・位置は JS で管理 */
  pointer-events: none;
}

/* ロゴ本体 */
#latte-page .lp-hero__logo-img {
  position:  relative; /* canvas より前面に来るよう z-index を持つ */
  z-index:   1;
  width:     clamp(260px, 82vw, 520px);
  height:    auto;
  /* 初期: 非表示。JS が .is-visible を付与してフェードイン */
  opacity:   0;
  transform: translateY(6px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  /* ドラッグ禁止・選択禁止 */
  user-select:   none;
  -webkit-user-select: none;
  /* filter でロゴの透明感を演出 */
  filter: drop-shadow(0 2px 24px oklch(0.75 0.18 210 / 0.45))
          drop-shadow(0 0 48px oklch(0.88 0.12 210 / 0.25));
}

#latte-page .lp-hero__logo-img.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* SP: ロゴを小さめに */
@media (max-width: 480px) {
  #latte-page .lp-hero__logo-img {
    width: clamp(260px, 82vw, 520px);
  }
  #latte-page .lp-hero__logo-layer {
    padding-bottom: clamp(5rem, 18vw, 8rem);
  }
}

/* ── ガラスUI バー: ロゴ後に浮かび上がる ───────────────────── */

#latte-page .lp-hero__bar-wrap.js-hero-bar {
  /* 初期: 下にオフセット + 透明 */
  opacity:   0;
  transform: translateY(12px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

#latte-page .lp-hero__bar-wrap.js-hero-bar.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* scroll インジケーターも同様に遅延フェード */
#latte-page .lp-hero__scroll {
  opacity:   0;
  transform: translateY(6px);
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}
#latte-page .lp-hero__scroll.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── アクセシビリティ: アニメ削減設定 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #latte-page .lp-hero__bg.is-loading,
  #latte-page .lp-hero__bg.is-loaded,
  #latte-page .lp-hero__bg.is-loaded .lp-hero__bg-img {
    animation: none !important;
    opacity:   1 !important;
    transform: none !important;
  }
  #latte-page .lp-hero__logo-img,
  #latte-page .lp-hero__bar-wrap.js-hero-bar,
  #latte-page .lp-hero__scroll {
    transition: none !important;
    opacity:    1 !important;
    transform:  none !important;
  }
}



/* 追従ヘッダーを中央寄せのガラスカプセル型にする */
#latte-page .lp-header {
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px));
  top: 16px;
}

#latte-page .lp-header__glass {
  border-radius: 999px;
  overflow: hidden;
}

/* スクロール後も全幅の帯にしない */
#latte-page .lp-header.is-scrolled,
#latte-page .lp-header.scrolled {
  width: min(1120px, calc(100% - 32px));
  left: 50%;
  transform: translateX(-50%);
  background: transparent !important;
}

/* WordPress管理バーがある時のズレ対策 */
body.admin-bar #latte-page .lp-header {
  top: 48px;
}

@media (max-width: 767px) {
  #latte-page .lp-header {
    width: calc(100% - 20px);
    top: 10px;
  }

  body.admin-bar #latte-page .lp-header {
    top: 56px;
  }
}



/* footer 余白削除 */

.l-content {
    margin: 0 auto 0em;
    padding-top: 2em;
    position: relative;
    z-index: 1;
}