/* ============================================================
   ANTE SALON — main.css v28
   PC / SP 両対応・UI/UX最適化
   清潔感・モノトーン・游フォント
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* ── Design Tokens ── */
:root {
  --white:    #FFFFFF;
  --off:      #FAFAFA;
  --bg:       #FFFFFF;
  --gray1:    #F5F5F5;
  --gray2:    #EBEBEB;
  --gray3:    #D8D8D8;
  --charcoal: #333333;
  --black:    #000000;
  --sub:      #666666;
  --muted:    #999999;
  --border:   #E5E5E5;
  --accent:   #555555;
  --line:     #06C755;
  --en:  'Cormorant Garamond', 'Yu Mincho', '游明朝', YuMincho, Georgia, serif;
  --ja:  'Yu Gothic', '游ゴシック', YuGothic, 'Noto Sans JP', sans-serif;
  --min: 'Yu Mincho', '游明朝', YuMincho, 'Noto Serif JP', Georgia, serif;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --inner:     1080px;
  --inner-sm:  720px;
  --inner-md:  880px;
  --px:        64px;
  --sec-py:    96px;
  --sp-bar:    56px; /* SP固定バーの高さ */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

/* ── Base ── */
.ante-page {
  font-family: var(--ja);
  color: var(--charcoal);
  background: var(--bg);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .02em;
  overflow-x: hidden;
}
.ante-page *, .ante-page *::before, .ante-page *::after { box-sizing: border-box; }
.ante-page img  { max-width: 100%; display: block; height: auto; object-fit: cover; }
.ante-page a    { text-decoration: none; color: inherit; }
.ante-page ul   { list-style: none; }
.ante-page p    { color: var(--charcoal); line-height: 1.9; font-family: var(--ja); }
.ante-page h1, .ante-page h2, .ante-page h3, .ante-page h4 {
  font-family: var(--min);
}

/* ── Layout ── */
.ante-page .inner,
.ante-page .inner-sm,
.ante-page .inner-md,
.ante-page .sec-inner,
.ante-page .sec-inner--sm,
.ante-page .fw-inner,
.ante-page .hc-inner,
.ante-page .hc-inner--sm,
.ante-page .mg-inner,
.ante-page .mg-inner--sm,
.ante-page .m-inner,
.ante-page .m-inner--sm,
.ante-page .s-inner,
.ante-page .s-inner--sm,
.ante-page .e-inner,
.ante-page .e-inner--sm {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--px) !important;
  padding-right: var(--px) !important;
  box-sizing: border-box !important;
}
.ante-page .inner    { max-width: var(--inner) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--px) !important; padding-right: var(--px) !important; }
.ante-page .inner--sm { max-width: var(--inner-sm) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--px) !important; padding-right: var(--px) !important; }
.ante-page .inner-sm { max-width: var(--inner-sm) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--px) !important; padding-right: var(--px) !important; }
.ante-page .inner-md { max-width: var(--inner-md) !important; }
.ante-page .sec-inner, .ante-page .fw-inner,
.ante-page .hc-inner,  .ante-page .mg-inner,
.ante-page .m-inner,   .ante-page .s-inner,
.ante-page .e-inner    { max-width: var(--inner) !important; }
.ante-page .sec-inner--sm, .ante-page .hc-inner--sm,
.ante-page .mg-inner--sm,  .ante-page .m-inner--sm,
.ante-page .s-inner--sm,   .ante-page .e-inner--sm
                           { max-width: var(--inner-sm) !important; }

.ante-page .sec        { padding: var(--sec-py) 0; }
.ante-page .sec--white { background: #FFFFFF; }
.ante-page .sec--off   { background: #FAFAFA; }
.ante-page .sec--gray  { background: #F5F5F5; }
.ante-page .sec--beige { background: #F5F5F5; }
.ante-page .sec--light { background: #F8F8F8; }

/* ── Typography ── */
.ante-page .sec-tag {
  font-family: var(--en);
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 400;
}
.ante-page .sec-title {
  font-family: var(--min);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.2;
  color: #000;
  margin-bottom: .4em;
}
.ante-page .sec-sub {
  font-size: .92rem;
  color: var(--sub);
  line-height: 1.8;
}
.ante-page .divider {
  width: 32px; height: 2px;
  background: #000;
  margin: 14px 0 22px;
}
.ante-page .divider--center { margin: 14px auto 22px; }
.ante-page .sec-head { text-align: center; margin-bottom: 48px; }
.ante-page .lead { font-size: 1rem; line-height: 2.1; color: var(--charcoal); font-family: var(--ja); }
.ante-page .lead strong { font-weight: 700; color: #000; }

/* ── Buttons ── */
.ante-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: .88rem;
  letter-spacing: .08em;
  font-family: var(--ja);
  font-weight: 500;
  transition: all .22s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.ante-page .btn--black   { background: #000; color: #fff; border: 1px solid #000; }
.ante-page .btn--black:hover { background: #333; }
.ante-page .btn--white   { background: #fff; color: #000; border: 1px solid #E5E5E5; }
.ante-page .btn--white:hover { background: #F5F5F5; }
.ante-page .btn--outline { border: 1.5px solid #000; color: #000; background: transparent; }
.ante-page .btn--outline:hover { background: #000; color: #fff; }
.ante-page .btn--outline-w { border: 1.5px solid rgba(255,255,255,.6); color: #fff; background: transparent; }
.ante-page .btn--outline-w:hover { background: rgba(255,255,255,.12); }
.ante-page .btn--ghost   { border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.9); background: transparent; }
.ante-page .btn--ghost:hover { background: rgba(255,255,255,.1); }
.ante-page .btn--line    { background: #06C755; color: #fff; border: none; }
.ante-page .btn--line:hover { background: #05b34c; }
.ante-page .btn--lg { padding: 16px 40px; font-size: .92rem; }
.ante-page .btn--sm { padding: 9px 20px; font-size: .8rem; }
.ante-page .btn--full { width: 100%; }
.ante-page .btn-link {
  font-size: .85rem; color: #000; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid #000; padding-bottom: 2px;
  transition: opacity .2s;
}
.ante-page .btn-link:hover { opacity: .5; }
.ante-page .cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ante-page .cta-row--center { justify-content: center; }

/* ── Header ── */
.ante-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9995;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.ante-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.07); }
.ante-header__logo {
  font-family: var(--en); font-size: .92rem; letter-spacing: .26em;
  font-weight: 500; color: #000; white-space: nowrap; flex-shrink: 0;
}
.ante-header__logo small { font-size: .46rem; color: var(--muted); display: block; letter-spacing: .1em; margin-top: 2px; }
.mega-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 0; list-style: none; flex: 1;
}
.mega-nav > li { position: relative; }
.mega-nav > li > a {
  display: flex; align-items: center; gap: 3px;
  font-size: .76rem; letter-spacing: .05em;
  color: var(--sub); padding: 0 12px; height: 64px;
  transition: color .2s; white-space: nowrap;
}
.mega-nav > li > a:hover, .mega-nav > li:hover > a { color: #000; }
.mega-nav > li > a.has-mega::after {
  content: ''; display: block; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); margin-left: 3px; opacity: .4; transition: transform .25s;
}
.mega-nav > li:hover > a.has-mega::after { transform: rotate(-135deg); }
.ante-header__btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ante-header__btn {
  padding: 7px 18px; font-size: .74rem; letter-spacing: .07em;
  text-decoration: none; transition: all .2s; font-family: var(--ja); font-weight: 500;
}
.ante-header__btn--rsv  { background: #000; color: #ffffff !important; }
.ante-header__btn--rsv:hover { background: #333; }
.ante-header__btn--line { background: var(--line); color: #fff; }

/* ハンバーガー — 右端固定 */
.ante-header__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
  flex-shrink: 0; margin-left: auto;
}
.ante-header__hamburger span {
  display: block; width: 22px; height: 1.5px; background: #000;
  transition: transform .3s, opacity .3s; border-radius: 2px;
}
.ante-header__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
.ante-header__hamburger.open span:nth-child(2) { opacity: 0; }
.ante-header__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }

/* ── Mega Dropdown ── */
.mega-dropdown {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); min-width: 520px; z-index: 200;
  background: #fff; border: 1px solid var(--border);
  border-top: 2px solid #000;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  padding: 22px 26px 18px;
  animation: megaIn .18s ease;
}
.mega-nav > li:last-child .mega-dropdown,
.mega-nav > li:nth-last-child(2) .mega-dropdown { left: auto; right: 0; transform: none; animation-name: megaInR; }
.mega-nav > li:hover .mega-dropdown { display: block; }
@keyframes megaIn { from{opacity:0;transform:translateX(-50%) translateY(-4px);}to{opacity:1;transform:translateX(-50%) translateY(0);} }
@keyframes megaInR{ from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);} }
.mega-grid { display: grid; gap: 1px; }
.mega-grid--3 { grid-template-columns: repeat(3,1fr); }
.mega-grid--4 { grid-template-columns: repeat(4,1fr); }
.mega-item { display: flex; flex-direction: column; padding: 12px 12px; transition: background .15s; gap: 3px; }
.mega-item:hover { background: #F5F5F5; }
.mega-item__icon { color: var(--accent); margin-bottom: 4px; }
.mega-item__icon svg { width: 15px; height: 15px; }
.mega-item__title { font-size: .8rem; color: #000; font-weight: 500; }
.mega-item__desc  { font-size: .68rem; color: var(--sub); line-height: 1.6; }
.mega-item__price { font-family: var(--en); font-size: .7rem; color: var(--accent); }
.mega-cta-bar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.mega-cta-bar a { font-size: .7rem; padding: 7px 14px; border: 1px solid var(--border); color: var(--sub); transition: all .2s; }
.mega-cta-bar a:hover { border-color: #000; color: #000; }
.mega-cta-bar a.primary { background: #000; border-color: #000; color: #fff; }
.mega-group-title { font-size: .63rem; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ── Drawer（SP右スライド） ── */
.ante-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.38);
  z-index: 9997; opacity: 0; pointer-events: none;
  transition: opacity .3s; visibility: hidden;
}
.ante-drawer-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }
.ante-drawer {
  position: fixed; top: 0; right: -110vw;
  width: 82vw; max-width: 300px; height: 100%;
  background: #fff; z-index: 9998;
  overflow-y: auto; overflow-x: hidden;
  transition: right .32s cubic-bezier(.25,.46,.45,.94);
  will-change: right;
}
.ante-drawer.open { right: 0 !important; }
.ante-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  height: 56px;
}
.ante-drawer__logo { font-family: var(--en); font-size: .88rem; letter-spacing: .22em; color: #000; font-weight: 500; }
.ante-drawer__close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--sub); line-height: 1; padding: 4px; }
.ante-drawer__body { padding: 16px 20px; }
.ante-drawer__nav li { border-bottom: 1px solid #F5F5F5; }
.ante-drawer__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; font-size: .9rem; color: var(--charcoal);
  font-family: var(--ja);
}
.ante-drawer__nav svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.ante-drawer__cta { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.ante-drawer__cta a {
  display: block; padding: 13px 16px; text-align: center;
  font-size: .86rem; letter-spacing: .07em; font-weight: 500;
}
.ante-drawer__cta-rsv  { background: #000; color: #fff; }
.ante-drawer__cta-line { background: var(--line); color: #fff; }

/* ── FV 共通（写真→右フェード型） ── */
.ante-page .fv {
  width: 100%; min-height: 92vh; padding-top: 0;  /* FV はヘッダーオフセット不要 */
  position: relative; overflow: hidden; background: #fff;
  display: flex; align-items: center;
}
.ante-page .fv-photo-fade {
  position: absolute; left: 0; top: 0; width: 55%; height: 100%; overflow: hidden;
}
.ante-page .fv-photo-fade::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 30%, rgba(255,255,255,.65) 52%, #fff 70%);
}
.ante-page .fv-photo-fade img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.ante-page .fv-ph-img {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  position: absolute; inset: 0; z-index: 0;
}
.ante-page .fv-ph-img svg  { width: 28px; height: 28px; color: #AAAAAA; opacity: .5; }
.ante-page .fv-ph-img span { font-size: .58rem; letter-spacing: .14em; color: #AAAAAA; text-transform: uppercase; }
.ante-page .fv-eyebrow {
  font-family: var(--en); font-size: .7rem; letter-spacing: .26em;
  color: var(--accent); margin-bottom: 14px; text-transform: uppercase;
}
.ante-page .fv-h1 {
  font-family: var(--en);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 500; color: #000; line-height: 1.08;
  letter-spacing: .04em; margin-bottom: 18px;
}
.ante-page .fv-h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.ante-page .fv-copy {
  font-size: .98rem; color: var(--charcoal); line-height: 1.9;
  margin-bottom: 8px; font-family: var(--ja);
}
.ante-page .fv-copy strong { font-weight: 700; color: #000; }
.ante-page .fv-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 28px; }
.ante-page .fv-badge {
  padding: 5px 12px; border: 1px solid var(--border);
  font-size: .72rem; letter-spacing: .05em;
  color: var(--charcoal); background: rgba(255,255,255,.9);
}
.ante-page .fv-badge--dark { background: #000; color: #fff; border-color: #000; }
.ante-page .fv-stats {
  display: flex; gap: 28px; margin-top: 36px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.ante-page .fv-stat-num {
  font-family: var(--en); font-size: 2rem; font-weight: 500;
  color: #000; line-height: 1; display: block;
}
.ante-page .fv-stat-label {
  font-size: .63rem; color: var(--muted); letter-spacing: .09em;
  margin-top: 5px; display: block;
}

/* ── サービスカード ── */
.ante-page .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); }
.ante-page .service-card {
  background: #fff; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: background .2s; overflow: hidden;
}
.ante-page .service-card:hover { background: #FAFAFA; }
.ante-page .service-photo { width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden; background: #EBEBEB; }
.ante-page .service-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ante-page .service-card:hover .service-photo img { transform: scale(1.04); }
.ante-page .service-photo-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.ante-page .service-photo-ph svg { width: 22px; height: 22px; color: #AAAAAA; opacity: .5; }
.ante-page .service-body { padding: 18px 18px 20px; flex: 1; }
.ante-page .service-tag { font-size: .63rem; letter-spacing: .16em; color: var(--accent); display: block; margin-bottom: 4px; text-transform: uppercase; font-weight: 500; }
.ante-page .service-name { font-family: var(--min); font-size: .98rem; font-weight: 500; color: #000; margin-bottom: 6px; }
.ante-page .service-desc { font-size: .84rem; color: var(--sub); line-height: 1.75; margin-bottom: 10px; }
.ante-page .service-price { font-family: var(--en); font-size: .88rem; color: var(--accent); }

/* ── FAQ ── */
.ante-page .faq-list { max-width: 720px; margin: 0 auto; }
.ante-page .faq-item { border-bottom: 1px solid var(--border); }
.ante-page .faq-q {
  padding: 18px 44px 18px 0; font-size: .95rem; font-weight: 500;
  cursor: pointer; list-style: none; position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  user-select: none; color: #000; font-family: var(--min);
}
.ante-page .faq-q::before { content: 'Q'; font-family: var(--en); font-size: .95rem; font-weight: 500; color: var(--accent); flex-shrink: 0; }
.ante-page .faq-q::after {
  content: ''; position: absolute; right: 10px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid #CCCCCC; border-bottom: 1.5px solid #CCCCCC;
  transform: translateY(-65%) rotate(45deg); transition: transform .3s;
}
.ante-page details[open] .faq-q::after { transform: translateY(-35%) rotate(-135deg); }
.ante-page .faq-a {
  padding: 4px 0 18px 28px; font-size: .9rem; line-height: 2;
  color: var(--sub); display: flex; gap: 14px; font-family: var(--ja);
}
.ante-page .faq-a::before { content: 'A'; font-family: var(--en); font-size: .95rem; color: #CCCCCC; flex-shrink: 0; }

/* ── アクセス ── */
.ante-page .shop-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ante-page .shop-map { width: 100%; aspect-ratio: 16/10; background: var(--gray2); border: 1px solid var(--border); overflow: hidden; }
.ante-page .shop-map iframe { width: 100%; height: 100%; border: 0; }
.ante-page .shop-rows { border-top: 1px solid var(--border); }
.ante-page .shop-row { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #F5F5F5; font-size: .88rem; }
.ante-page .shop-row dt { color: var(--muted); font-weight: 500; }
.ante-page .shop-row dd { color: var(--charcoal); }
.ante-page .shop-access { padding: 12px 16px; background: #F5F5F5; border-left: 2px solid #000; margin: 12px 0; }
.ante-page .shop-access p { font-size: .86rem; color: var(--sub); line-height: 1.85; }
.ante-page .shop-sns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ante-page .shop-sns-btn {
  padding: 8px 14px; border: 1px solid var(--border); font-size: .76rem;
  display: flex; align-items: center; gap: 6px; background: #fff; color: var(--charcoal); transition: border-color .2s;
}
.ante-page .shop-sns-btn:hover { border-color: #000; }

/* ── CTAバー（セクション間） ── */
.ante-page .cta-bar { padding: 36px 0; background: #F5F5F5; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ante-page .cta-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ante-page .cta-bar-text p:first-child { font-size: .95rem; font-weight: 700; color: #000; margin-bottom: 3px; font-family: var(--min); }
.ante-page .cta-bar-text p:last-child  { font-size: .82rem; color: var(--sub); }
.ante-page .cta-bar-btns { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Final CTA（全ページ統一・白背景） ── */
.ante-page .final-cta {
  padding: 96px 0 !important; text-align: center;
  background: #FAFAFA !important;
  border-top: 1px solid var(--border) !important;
}
.ante-page .final-cta * { color: inherit; }
.ante-page .final-cta-tag {
  font-family: var(--en); font-size: .7rem; letter-spacing: .24em;
  color: var(--accent); margin-bottom: 12px; text-transform: uppercase; display: block;
}
.ante-page .final-cta-title {
  font-family: var(--min);
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 500;
  color: #000 !important; letter-spacing: .04em; line-height: 1.5; margin-bottom: .5rem;
}
.ante-page .final-cta-sub {
  font-size: .9rem; color: var(--sub) !important;
  margin-bottom: 32px; line-height: 1.8;
}
.ante-page .final-cta-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* final-cta内のボタン上書き */
.ante-page .final-cta .btn--white {
  background: #000 !important; color: #fff !important; border-color: #000 !important;
}
.ante-page .final-cta .btn--ghost {
  border: 1.5px solid #000 !important; color: #000 !important; background: transparent !important;
}
.ante-page .final-cta .btn--ghost:hover { background: #000 !important; color: #fff !important; }

/* ── Footer ── */
.ante-footer { background: #000; color: #CCCCCC; padding: 52px var(--px) 24px; }
.ante-footer__grid { display: grid; grid-template-columns: 200px repeat(4,1fr); gap: 36px; max-width: var(--inner); margin: 0 auto 32px; }
.ante-footer__logo { font-family: var(--en); font-size: .88rem; letter-spacing: .22em; color: #fff; margin-bottom: 8px; }
.ante-footer .ante-footer__sub {
  font-size: .66rem;
  color: #cccccc;  /* 詳細度0-2-0: 親テーマの上書きを防止 */
  line-height: 1.8;
}
.ante-footer__col h4 { font-size: .63rem; letter-spacing: .14em; color: #AAAAAA; margin-bottom: 12px; text-transform: uppercase; }
.ante-footer__col a { color: #CCCCCC; font-size: .7rem; display: block; margin-bottom: 7px; transition: color .2s; }
.ante-footer__col a:hover { color: #fff; }
.ante-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; display: flex; justify-content: space-between; max-width: var(--inner); margin: 0 auto; font-size: .6rem; color: #999999; }

/* ── SP固定CTAバー ── */
.sp-cta-bar,
.m-sp-bar,
.mg-sp-bar,
.s-sp-bar,
.e-sp-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9999; background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.07);
}
.sp-cta-bar__btn,
.m-sp-btn, .mg-sp-btn, .s-sp-btn, .e-sp-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px; font-size: .6rem; letter-spacing: .04em; gap: 4px;
  border-right: 1px solid #F0F0F0; color: var(--charcoal); text-decoration: none;
}
.sp-cta-bar__btn:last-child,
.m-sp-btn:last-child, .mg-sp-btn:last-child, .s-sp-btn:last-child, .e-sp-btn:last-child { border-right: none; }
.sp-cta-bar__btn svg, .m-sp-btn svg, .mg-sp-btn svg, .s-sp-btn svg, .e-sp-btn svg { width: 17px; height: 17px; }
.sp-cta-bar__btn--rsv,  .m-sp-btn--rsv,  .mg-sp-btn--rsv,  .s-sp-btn--rsv,  .e-sp-btn--rsv  { background: #000; color: #fff; }
.sp-cta-bar__btn--line, .m-sp-btn--line, .mg-sp-btn--line, .s-sp-btn--line, .e-sp-btn--line { background: #06C755; color: #fff; }

/* ── コントラスト強制 ── */
.ante-page .what-img-badge { background: #000 !important; color: #fff !important; }
.ante-page .peel-dark .peel-title-en,
.ante-page .peel-dark h2,
.ante-page .peel-dark h3 { color: #fff !important; }
.ante-page .peel-dark p,
.ante-page .peel-dark li { color: rgba(255,255,255,.8) !important; }
.ante-page .peel-dark .peel-tag { color: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.3) !important; }

/* ── Scroll animation ── */
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE — SP最適化
   ============================================================ */

/* 1200px */
@media (max-width: 1200px) {
  :root { --px: 48px; }
  .mega-dropdown { min-width: 460px; }
  .ante-header { padding: 0 32px; }
}

/* 1024px — タブレット */
@media (max-width: 1024px) {
  :root { --px: 40px; }
  /* ヘッダー */
  .ante-header { padding: 0 32px; }
  .ante-header nav, .mega-nav, .ante-header__btns { display: none !important; }
  .ante-header__hamburger { display: flex !important; }
  /* FV */
  .ante-page .fv-photo-fade { width: 50%; }
  /* グリッド */
  .ante-page .service-grid { grid-template-columns: 1fr 1fr; }
  .ante-page .shop-layout  { grid-template-columns: 1fr; gap: 28px; }
  .ante-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ante-footer { padding: 40px 40px 24px; }
}

/* 768px — スマホ */
@media (max-width: 768px) {
  :root { --px: 20px; --sec-py: 64px; }

  /* ── ヘッダー ── */
  .ante-header { padding: 0 16px !important; height: 56px; }
  .ante-header__logo { font-size: .8rem; letter-spacing: .2em; }
  .ante-header__logo small { display: none; }
  .ante-header nav, .mega-nav, .ante-header__btns { display: none !important; }
  .ante-header__hamburger { display: flex !important; flex-shrink: 0; margin-left: auto; }

  /* ── 全体 ── */
  .ante-page { font-size: 14px; overflow-x: hidden !important; }
  .ante-page { padding-bottom: var(--sp-bar) !important; }

  /* ── FV — 縦積み ── */
  .ante-page .fv { min-height: auto; flex-direction: column; }
  .ante-page .fv-photo-fade {
    position: relative; left: auto; top: auto;
    width: 100%; height: 220px; flex-shrink: 0;
  }
  .ante-page .fv-photo-fade::after {
    background: linear-gradient(to bottom, transparent 50%, rgba(255,255,255,.7) 80%, #fff 100%);
  }
  .ante-page .fv-ph-img { height: 220px; }
  .ante-page .fv-h1 { font-size: clamp(1.8rem, 7.5vw, 2.6rem) !important; margin-bottom: 14px; }
  .ante-page .fv-copy { font-size: .92rem; }
  .ante-page .fv-badges { gap: 5px; margin: 14px 0 20px; }
  .ante-page .fv-badge { font-size: .68rem; padding: 4px 10px; }
  .ante-page .fv-stats { gap: 20px; margin-top: 24px; padding-top: 20px; }
  .ante-page .fv-stat-num { font-size: 1.6rem; }

  /* ── CTAボタン縦並び ── */
  .ante-page .cta-row { flex-direction: column !important; }
  .ante-page .cta-row .btn { width: 100% !important; max-width: 300px; }
  .ante-page .cta-row--center .btn { margin: 0 auto; }
  .ante-page .btn--lg { padding: 15px 24px !important; font-size: .88rem !important; }

  /* ── グリッド ── */
  .ante-page .service-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .ante-page .shop-layout  { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* ── CTAバー ── */
  .ante-page .cta-bar-inner { flex-direction: column; gap: 14px; }
  .ante-page .cta-bar-btns  { flex-direction: column; width: 100%; }
  .ante-page .cta-bar-btns .btn { width: 100%; }

  /* ── Final CTA ── */
  .ante-page .final-cta { padding: 64px 0 !important; }
  .ante-page .final-cta-btns { flex-direction: column; align-items: center; gap: 10px; }
  .ante-page .final-cta-btns .btn { width: 100%; max-width: 280px; }

  /* ── フッター ── */
  .ante-footer { padding: 36px 20px 24px; }
  .ante-footer__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ante-footer__bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* ── SP固定バー 表示 ── */
  .sp-cta-bar,
  .m-sp-bar, .mg-sp-bar, .s-sp-bar, .e-sp-bar { display: flex !important; }

  /* ── インラインgrid崩れ防止 ── */
  /* 4列以上を2列に */
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(5"],[style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(6"],[style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3,1fr) !important; }
  /* 3列を2列に（写真グリッド以外） */
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2,1fr) !important; }
  /* 2カラム（広い）を1カラムに */
  [style*="grid-template-columns:1fr 1fr;gap:80"],[style*="gap:72"],[style*="gap:64"] { grid-template-columns: 1fr !important; }
  /* oem-layout */
  [style*="grid-template-columns:1fr 1fr;gap:64"] { grid-template-columns: 1fr !important; }

  /* ── suikou/ear固有 ── */
  .s-hero-photo, .e-hero-photo { display: none !important; }
  .s-hero-content, .e-hero-content { width: 100% !important; max-width: 100% !important; padding: 36px 20px 40px !important; margin-left: 0 !important; }
  .s-concern-grid, .e-concern-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .s-drug-grid    { grid-template-columns: 1fr !important; }
  .s-ba-grid      { grid-template-columns: 1fr 1fr !important; }
  .s-review-grid, .e-review-grid { grid-template-columns: 1fr !important; }
  .s-step-flow, .e-step-flow { flex-direction: column !important; gap: 16px !important; }
  .s-step-flow::before, .e-step-flow::before { display: none !important; }
  .s-parts-grid   { grid-template-columns: 1fr 1fr !important; }
  .e-feat-grid    { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .e-design-grid  { grid-template-columns: 1fr 1fr !important; }
  .s-cta-bar-inner, .e-cta-bar-inner { flex-direction: column !important; gap: 14px !important; }
  .s-cta-bar-btns, .e-cta-bar-btns  { flex-direction: column !important; width: 100% !important; }
  .s-cta-bar-btns .btn, .e-cta-bar-btns .btn { width: 100% !important; }
  .s-access-layout, .e-access-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .s-compare-table { font-size: .78rem; }
  .s-compare-table th, .s-compare-table td { padding: 10px 10px; }

  /* ── hc/mg/m/yomogi ── */
  .hc-inner, .hc-inner--sm,
  .mg-inner, .mg-inner--sm,
  .m-inner,  .m-inner--sm { padding: 0 20px !important; }
  .m-fv    { flex-direction: column !important; min-height: auto !important; }
  .m-fv-right  { display: none !important; }
  .m-fv-left   { padding: 32px 20px 36px !important; width: 100% !important; }
  .m-blend-grid, .m-effect-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mg-hero-inner { flex-direction: column !important; padding: 48px 20px 40px !important; }
  .mg-herbs-grid { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .mg-merit-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .mg-support-grid { grid-template-columns: 1fr 1fr !important; }
  .mg-set-grid   { grid-template-columns: 1fr !important; }
  .mg-set-body   { padding: 18px !important; }
  .mg-set-head   { padding: 20px !important; }
  .mg-cta-row    { flex-direction: column !important; }
  .mg-cta-row .mg-btn { width: 100% !important; max-width: 300px; }

  /* ── salon-index ── */
  .s-concept-inner  { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  .s-strength-grid  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .s-service-grid   { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .s-ba-grid        { grid-template-columns: 1fr 1fr !important; }
  .s-review-grid-r  { grid-template-columns: 1fr !important; }
  .s-about-inner    { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  .s-access-layout  { grid-template-columns: 1fr !important; }

  /* ── hero（各ページヘッダー）── */
  [class^="hero-"] {
    min-height: auto !important;
    flex-direction: column !important;
  }
  [class^="hero-"] > div:first-child {
    position: relative !important; top: auto !important; left: auto !important;
    width: 100% !important; height: 200px !important;
  }
  [class^="hero-"] > div:nth-child(2) {
    background: linear-gradient(to bottom, transparent 30%, rgba(255,255,255,.7) 60%, #fff 85%) !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 200px !important;
    /* グラデーションのみ */
    background-image: linear-gradient(to bottom, transparent 30%, rgba(255,255,255,.8) 70%, #fff 100%) !important;
  }
  [class^="hero-"] > div:nth-child(3) {
    position: relative !important; z-index: 1 !important;
    width: 100% !important; max-width: 100% !important;
    padding: 24px 20px 28px !important; margin-left: 0 !important;
    margin-top: 0 !important;
  }
  /* biz-grid */
  .biz-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .treat-row { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .ws-row    { grid-template-columns: 1fr !important; }
  .crea-row  { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .oem-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .oem-items { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .oem-photos { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  /* compare-table 横スクロール */
  .s-compare-table { display: block; overflow-x: auto; white-space: nowrap; }
  .s-compare-table th, .s-compare-table td { min-width: 100px; }

  /* innerクラス全種 SP */
  .ante-page .inner,    .ante-page .inner-sm,
  .ante-page .inner-md, .ante-page .sec-inner,
  .ante-page .sec-inner--sm, .ante-page .fw-inner,
  .ante-page .hc-inner, .ante-page .hc-inner--sm,
  .ante-page .mg-inner, .ante-page .mg-inner--sm,
  .ante-page .m-inner,  .ante-page .m-inner--sm,
  .ante-page .s-inner,  .ante-page .s-inner--sm,
  .ante-page .e-inner,  .ante-page .e-inner--sm {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 480px — 小型スマホ */
@media (max-width: 480px) {
  :root { --px: 16px; }
  .ante-header { padding: 0 14px !important; }
  .ante-page .fv-h1 { font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important; }
  .ante-page .btn--lg { padding: 13px 20px !important; font-size: .84rem !important; }
  /* 2列→1列（小型SP） */
  .ante-page .service-grid { grid-template-columns: 1fr !important; }
  .biz-grid { grid-template-columns: 1fr 1fr !important; }
  .e-feat-grid { grid-template-columns: 1fr 1fr !important; }
  .ante-footer__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   游フォント 明示的適用
   ============================================================ */
.ante-page,
.ante-page p,
.ante-page li,
.ante-page span,
.ante-page td,
.ante-page th,
.ante-page button,
.ante-page input,
.ante-page .btn,
.ante-page .sec-sub,
.ante-page .lead,
.ante-page .faq-a,
.ante-page .shop-row,
.ante-page .review-text,
.ante-page .service-desc,
.ante-page .biz-desc,
.ante-page .ws-desc {
  font-family: 'Yu Gothic','游ゴシック',YuGothic,'Noto Sans JP',sans-serif !important;
}
.ante-page h1,
.ante-page h2,
.ante-page h3,
.ante-page h4,
.ante-page .sec-title,
.ante-page .fv-h1,
.ante-page .page-hero__h1,
.ante-page .biz-title,
.ante-page .service-name,
.ante-page .treat-ja,
.ante-page .ws-name,
.ante-page .feat-title,
.ante-page .crea-name,
.ante-page .final-cta-title,
[class*="-title"]:not(.sec-tag):not(.mega-group-title),
[class*="-name"]:not(.ante-header__logo) {
  font-family: 'Yu Mincho','游明朝',YuMincho,'Noto Serif JP',Georgia,serif !important;
}
.ante-page .sec-tag,
.ante-page .fv-eyebrow,
.ante-page .treat-en,
.ante-page .service-tag,
.ante-page .biz-label,
.ante-page .ws-cat,
.ante-page .fv-stat-num,
.ante-page .ante-header__logo {
  font-family: 'Cormorant Garamond','Yu Mincho','游明朝',YuMincho,Georgia,serif !important;
}

/* ============================================================
   UI/UX 追加改善 v30
   ============================================================ */

/* フォーカスアクセシビリティ */
.ante-page *:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.ante-page .btn:focus-visible,
.ante-page a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* ボタンタップ領域の確保（SP） */
@media (max-width: 768px) {
  .ante-page .btn { min-height: 48px; }
  .ante-page .btn--sm { min-height: 40px; }
  .ante-page .faq-q { min-height: 48px; }
  .ante-page .mega-nav > li > a { min-height: 48px; }
  .ante-page .shop-sns-btn { min-height: 44px; }
  /* sp-barボタン */
  .sp-cta-bar__btn,
  .cr-sp-btn,
  .h-sp-btn,
  .s-sp-btn,
  .e-sp-btn,
  .m-sp-btn,
  .mg-sp-btn,
  .md-sp-btn { min-height: 56px; }
}

/* テキスト選択色 */
.ante-page ::selection { background: #000; color: #fff; }

/* スクロールバー（Webkit） */
.ante-page ::-webkit-scrollbar { width: 6px; height: 6px; }
.ante-page ::-webkit-scrollbar-track { background: #F5F5F5; }
.ante-page ::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 3px; }
.ante-page ::-webkit-scrollbar-thumb:hover { background: #999; }

/* 画像ホバー */
.ante-page .cr-service-card:hover .cr-service-icon,
.ante-page .h-merit-card:hover .h-merit-icon,
.ante-page .md-service-card:hover .md-service-icon {
  background: #000;
  transition: background .25s;
}
.ante-page .cr-service-card:hover .cr-service-icon svg,
.ante-page .h-merit-card:hover .h-merit-icon svg,
.ante-page .md-service-card:hover .md-service-icon svg {
  color: #fff;
}

/* テーブル横スクロール（SP） */
@media (max-width: 768px) {
  .ante-page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ante-page table::-webkit-scrollbar { height: 4px; }
}

/* セクション間のスムーズな視覚的区切り */
.ante-page .sec + .sec,
.ante-page .sec + .cta-bar,
.ante-page .cta-bar + .sec { border-top: none; }

/* インラインgrid SP最終調整 */
@media (max-width: 768px) {
  /* 対応業種8グリッド → 2列 */
  div[style*="grid-template-columns:repeat(4,1fr);gap:1px;background:#E5E5E5"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 対応業種の各カードpadding縮小 */
  div[style*="grid-template-columns:repeat(4,1fr);gap:1px"] > div {
    padding: 16px 14px !important;
  }
}

/* コントラスト最終保証 */
.ante-page [style*="background:#000"] *:not(button):not(.btn):not(svg):not(path):not(polyline):not(line):not(rect):not(circle),
.ante-page [style*="background:#000000"] *:not(button):not(.btn):not(svg):not(path):not(polyline):not(line):not(rect):not(circle) {
  color: inherit;
}
/* 黒背景クラス内のテキストは白 */
.ante-page .h-price-head *,
.ante-page .h-peel-head--dark * { color: #FFFFFF !important; }
.ante-page .h-price-head svg,
.ante-page .h-peel-head--dark svg { stroke: rgba(255,255,255,.7) !important; }
/* 明るい背景のテキストは黒 */
.ante-page .sec--white p:not([style]),
.ante-page .sec--off p:not([style]),
.ante-page .sec--gray p:not([style]) { color: #333333; }


/* ── 統一FAQ（全ページ共通） ── */
.ante-faq-wrap{max-width:720px;margin:0 auto;}
.ante-faq-item{border-bottom:1px solid #E5E5E5;}
.ante-faq-q{padding:18px 48px 18px 0;font-size:.95rem;font-weight:500;cursor:pointer;list-style:none;position:relative;display:flex;gap:14px;align-items:flex-start;user-select:none;color:#000;font-family:'Yu Mincho','游明朝',YuMincho,Georgia,serif;}
.ante-faq-q::before{content:'Q';font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;font-weight:500;color:#555555;flex-shrink:0;}
.ante-faq-q::after{content:'';position:absolute;right:10px;top:50%;width:9px;height:9px;border-right:1.5px solid #CCCCCC;border-bottom:1.5px solid #CCCCCC;transform:translateY(-65%) rotate(45deg);transition:transform .3s;}
details[open] .ante-faq-q::after{transform:translateY(-35%) rotate(-135deg);}
.ante-faq-a{padding:4px 0 18px 30px;font-size:.9rem;line-height:2;color:#666666;display:flex;gap:14px;font-family:'Yu Gothic','游ゴシック',YuGothic,sans-serif;}
.ante-faq-a::before{content:'A';font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;color:#CCCCCC;flex-shrink:0;}

@media(max-width:768px){
  .ante-faq-wrap{padding:0 !important;}
}

/* 施術フロー SP 2カラム */
@media(max-width:768px){
  .hp-flow-list,.s-step-flow,.e-step-flow,.m-step-flow,.mg-step-flow,.hc-step-flow,
  .cr-flow,.wx-flow-list,.yu-flow-list,.ear-flow-list{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:0 !important;
  }
  .hp-flow-item,.s-step,.e-step,.m-flow-step,.mg-flow-step,.hc-flow-step,
  .cr-flow-step,.wx-flow-step,.yu-flow-step{
    width:50% !important;
    flex:0 0 50% !important;
    padding-bottom:20px !important;
  }
  .hp-flow-item::after,
  .s-step-flow::before,.e-step-flow::before,.m-step-flow::before,
  .cr-flow::before{display:none !important;}
}


/* ── 全ページ共通 SP inner padding 最終保証 ── */
@media(max-width:768px){
  /* 全innerクラスのSP左右padding強制 */
  [class$="-inner"],[class$="-inner--sm"],
  .ante-faq-wrap,.faq-list,
  .cr-service-grid,.cr-flow,
  .wx-parts-grid,.wx-option-grid,
  .wx-thin-grid,.wx-compare-table,
  .hp-inner,.hp-inner--sm,
  .h-inner,.h-inner--sm,
  .md-inner,.md-inner--sm,
  .s-inner,.s-inner--sm,
  .e-inner,.e-inner--sm,
  .mg-inner,.mg-inner--sm,
  .m-inner,.m-inner--sm {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  /* 施術フロー 2カラム最終保証 */
  .hp-flow-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .hp-flow-item {
    padding-bottom: 20px !important;
  }
  .hp-flow-item::after { display: none !important; }
  /* ステップ系2カラム */
  .s-step-flow, .e-step-flow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .s-step-flow::before, .e-step-flow::before { display: none !important; }
  /* Swiper */
  .ante-ba-swiper .swiper-slide { width: 240px !important; }
  .yomogi-ba-swiper .swiper-slide { width: 240px !important; }
  .ear-ba-swiper .swiper-slide { width: 240px !important; }
  .hp-swiper .swiper-slide { width: 240px !important; }
}

/* ── ぶち抜き（fw）クラス 確実に全幅 ── */
.ante-page .fw,
.ante-page [class*=" fw"],
.ante-page [class^="fw"] {
  width: 100% !important;
  max-width: none !important;
  position: relative;
  overflow: hidden;
}
/* salon-index 固有 */
.ante-page .s-services.fw,
.ante-page .s-ba.fw,
.ante-page .s-strength.fw,
.ante-page .s-concept.fw,
.ante-page .s-access.fw,
.ante-page .s-review.fw,
.ante-page .s-cta.fw {
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


/* ── z-index 階層整理 ── */
/* ドロワーが最前面 */
.ante-drawer-overlay { z-index: 9997 !important; }
.ante-drawer          { z-index: 9998 !important; }
/* ヘッダー */
.ante-header          { z-index: 9995 !important; }
/* SP固定CTAバー（ドロワーより下） */
.sp-cta-bar,
.hp-sp-bar, .wx-sp-bar, .cr-sp-bar,
.h-sp-bar, .s-sp-bar, .e-sp-bar,
.m-sp-bar, .mg-sp-bar, .mn-sp-bar,
.md-sp-bar { z-index: 9996 !important; }
/* ドロワーが開いているとき固定バーを隠す */
body.drawer-open .sp-cta-bar,
body.drawer-open .hp-sp-bar,
body.drawer-open .wx-sp-bar,
body.drawer-open .cr-sp-bar,
body.drawer-open .h-sp-bar,
body.drawer-open .s-sp-bar,
body.drawer-open .e-sp-bar,
body.drawer-open .m-sp-bar,
body.drawer-open .mg-sp-bar,
body.drawer-open .mn-sp-bar,
body.drawer-open .md-sp-bar { z-index: 1 !important; }

/* ── SP崩れ防止 / salon-index fw 横スクロール対策 ── */
html, body { overflow-x: hidden !important; }
.ante-page .fw {
  /* 親のoverflowを尊重しつつぶち抜き */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
  overflow: hidden !important;
}
/* fw内部のinnerは通常幅 */
.ante-page .fw > .s-inner,
.ante-page .fw > .s-inner--sm {
  left: auto !important;
  transform: none !important;
  width: 100% !important;
}


/* ── Swiper SP 中央表示 ── */
.swiper-pagination {
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.swiper-pagination-bullet { flex-shrink: 0; }
/* SP: スライドを中央に見せる */
@media(max-width: 768px) {
  /* swiperコンテナに左右対称のpadding */
  .swiper {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  /* ただしpaddingを入れると幅が縮むため補正 */
  .swiper-wrapper { align-items: stretch; }
}

/* ── 美容商材卸 メガメニュー 幅修正 ── */
.mega-nav > li > .mega-dropdown { min-width: 700px; }
.mega-grid[style*="repeat(5"] { min-width: 700px; }
.mega-grid[style*="repeat(5"] .mega-item { min-width: 120px; }
@media(max-width:1100px) {
  .mega-grid[style*="repeat(5"] { grid-template-columns: repeat(3,1fr) !important; }
}

/* ================================================================
   SP ドロワー アコーディオン＆UI全面ブラッシュアップ
   ================================================================ */

/* ── ドロワー基本 ── */
.ante-drawer {
  position: fixed; top: 0; right: -110vw;
  width: 86vw; max-width: 320px; height: 100%;
  background: #fff; z-index: 9998 !important;
  transition: right .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
}
.ante-drawer.open { right: 0 !important; }

.ante-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #F0F0F0;
  flex-shrink: 0;
}
.ante-drawer__logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .9rem; letter-spacing: .22em; color: #000; font-weight: 500;
}
.ante-drawer__close {
  background: none; border: none; cursor: pointer;
  font-size: 1.2rem; color: #AAA; padding: 4px; line-height: 1;
  transition: color .2s;
}
.ante-drawer__close:hover { color: #000; }

.ante-drawer__body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── CTAボタン（ドロワー上部） ── */
.ante-drawer__cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #F0F0F0;
  flex-shrink: 0;
}
.ante-drawer__cta-rsv {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 8px; background: #000; color: #ffffff !important;
  font-size: .74rem; font-weight: 500; letter-spacing: .08em;
  text-decoration: none; text-align: center;
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  transition: background .2s;
}
.ante-drawer__cta-rsv:hover { background: #222; }
.ante-drawer__cta-line {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 8px; background: #06C755; color: #ffffff !important;
  font-size: .74rem; font-weight: 500; letter-spacing: .08em;
  text-decoration: none; text-align: center;
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  transition: background .2s;
}
.ante-drawer__cta-line:hover { background: #05B34D; }

/* ── アコーディオングループ ── */
.ante-drawer__nav { padding: 0; }

.dr-group { border-bottom: 1px solid #F5F5F5; }

.dr-group__head {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; text-align: left;
  font-family: 'Yu Mincho', '游明朝', YuMincho, Georgia, serif;
  font-size: .88rem; font-weight: 500; color: #000;
  user-select: none; transition: background .15s;
}
.dr-group__head:hover { background: #FAFAFA; }
.dr-group__icon { flex-shrink: 0; display: flex; align-items: center; }
.dr-group__icon svg { width: 16px; height: 16px; color: #555; }
.dr-group__label { flex: 1; }
.dr-group__arrow {
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid #CCC; border-bottom: 1.5px solid #CCC;
  transform: rotate(45deg); transition: transform .3s;
  margin-right: 4px;
}
.dr-group__head[aria-expanded="true"] .dr-group__arrow {
  transform: rotate(-135deg);
}

/* サブメニュー */
.dr-group__body {
  list-style: none; max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  background: #FAFAFA;
}
.dr-group__body.open { max-height: 400px; }
.dr-group__body li { border-top: 1px solid #F0F0F0; }
.dr-group__body li:first-child { border-top: 1px solid #EBEBEB; }
.dr-group__body a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 28px;
  font-size: .82rem; color: #444; text-decoration: none;
  font-family: 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
  transition: color .15s, background .15s;
}
.dr-group__body a:hover { color: #000; background: #F0F0F0; }
.dr-group__body a svg { width: 14px; height: 14px; color: #999; flex-shrink: 0; }

/* ── 単独リンク群 ── */
.dr-singles { padding: 8px 0; border-bottom: 1px solid #F5F5F5; }
.dr-single {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  font-size: .88rem; font-weight: 500; color: #000;
  text-decoration: none;
  font-family: 'Yu Mincho', '游明朝', YuMincho, Georgia, serif;
  border-bottom: 1px solid #F8F8F8;
  transition: background .15s;
}
.dr-single:last-child { border-bottom: none; }
.dr-single:hover { background: #FAFAFA; }
.dr-single svg { width: 16px; height: 16px; color: #555; flex-shrink: 0; }
.dr-single span { flex: 1; }

/* ================================================================
   SP FV（ファーストビュー）画像最適化
   ================================================================ */
@media(max-width: 768px) {

  /* すべてのページのヒーロー写真エリア */
  .mn-hero-photo,
  .hp-hero-photo,
  .wx-hero-photo,
  .ct-hero-bg,
  .rv-hero-bg,
  .ws-hero-bg,
  .col-hero-bg,
  [class$="-hero-bg"],
  [class$="-hero-ph"],
  .hero-salon > div:first-child {
    height: 220px !important;
    min-height: 220px !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  /* object-fit 確実化 */
  [class$="-hero-photo"] img,
  [class$="-hero-bg"] img,
  .hero-salon img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ヒーロー全体の縦積み */
  [class$="-hero"],
  .ws-hero, .col-hero, .ct-hero, .rv-hero, .hero-salon {
    flex-direction: column !important;
    min-height: auto !important;
    padding-top: 64px !important;
  }

  /* ヒーローコンテンツ部分 */
  [class$="-hero-content"],
  .ws-hero-content, .col-hero-content,
  .ct-hero-content, .rv-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 22px 20px 36px !important;
  }

  /* グラデーションオーバーレイを縦方向に */
  [class$="-hero-photo"]::after,
  [class$="-hero-bg"]::after {
    background: linear-gradient(
      to bottom,
      transparent 40%,
      rgba(255,255,255,.7) 72%,
      #fff 92%
    ) !important;
  }
}

/* ================================================================
   SP 2カラム → 1カラム 解消
   ================================================================ */
@media(max-width: 768px) {

  /* 会社概要・アクセス */
  .si-access-grid,
  .mn-access,
  .ws-access,
  .hp-access-layout,
  .wx-access,
  .mx-access,
  [class$="-access-grid"],
  [class$="-access-layout"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Googleマップ */
  .si-map, .mn-map, .ws-map,
  .hp-access-layout .hp-map,
  [class$="-map"] {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  [class$="-map"] iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* 会社概要テーブル */
  .si-info-row,
  [class$="-info-row"],
  .si-info dl > div,
  dl.info-rows > div {
    grid-template-columns: 72px 1fr !important;
  }

  /* 医療提携バナー */
  #medical-partner > div > div {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 卸ページ サポートグリッド */
  .ws-support-grid,
  .ws-brand-grid {
    grid-template-columns: 1fr !important;
  }

  /* 各種2カラムコンテンツ */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   SP アイコン付きPCナビ統一
   ================================================================ */
.mega-nav > li > a {
  display: flex; align-items: center; gap: 5px;
}
.mega-nav > li > a svg {
  width: 14px; height: 14px; opacity: .65; flex-shrink: 0;
}

/* ================================================================
   バグ修正・UI全面ブラッシュアップ v38.1
   ================================================================ */

/* ① final-cta 内のボタン文字色 強制白（バグ修正） */
.ante-page .final-cta .btn,
.ante-page .final-cta .btn--black,
.ante-page .final-cta .btn--white,
.ante-page .final-cta a[class*="btn"] {
  color: #ffffff !important;
}
.ante-page .final-cta .btn--black,
.ante-page .final-cta .btn--white {
  background: #000 !important;
  border-color: #000 !important;
  color: #ffffff !important;
}
.ante-page .final-cta .btn--line {
  background: #06C755 !important;
  border-color: #06C755 !important;
  color: #ffffff !important;
}
/* ── Instagramボタン: final-cta内専用ルール ──
   href に "instagram" を含むリンクのみを対象にすることで
   WEB予約・LINEボタンへの影響をゼロにする。 */
.ante-page .final-cta a[href*="instagram"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
.ante-page .final-cta a[href*="instagram"]:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* ② ドロワー アコーディオン — 左揃え・インデント最終調整 */
.dr-group__head {
  justify-content: flex-start !important;
  text-align: left !important;
}
.dr-group__label {
  text-align: left !important;
}
.dr-group__body a {
  padding-left: 40px !important;  /* インデント：子メニュー右寄せ */
}
.dr-single {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ③ ドロワー CTAを最下部へ固定 */
.ante-drawer__body {
  display: flex;
  flex-direction: column;
}
.ante-drawer__nav {
  flex: 1;
}
.ante-drawer__cta {
  flex-shrink: 0;
  margin-top: auto;
  border-top: 1px solid #F0F0F0 !important;
  border-bottom: none !important;
}

/* ④ フォント統一 — ドロワー全体を游明朝に */
.ante-drawer__nav,
.dr-group__head,
.dr-group__label,
.dr-group__body a,
.dr-single,
.dr-single span {
  font-family: 'Yu Mincho', '游明朝', YuMincho, Georgia, serif !important;
}

/* ⑤ 金額・数字の游明朝適用 */
.treat-px,
.final-cta-title,
[class*="-price"],
[class*="-kpi-v"],
[class*="kpi-value"],
[class*="-price-"],
.ws-kpi-v,
.hp-price-table td:last-child,
.mn-price-table td:last-child {
  font-family: 'Cormorant Garamond', 'Yu Mincho', '游明朝', YuMincho, Georgia, serif !important;
  font-weight: 400 !important;
}

/* ⑥ Swiper ページネーション 中央揃え 再確認 */
.swiper-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

/* ⑦ SP: FV画像 縦伸び完全解消 */
@media(max-width: 768px) {

  /* ヒーロー写真エリア全統一 */
  .hp-hero-photo,
  .wx-hero-photo,
  .mn-hero-photo,
  .ws-hero-bg,
  .ct-hero-bg,
  .rv-hero-bg,
  .col-hero-bg,
  [class$="-hero-photo"],
  [class$="-hero-bg"] {
    height: 240px !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  /* ヒーロー内画像 */
  [class$="-hero-photo"] img,
  [class$="-hero-bg"] img,
  .hero-salon > div:first-child img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  /* グラデーション縦に */
  [class$="-hero-photo"]::after,
  [class$="-hero-bg"]::after {
    background: linear-gradient(
      to bottom,
      transparent 35%,
      rgba(255,255,255,.6) 68%,
      #fff 90%
    ) !important;
  }

  /* ヒーロー全体 縦積み */
  .hp-hero, .wx-hero, .mn-hero,
  .ws-hero, .ct-hero, .rv-hero, .col-hero {
    flex-direction: column !important;
    min-height: auto !important;
  }

  /* ヒーローテキスト部分 */
  .hp-hero-content, .wx-hero-content,
  .mn-hero-content, .ws-hero-content,
  .ct-hero-content, .rv-hero-content,
  .col-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-height: auto !important;
    padding: 22px 20px 36px !important;
  }

  /* ⑧ 2カラム → 1カラム 完全解消 */
  /* マップ+情報 */
  .si-access-grid,
  .mn-access,
  .hp-access-layout,
  [class$="-access-grid"],
  [class$="-access-layout"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* マップ自体 */
  [class$="-map"],
  .si-map, .mn-map, .hp-map {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    min-height: 0 !important;
  }
  [class$="-map"] iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }

  /* info-row の左ラベル幅 */
  [class$="-info-row"],
  .si-info-row {
    grid-template-columns: 72px 1fr !important;
    gap: 8px !important;
  }

  /* 医療提携バナー */
  #medical-partner > div > div,
  .ws-medical-banner,
  .ws-medical-grid,
  .ws-oem-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Swiper SP */
  .hp-swiper .swiper-slide,
  .si-swiper .swiper-slide,
  .wax-ba-swiper .swiper-slide,
  .mn-ba-swiper .swiper-slide,
  [class$="-ba-swiper"] .swiper-slide {
    width: 240px !important;
  }
}

/* ── ドロワー padding 統一 ── */
.ante-drawer__nav a {
  padding: 14px 16px !important;
}
/* 子メニューのみインデント上書き */
.dr-group__body a {
  padding: 14px 16px 14px 40px !important;
}

/* ── SP 施術フロー 縦1カラム確保 ── */
@media(max-width: 768px) {
  .hp-flow-list,
  .cr-flow-list,
  .ws-flow-list,
  .e-flow-list {
    display: flex !important;
    flex-direction: column !important;
  }
  .hp-flow-item,
  .cr-flow-item,
  .ws-flow-item,
  .e-flow-item {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    width: 100% !important;
  }
}

/* ── creative サービスカード アコーディオン表示 ── */
/* 最初の3件はそのまま表示、残りはJS制御 */
#cr-service-all {
  /* grids as is */
}

/* ── OEM product-grid を3×2 に ── */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
@media(max-width: 768px) {
  .product-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ================================================================
   統一 FV（First View）クラス — ante-fv
   トップページ以外の全ページ共通
   ================================================================ */
.ante-fv {
  width: 100%;
  min-height: 56vh;
  padding-top: 64px;
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
}
/* 左側写真エリア */
.ante-fv__photo {
  position: absolute;
  left: 0; top: 0;
  width: 56%; height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.ante-fv__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
/* 写真がない場合のプレースホルダー */
.ante-fv__photo-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #EBEBEB, #D8D8D8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 56vh;
}
.ante-fv__photo-ph svg  { color: #AAAAAA; opacity: .45; }
.ante-fv__photo-ph span { font-size: .56rem; letter-spacing: .14em; color: #AAAAAA; text-transform: uppercase; }
/* 右→左フェードオーバーレイ */
.ante-fv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 30%,
    rgba(255,255,255,.55) 48%,
    rgba(255,255,255,.92) 62%,
    #fff 76%
  );
  pointer-events: none;
  z-index: 1;
}
/* テキストエリア */
.ante-fv__content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 56%;
  max-width: 800px;
  padding: 56px 64px 56px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56vh;
}
.ante-fv__tag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .72rem;
  letter-spacing: .26em;
  color: #555;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.ante-fv__en {
  font-family: 'Cormorant Garamond', 'Yu Mincho', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 500;
  color: #000;
  letter-spacing: .05em;
  line-height: 1.08;
  margin-bottom: 10px;
}
.ante-fv__ja {
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
}
.ante-fv__desc {
  font-size: .9rem;
  color: #666;
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: 20px;
}
.ante-fv__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.ante-fv__badge {
  padding: 4px 12px;
  border: 1px solid #D8D8D8;
  font-size: .7rem;
  color: #555;
  font-family: 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
}
.ante-fv__badge--black {
  background: #000;
  border-color: #000;
  color: #fff;
  font-weight: 500;
}
.ante-fv__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* PC 中間サイズ */
@media(max-width: 1100px) {
  .ante-fv__content {
    padding: 56px 48px 56px 0;
    max-width: 680px;
  }
}
/* タブレット */
@media(max-width: 900px) {
  .ante-fv__photo { width: 50%; }
  .ante-fv__content { width: 60%; padding: 44px 32px 44px 0; }
}
/* SP */
@media(max-width: 768px) {
  .ante-fv {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .ante-fv__photo {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    height: 240px !important;
    flex-shrink: 0 !important;
  }
  .ante-fv__photo-ph { min-height: 240px !important; }
  .ante-fv::after {
    background: linear-gradient(
      to bottom,
      transparent 35%,
      rgba(255,255,255,.65) 65%,
      #fff 88%
    ) !important;
  }
  .ante-fv__content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-height: auto !important;
    padding: 22px 20px 36px !important;
  }
  .ante-fv__en { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
}

/* ================================================================
   既存 page-specific FV → ante-fv 統一スタイル上書き
   ================================================================ */
/* PC: 全ページFVの共通プロパティ */
.hp-hero, .wx-hero, .mn-hero, .s-hero, .e-hero,
.h-hero, .md-hero, .ws-hero, .col-hero,
.ct-hero, .rv-hero {
  min-height: 56vh !important;
  padding-top: 64px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 写真エリア：56%幅で絶対配置 */
.hp-hero-photo, .wx-hero-photo, .mn-hero-photo,
.s-hero-photo, .e-hero-photo, .h-hero-photo, .md-hero-photo,
.ws-hero-bg, .col-hero-bg, .ct-hero-bg, .rv-hero-bg {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 56% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* 写真 object-fit */
.hp-hero-photo img, .wx-hero-photo img, .mn-hero-photo img,
.s-hero-photo img, .e-hero-photo img, .h-hero-photo img,
.md-hero-photo img, .ws-hero-bg img, .col-hero-bg img,
.ct-hero-bg img, .rv-hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
}

/* フェードオーバーレイ 統一 */
.hp-hero::after, .wx-hero::after, .mn-hero::after,
.s-hero::after, .e-hero::after, .h-hero::after, .md-hero::after,
.ws-hero::after, .col-hero::after, .ct-hero::after, .rv-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to right,
    transparent 22%,
    rgba(255,255,255,.60) 44%,
    rgba(255,255,255,.90) 58%,
    #fff 72%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* テキストエリア：右側・最大幅800px */
.hp-hero-content, .wx-hero-content, .mn-hero-content,
.s-hero-content, .e-hero-content, .h-hero-content, .md-hero-content,
.ws-hero-content, .col-hero-content, .ct-hero-content, .rv-hero-content {
  position: relative !important;
  z-index: 2 !important;
  margin-left: auto !important;
  width: 56% !important;
  max-width: 800px !important;
  padding: 72px 64px 72px 0 !important;
  min-height: 56vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* タブレット */
@media(max-width: 900px) {
  .hp-hero-content, .wx-hero-content, .mn-hero-content,
  .s-hero-content, .e-hero-content, .h-hero-content, .md-hero-content,
  .ws-hero-content, .col-hero-content, .ct-hero-content, .rv-hero-content {
    width: 60% !important;
    padding: 48px 36px 48px 0 !important;
  }
}

/* SP: 縦積み統一 */
@media(max-width: 768px) {
  .hp-hero, .wx-hero, .mn-hero, .s-hero, .e-hero,
  .h-hero, .md-hero, .ws-hero, .col-hero,
  .ct-hero, .rv-hero {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .hp-hero-photo, .wx-hero-photo, .mn-hero-photo,
  .s-hero-photo, .e-hero-photo, .h-hero-photo, .md-hero-photo,
  .ws-hero-bg, .col-hero-bg, .ct-hero-bg, .rv-hero-bg {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    height: 240px !important;
    flex-shrink: 0 !important;
  }
  .hp-hero::after, .wx-hero::after, .mn-hero::after,
  .s-hero::after, .e-hero::after, .h-hero::after, .md-hero::after,
  .ws-hero::after, .col-hero::after, .ct-hero::after, .rv-hero::after {
    background: linear-gradient(
      to bottom,
      transparent 35%,
      rgba(255,255,255,.65) 65%,
      #fff 88%
    ) !important;
  }
  .hp-hero-content, .wx-hero-content, .mn-hero-content,
  .s-hero-content, .e-hero-content, .h-hero-content, .md-hero-content,
  .ws-hero-content, .col-hero-content, .ct-hero-content, .rv-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-height: auto !important;
    padding: 22px 20px 36px !important;
  }
}

/* トップFV text 白 */
.fv-content .fv-en   { color: #555 !important; }
.fv-content .fv-title{ color: #000 !important; }
.fv-content .fv-sub  { color: #555 !important; }

/* ── TOP FV テキスト（白オーバーレイ用） ── */
.ante-page .fv-title {
  font-family: 'Cormorant Garamond', 'Yu Mincho', '游明朝', YuMincho, Georgia, serif;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.ante-page .fv-en {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .72rem;
  letter-spacing: .26em;
  color: rgba(255,255,255,.6);
  margin-bottom: 12px;
  text-transform: uppercase;
  display: block;
}
.ante-page .fv-sub {
  font-size: .96rem;
  color: rgba(255,255,255,.75);
  line-height: 1.9;
  margin-bottom: 8px;
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
}

/* ── ロゴ 白黒切替 ── */
.logo-svg { display: block; }
.logo-svg--white { display: none; }
/* FV上（スクロール前）: ロゴを白に */
.ante-header--fv .logo-svg--dark  { display: none; }
.ante-header--fv .logo-svg--white { display: block; }
/* ヘッダー文字も白に（FV上のみ） */
.ante-header--fv .ante-header__logo { opacity: 1; }
/* FV上のナビ色はFV写真が暗い場合のみ適用 */
/* rsv btn FV override removed */


/* よもぎ ブレンド6枚 SP */
@media(max-width:768px){
  [style*="repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr)!important;}
}


/* ================================================================
   FV 統一微調整（CSSのみ・HTML変更なし）
   ================================================================ */

/* ── 全FVの高さを統一 ──
   TOP: 85vh / サブ全ページ: 60vh
   ※ページ固有の min-height を上書き
*/

/* TOP FV: min-height は front-page.php インラインCSSで制御 */

/* サブページ FV 全種 */
.hp-hero, .wx-hero, .mn-hero, .s-hero, .e-hero,
.h-hero, .md-hero, .ws-hero, .m-fv, .ante-fv,
.ct-hero, .rv-hero, .col-hero {
  min-height: 60vh !important;
  padding-top: 64px !important;
}

/* ── 写真幅を100%に（左寄りにならないよう修正） ── */
.hp-hero-photo, .wx-hero-photo, .mn-hero-photo,
.s-hero-photo,  .e-hero-photo,  .h-hero-photo,
.md-hero-photo, .ws-hero-bg, .m-fv-right,
.col-hero-bg,   .ct-hero-bg, .rv-hero-bg {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.hp-hero-photo img, .wx-hero-photo img, .mn-hero-photo img,
.s-hero-photo img,  .e-hero-photo img,  .h-hero-photo img,
.md-hero-photo img, .ws-hero-bg img, .m-fv-right img,
.col-hero-bg img,   .ct-hero-bg img, .rv-hero-bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
}

/* ── フェードを右側のみ（写真くっきり・テキスト側だけ白） ── */
.hp-hero-photo::after, .wx-hero-photo::after, .mn-hero-photo::after,
.s-hero-photo::after,  .e-hero-photo::after,  .h-hero-photo::after,
.md-hero-photo::after, .ws-hero-bg::after, .m-fv-right::after,
.col-hero-bg::after,   .ct-hero-bg::after, .rv-hero-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to right,
    transparent       0%,
    transparent      35%,
    rgba(255,255,255,.55) 52%,
    rgba(255,255,255,.88) 68%,
    #ffffff           80%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ── テキストエリアを右寄せ（左20%空けてテキスト） ── */
.hp-hero-content, .wx-hero-content, .mn-hero-content,
.s-hero-content,  .e-hero-content,  .h-hero-content,
.md-hero-content, .ws-hero-content, .m-fv-left,
.ct-hero-content, .rv-hero-content, .col-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 52% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 64px 0 0 !important;
  min-height: 60vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* hp-hero は既存の flex を引き継いでいるので親のみ指定 */
.hp-hero { display: flex !important; align-items: center !important; }

/* ── SP：写真250px + テキスト下 ── */
@media (max-width: 768px) {
  .hp-hero, .wx-hero, .mn-hero, .s-hero, .e-hero,
  .h-hero, .md-hero, .ws-hero, .m-fv,
  .ct-hero, .rv-hero, .col-hero {
    min-height: auto !important;
    flex-direction: column !important;
    background: #fff !important;
  }
  .hp-hero-photo, .wx-hero-photo, .mn-hero-photo,
  .s-hero-photo,  .e-hero-photo,  .h-hero-photo,
  .md-hero-photo, .ws-hero-bg, .m-fv-right,
  .col-hero-bg,   .ct-hero-bg, .rv-hero-bg {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 250px !important;
    flex-shrink: 0 !important;
  }
  .hp-hero-photo img, .wx-hero-photo img, .mn-hero-photo img,
  .s-hero-photo img,  .e-hero-photo img,  .h-hero-photo img,
  .md-hero-photo img, .ws-hero-bg img, .m-fv-right img,
  .col-hero-bg img,   .ct-hero-bg img, .rv-hero-bg img {
    height: 250px !important;
  }
  /* SP フェードは下方向 */
  .hp-hero-photo::after, .wx-hero-photo::after, .mn-hero-photo::after,
  .s-hero-photo::after,  .e-hero-photo::after,  .h-hero-photo::after,
  .md-hero-photo::after, .ws-hero-bg::after, .m-fv-right::after,
  .col-hero-bg::after,   .ct-hero-bg::after, .rv-hero-bg::after {
    background: linear-gradient(
      to bottom,
      transparent 30%,
      rgba(255,255,255,.65) 68%,
      #fff 90%
    ) !important;
  }
  /* SP テキスト: 全幅・白背景 */
  .hp-hero-content, .wx-hero-content, .mn-hero-content,
  .s-hero-content,  .e-hero-content,  .h-hero-content,
  .md-hero-content, .ws-hero-content, .m-fv-left,
  .ct-hero-content, .rv-hero-content, .col-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-height: auto !important;
    padding: 20px 20px 32px !important;
    background: #fff !important;
  }
}


/* ── front-page 専用レスポンシブ ── */
@media(max-width: 768px) {
  .treat-grid     { grid-template-columns: 1fr 1fr !important; }
  .biz-grid       { grid-template-columns: 1fr 1fr !important; }
  .ws-home-grid   { grid-template-columns: 1fr 1fr !important; }
  .oem-grid       { grid-template-columns: 1fr !important; }
  .oem-photos     { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width: 480px) {
  .treat-grid   { grid-template-columns: 1fr 1fr !important; }
  .ws-home-grid { grid-template-columns: 1fr !important; }
  .biz-grid     { grid-template-columns: 1fr 1fr !important; }
}

/* ── FAQ details/summary ずれ修正 ── */
.ante-page details.ante-faq-item,
.ante-page details.faq-item,
.ante-page details.ws-faq-item,
.ante-page details.m-faq-item,
.ante-page details.hp-faq-item,
.ante-page details.h-faq-item,
.ante-page details.s-faq-item,
.ante-page details.e-faq-item,
.ante-page details.cr-faq-item {
  border-bottom: 1px solid #E5E5E5 !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ante-page summary {
  padding: 16px 48px 16px 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: #000 !important;
  font-family: 'Yu Mincho','游明朝',YuMincho,Georgia,serif !important;
}
.ante-page summary::-webkit-details-marker { display: none !important; }
.ante-page summary::marker { display: none !important; }
/* デフォルトの▶アイコンを消して独自の∨に */
.ante-page summary::after {
  content: '' !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 9px !important; height: 9px !important;
  border-right: 1.5px solid #CCC !important;
  border-bottom: 1.5px solid #CCC !important;
  transform: translateY(-65%) rotate(45deg) !important;
  transition: transform .3s !important;
  flex-shrink: 0 !important;
}
.ante-page details[open] > summary::after {
  transform: translateY(-35%) rotate(-135deg) !important;
}

/* ================================================================
   PAGE HERO — 共通FVコンポーネント（template-parts/page-hero.php）
   ページごとの個別FV定義より後に記述することで上書き可能。
   ================================================================ */

/* ─ ベース ─ */
.page-hero {
  position: relative;
  width: 100%;
  height: 520px;          /* PC固定 */
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 64px;      /* ヘッダー分のオフセット */
  box-sizing: border-box;
}

/* ─ 背景画像 ─ */
.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  /* CLS対策: サイズ属性で事前確保 */
}

/* ─ 黒オーバーレイ ─ */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  pointer-events: none;
  z-index: 1;
}

/* ─ テキストエリア ─ */
.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.page-hero__tag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .7rem;
  letter-spacing: .26em;
  color: rgba(255, 255, 255, .65);
  text-transform: uppercase;
  display: block;
}

.ante-page .page-hero__title {
  /* 詳細度 0-2-0: .ante-page p (0-1-1) に確実に勝つ */
  font-family: 'Cormorant Garamond', 'Yu Mincho', '游明朝', YuMincho, Georgia, serif !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: .06em;
  line-height: 1.15;
  margin: 0;
  font-style: normal;
  /* テキストシャドウで背景画像に左右されず読める */
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

/* ─ タブレット ─ */
@media (max-width: 1024px) {
  .page-hero { height: 450px; }
}

/* ─ スマートフォン ─ */
@media (max-width: 768px) {
  .page-hero {
    height: 220px;
    padding-top: 56px;
  }
  .ante-page .page-hero__title {
    font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  }
}

/* SP: FV画像を上寄せ（顔・主役が見えるよう） */
@media (max-width: 768px) {
  .page-hero__img {
    object-position: center 20%;
  }
}

/* ── ロゴ画像サイズ制御 ──
   詳細度 0-2-0（親クラス + imgクラス）を使用。
   SWELLの img { height: auto } など詳細度0-0-1のリセットCSSに確実に勝つ。
   HTML width/height属性は表示サイズに合わせた値を設定（CLS対策）。 */
.ante-header__logo .ante-header__logo-img {
  display: block !important;
  height: 44px;
  width: auto;
  max-width: none;
  max-height: none;
}
.ante-drawer__logo .ante-drawer__logo-img {
  display: block !important;
  height: 30px;
  width: auto;
  max-width: none;
  max-height: none;
}
.ante-footer__logo {
  display: block;
  margin-bottom: 14px;
  text-decoration: none;
}
.ante-footer__logo .ante-footer__logo-img {
  display: block !important;
  height: 38px;
  width: auto;
  max-width: none;
  max-height: none;
}
@media(max-width:768px){
  .ante-header__logo .ante-header__logo-img { height: 34px; }
  .ante-drawer__logo .ante-drawer__logo-img { height: 26px; }
  .ante-footer__logo  .ante-footer__logo-img { height: 30px; }
}

/* sp-fixed-bar: 全デバイスで非表示（トップページのみ定義、削除済みだが念のためfallback） */
.sp-fixed-bar,
.sp-fixed-btn {
  display: none !important;
}

/* ── 画像PH共通: imgがある場合はPH（グレー背景）を隠す ──
   *-ph クラスに object-fit追加 + imgが来たらPHを背後に ── */
[class$="-ph"] {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* case-img-ph は相対位置 */
.case-img-ph {
  position: relative;
  inset: auto;
  z-index: 0;
}
/* case-img > img を最前面に */
.case-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

/* ── sr-only: スクリーンリーダー・クローラー向け非表示テキスト ──
   WAI-ARIA標準パターン。Googleのクローラーは読み取るが
   ユーザーには視覚的に表示されない。
   hidden属性・display:noneとは異なりSEO評価に影響しない。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}