/* =====================================================
   Hair salon Sample — オリジナルCSS
   (レイアウト・動きの雰囲気を参考に、コードはすべて自作)
   ===================================================== */
:root {
  --ink: #2c2c2c;
  --ink-soft: #555;
  --bg: #ffffff;
  --beige: #f0eee8;
  --pale-blue: #eef3f5;
  --ghost: #eae4db;
  --dark: #251f1a;
  --dark-2: #1a1512;
  --line: #d9d6cf;
  --dot: #e2e2e5;
  --en: "Sen", "Trebuchet MS", sans-serif;
  --en-accent: "Montserrat", sans-serif;
  --jp: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  --header-h: 104px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--jp);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid #9a7f66; outline-offset: 3px; }

.ic { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.4em; }
.ic-scissors { width: 26px; height: 13px; }

/* =====================================================
   ヘッダー
   ===================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
  padding: 0 0 0 40px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  transition: height 0.4s ease, box-shadow 0.4s ease;
}
.site-header.is-small { height: 72px; box-shadow: 0 2px 20px rgba(55,45,35,0.08); }

.brand {
  font-family: var(--en);
  font-size: 17px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  margin-right: auto;
  display: flex;
  align-items: center;
}
.brand img { display: block; width: 150px; height: auto; }

.global-nav ul { display: flex; gap: 34px; }
.global-nav a {
  display: block;
  text-align: center;
  line-height: 1.5;
  padding: 6px 0;
  position: relative;
}
.global-nav small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.global-nav span {
  font-family: var(--en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.global-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 0.35s ease, left 0.35s ease;
}
.global-nav a:hover::after, .global-nav a:focus-visible::after { width: 100%; left: 0; }

.header-cta { display: flex; align-items: stretch; height: 100%; }
.tel-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 26px;
  border-left: 1px solid var(--line);
  line-height: 1.6;
}
.tel-number { font-family: var(--en); font-size: 18px; letter-spacing: 0.06em; white-space: nowrap; }
.tel-hours { font-family: var(--en); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.1em; }

/* 予約ボタン(角形・黒) */
.reserve-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 150px;
  background: var(--dark);
  color: #fff;
  text-align: center;
  line-height: 1.5;
  transition: background 0.35s ease;
}
.reserve-btn:hover, .reserve-btn:focus-visible { background: #4a4038; }
.reserve-btn--line { background: #06c755; }
.reserve-btn--line:hover, .reserve-btn--line:focus-visible { background: #05a648; }
.reserve-btn__jp { font-size: 10px; letter-spacing: 0.2em; }
.reserve-btn__en {
  font-family: var(--en);
  font-size: 15px;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-toggle { display: none; flex-direction: column; gap: 6px; padding: 12px; margin-right: 12px; }
.nav-toggle span { width: 26px; height: 1px; background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease; }

/* =====================================================
   ヒーロー
   ===================================================== */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 16px) 0 120px;
}
.hero-copyright {
  position: absolute;
  left: 14px;
  top: 240px;
  writing-mode: vertical-rl;
  font-family: var(--en);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: #9a9a94;
}
.hero-stage {
  position: relative;
  margin: 0 0 0 34px;
  height: 620px;
  background:
    linear-gradient(120deg, #cfccc2 0%, #c4c1b6 45%, #b7b3a6 100%);
  overflow: visible;
}
/* 飛沫テクスチャ(自作PNG) */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../img/splatter.webp") center / cover;
  opacity: 0.85;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 4.5s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; }

.hero-panel { position: absolute; overflow: hidden; box-shadow: 0 14px 40px rgba(60,60,50,0.18); }
.hero-panel img { width: 100%; height: 100%; object-fit: cover; }
.hero-panel--a { left: 35%; top: -48px; width: 21.5%; height: 108%; }
.hero-panel--b { left: 58.5%; top: 8%; width: 21.5%; height: 86%; }
.hero-panel--c { left: 82%; top: -18%; width: 14.5%; height: 92%; }

.hero-message {
  position: absolute;
  left: 4%;
  top: 26%;
  z-index: 2;
  font-family: var(--en-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 2;
  color: var(--ink);
  width: 30em;
  max-width: 32vw;
}

/* 円形RESERVEバッジ */
.hero-reserve {
  position: absolute;
  left: 44px;
  bottom: 40px;
  z-index: 3;
  background: #fff;
  padding: 0 16px 18px;
  box-shadow: 0 10px 34px rgba(70,60,48,0.14);
  text-align: center;
}
.reserve-circle {
  position: relative;
  display: block;
  width: 156px;
  height: 156px;
  margin: -46px auto 30px;
}
.reserve-circle__ring {
  position: absolute;
  inset: -22px;
  width: 200px;
  height: 200px;
  animation: ring-rotate 26s linear infinite;
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }
.ring-text {
  font-family: var(--en-accent);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  fill: var(--ink);
}
.reserve-circle__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: background 0.35s ease;
}
.reserve-circle:hover .reserve-circle__body { background: #4a4038; }
.reserve-circle__body small { font-size: 10px; letter-spacing: 0.2em; }
.reserve-circle__body span { font-family: var(--en); font-size: 15px; letter-spacing: 0.12em; }

.hero-contact__tel {
  display: block;
  font-family: var(--en);
  font-size: 19px;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.hero-contact p { font-size: 10.5px; line-height: 1.8; color: var(--ink-soft); }

/* =====================================================
   セクション見出し・共通パーツ
   ===================================================== */
.sec-title {
  font-family: var(--en);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}
.sec-title--left { text-align: left; }
.sec-title .dots {
  display: block;
  font-size: 18px;
  letter-spacing: 0.3em;
  line-height: 1.4;
  color: var(--ink);
}

/* 下線ボタン */
.line-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--en);
  font-size: 14px;
  letter-spacing: 0.18em;
  padding-bottom: 4px;
  position: relative;
  white-space: nowrap;
}
.circle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: background 0.3s ease, color 0.3s ease;
}
.circle-arrow svg { width: 14px; height: 10px; }
.line-btn:hover .circle-arrow, .line-btn:focus-visible .circle-arrow { background: var(--ink); color: #fff; }
.line-btn--boxed {
  border: 1px solid var(--ink);
  padding: 12px 26px;
  justify-content: space-between;
  min-width: 190px;
  transition: background 0.3s ease, color 0.3s ease;
}
.line-btn--boxed:hover, .line-btn--boxed:focus-visible { background: var(--ink); color: #fff; }
.line-btn--boxed:hover .circle-arrow, .line-btn--boxed:focus-visible .circle-arrow { border-color: #fff; background: transparent; color: #fff; }

/* 丸型ナビボタン */
.circle-nav {
  width: 44px; height: 44px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.circle-nav svg { width: 16px; height: 12px; }
.circle-nav:hover, .circle-nav:focus-visible { background: var(--ink); color: #fff; }

/* 背景の大きなゴースト文字 */
.ghost {
  position: absolute;
  font-family: var(--en);
  font-size: clamp(300px, 40vw, 620px);
  line-height: 0.8;
  color: var(--ghost);
  z-index: -1;
  user-select: none;
}

/* スクロールでふわっと表示 */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.reveal.is-shown { opacity: 1; transform: none; }

/* =====================================================
   コンセプト
   ===================================================== */
.concept {
  position: relative;
  padding: 140px 6% 120px;
  overflow: clip;
}
.ghost--a { right: -4%; top: -40px; }
.ghost--b { left: -6%; top: 46%; }
.concept .sec-title { margin-bottom: 90px; }

.concept-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 130px;
}
.concept-block--rev .concept-text { order: 2; }
.concept-block--rev .concept-imgs { order: 1; }

.concept-text h3 {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2;
  margin-bottom: 28px;
  text-wrap: balance;
}
.concept-text p { margin-bottom: 16px; }
.en-note {
  font-family: var(--en-accent);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  line-height: 1.9;
}

.concept-imgs { position: relative; }
.ci { overflow: hidden; }
.ci img { transition: transform 0.7s ease; }
.ci:hover img { transform: scale(1.04); }
.ci-main { box-shadow: 0 14px 40px rgba(60,60,50,0.14); }
.ci-sub {
  position: absolute;
  width: 42%;
  right: -10%;
  bottom: -16%;
  box-shadow: 0 14px 40px rgba(60,60,50,0.14);
}
.ci-sub--left { right: auto; left: -10%; }

.deco-branch { position: absolute; width: 190px; height: auto; pointer-events: none; }
.deco-branch g { stroke: #8a9a7b; }
.deco-branch--r { right: -110px; top: -90px; }
.deco-branch--l { left: -120px; bottom: -90px; transform: rotate(14deg); }

.concept-last { grid-template-columns: 1fr 1.4fr; margin-bottom: 0; }

/* =====================================================
   ABOUT US(ハーフトーン背景)
   ===================================================== */
.about {
  position: relative;
  padding: 130px 6%;
  /* ドットのハーフトーン風パターン(CSSのみ) */
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.7px);
  background-size: 10px 10px;
  background-color: #fbfbfc;
}
.about-inner {
  background: rgba(255,255,255,0.88);
  padding: 56px 48px;
}
.about .sec-title { margin-bottom: 30px; }
.about p { margin-bottom: 18px; }
.about .line-btn { margin-top: 16px; border: 1px solid var(--ink); padding: 12px 26px; }

/* =====================================================
   メニュー(フェードスライダー)
   ===================================================== */
.menu {
  position: relative;
  padding: 150px 6% 120px;
  background: url("../../../img/menu-bg.webp") center / cover, #edeae5;
}
.menu-vertical {
  position: absolute;
  left: max(4%, 40px);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--en);
  font-size: clamp(48px, 5.4vw, 66px);
  letter-spacing: 0.1em;
  rotate: 180deg;
}
.num-badge {
  position: absolute;
  left: 22%;
  top: 90px;
  width: 74px; height: 74px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--en);
  font-size: 26px;
}

.menu-slider {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  min-height: 520px;
}
.menu-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 55% 1fr;
  align-items: center;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
}
.menu-slide.is-active { opacity: 1; pointer-events: auto; }
.menu-slide figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(60,60,50,0.16);
}
.menu-slide figure img { width: 100%; height: 100%; object-fit: cover; }
.menu-card {
  background: #fff;
  padding: 52px 44px;
  margin-left: -12%;
  box-shadow: 0 14px 40px rgba(60,60,50,0.1);
}
.menu-card p { margin-bottom: 26px; }

.menu-controls {
  display: flex;
  gap: 16px;
  justify-content: center;
  transform: translateX(6%);
  margin-top: 34px;
}
/* ドットは番号バッジの下に縦並び(元デザインの配置) */
.menu-dots {
  position: absolute;
  left: 22.6%;
  top: 190px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.menu-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0;
}
.menu-dots button.is-active { background: var(--ink); }

/* =====================================================
   カルーセル(スタイリスト・スタイル 共通)
   ===================================================== */
.stylist { padding: 130px 0 110px; }
.style { padding: 130px 0 110px; background: var(--beige); }

.carousel-head {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 6%;
}
.carousel-head .sec-title { margin-right: auto; }
.carousel-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.carousel-arrows { display: flex; gap: 14px; }

.carousel { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 1s ease;
  will-change: transform;
}
.carousel-item {
  flex: 0 0 23.4%;
  padding: 0 1.6%;
  text-align: center;
  transition: opacity 0.8s ease;
}
/* 元デザインの比率: STYLIST=中央20%幅 / STYLE=中央23%幅 */
.carousel[data-name="stylist"] .carousel-item { flex-basis: 20%; }
.round-photo {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.round-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.carousel-item a:hover .round-photo img { transform: scale(1.05); }
.carousel-item .role {
  margin-top: 24px;
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--ink-soft);
}
.carousel-item .name {
  font-family: var(--en);
  font-size: 15px;
  letter-spacing: 0.2em;
  margin-top: 6px;
}

.carousel-progress {
  max-width: 560px;
  margin: 46px auto 0;
  height: 1px;
  background: var(--line);
  position: relative;
}
.carousel-progress span {
  position: absolute;
  left: 0; top: -1px;
  height: 3px;
  width: 25%;
  background: var(--ink);
  transition: left 0.6s ease, width 0.6s ease;
}

/* =====================================================
   ピックアップ
   ===================================================== */
.pickup {
  position: relative;
  padding: 130px 6%;
  overflow: clip;
}
.ghost--t { left: -3%; top: 30%; }
.ghost--e { right: -4%; top: 20%; }
.deco-branch--pickup { left: 14%; top: 130px; }
.pickup .sec-title { margin-bottom: 60px; }
.pickup-banner {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(60,60,50,0.14);
}
.pickup-banner img { transition: transform 0.7s ease; }
.pickup-banner:hover img { transform: scale(1.03); }

/* =====================================================
   ニュース・ブログ(ハーフトーン背景)
   ===================================================== */
.posts {
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.7px);
  background-size: 10px 10px;
  background-color: #fbfbfc;
  padding: 120px 6%;
}
.news { max-width: 980px; margin: 0 auto; }
.news .sec-title { margin-bottom: 48px; }


.news-list li a {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  padding: 22px 30px;
  box-shadow: 0 6px 24px rgba(70,60,48,0.06);
  flex-wrap: wrap;
  transition: box-shadow 0.3s ease;
}
.news-list li a:hover { box-shadow: 0 10px 30px rgba(70,60,48,0.12); }
.news-mark {
  width: 12px; height: 12px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  flex: none;
}
.news-list time { font-family: var(--en); font-size: 13px; letter-spacing: 0.08em; }
.chip {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  padding: 3px 12px;
  background: #fff;
}
.news-ttl { flex: 1; min-width: 200px; }

.more { display: flex; justify-content: flex-end; margin-top: 26px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card a {
  display: block;
  background: #fff;
  box-shadow: 0 6px 24px rgba(70,60,48,0.06);
  padding-bottom: 22px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.blog-card a:hover { box-shadow: 0 12px 32px rgba(70,60,48,0.12); transform: translateY(-4px); }
.blog-card figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.blog-card figure img { width: 100%; height: 100%; object-fit: cover; }
.chip--on {
  position: absolute;
  right: 10px; top: 10px;
}
.blog-card time {
  display: block;
  font-family: var(--en);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  margin: 16px 20px 2px;
}
.blog-card h3 {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.9;
  margin: 0 20px;
}

/* =====================================================
   採用
   ===================================================== */
.recruit {
  padding: 150px 6%;
  background:
    radial-gradient(ellipse 70% 90% at 15% 20%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(ellipse 60% 70% at 70% 80%, rgba(255,255,255,0.5), transparent 65%),
    linear-gradient(115deg, #dfe5ea 0%, #cfd8de 60%, #c2ccd4 100%);
}
.recruit-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
}
.recruit-inner > * { max-width: 560px; }
.recruit h3 {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 26px 0 12px;
  text-wrap: balance;
}
.recruit p { margin-bottom: 30px; }

/* =====================================================
   店舗情報
   ===================================================== */
.info {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 130px 6%;
}
.info .sec-title { margin-bottom: 40px; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  text-align: left;
  font-weight: 400;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 13.5px;
}
.info-table th { width: 27%; color: var(--ink-soft); letter-spacing: 0.12em; white-space: nowrap; }
.info-imgs { display: grid; gap: 24px; }
.info-imgs figure { overflow: hidden; box-shadow: 0 12px 36px rgba(60,60,50,0.12); }

/* =====================================================
   フッター:カレンダー
   ===================================================== */
.schedule {
  padding: 110px 6%;
  background: url("../../../img/texture-linen.webp") center / cover, #f6f7f6;
}
.schedule .sec-title { margin-bottom: 48px; }
.calendar-wrap {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.calendar-legend { grid-column: 1 / -1; }
.calendar {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 8px 30px rgba(70,60,48,0.08);
}
.calendar caption {
  font-family: var(--en);
  font-size: 17px;
  letter-spacing: 0.14em;
  padding: 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.calendar th, .calendar td {
  text-align: center;
  padding: 12px 6px;
  font-size: 12.5px;
  border: 1px solid #eee;
  font-weight: 400;
}
.calendar th { background: #fafafa; font-size: 11px; letter-spacing: 0.2em; }
.calendar td.is-closed {
  background: #ece6dd;
  position: relative;
}
.calendar-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
}
.legend-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ece6dd;
  border: 1px solid #d8cfc2;
}

/* =====================================================
   フッター:予約CTA(曲線マスク)
   ===================================================== */
.reserve-cta {
  position: relative;
  padding: 155px 6% 120px;
  text-align: center;
  background: url("../../../img/texture-sky.webp") center / cover, #c4ced9;
  overflow: hidden;
  /* 下辺を曲線に切り抜き、下の黒フッターを見せる(継ぎ目ゼロ) */
  clip-path: ellipse(160% 100% at 50% 0%);
}
/* 上端の白い凹曲線 */
.reserve-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 160%;
  height: 90px;
  background: #f6f7f6;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}
.reserve-cta .sec-title { position: relative; }
.reserve-lead { position: relative; margin: 10px 0 44px; letter-spacing: 0.2em; }
.reserve-btns {
  position: relative;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.reserve-btn--lg { min-width: 260px; padding: 8px 24px; min-height: 60px; }
.reserve-tel { text-align: center; }
.tel-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 260px;
  min-height: 60px;
  font-family: var(--en);
  font-size: 19px;
  letter-spacing: 0.05em;
  border: 1px solid var(--ink);
  background: rgba(255,255,255,0.85);
  padding: 8px 24px;
  transition: background 0.3s ease, color 0.3s ease;
}
.tel-outline:hover, .tel-outline:focus-visible { background: var(--ink); color: #fff; }
.reserve-tel p { font-family: var(--en); font-size: 12px; letter-spacing: 0.14em; margin-top: 10px; }

/* =====================================================
   フッター本体
   ===================================================== */
.site-footer { background: #211f1c; }
.footer-main {
  position: relative;
  background: linear-gradient(150deg, #2b2219 0%, var(--dark) 55%, #1d1712 100%);
  color: #d8d6d0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: start;
  gap: 60px 80px;
  padding: 100px max(7%, calc((100% - 1120px) / 2)) 100px;
  overflow: hidden;
}

.footer-brand { position: relative; }
.footer-logo {
  font-family: var(--en);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 26px;
}
.footer-logo img {
  width: 180px;
  height: auto;
  /* 黒ロゴを白に反転(ダーク背景用) */
  filter: brightness(0) invert(1);
}
.footer-main address {
  font-style: normal;
  font-size: 13px;
  line-height: 2.2;
  margin-bottom: 26px;
}
.sns { display: flex; gap: 16px; }
.sns a {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}
.sns a:hover, .sns a:focus-visible { color: #fff; }
.sns svg { width: 22px; height: 22px; }

.footer-nav {
  position: relative;
  display: flex;
  gap: 72px;
  justify-content: flex-end;
  padding-top: 8px;
}
.footer-nav li { margin-bottom: 16px; }
.footer-nav a {
  font-family: var(--en);
  font-size: 13px;
  letter-spacing: 0.2em;
  transition: color 0.3s ease;
}
.footer-nav a:hover, .footer-nav a:focus-visible { color: #fff; }

.footer-bottom {
  background: var(--dark-2);
  color: #8f8d88;
  text-align: center;
  padding: 18px;
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (max-width: 1180px) {
  .global-nav ul { gap: 20px; }
  .hero-message { left: 4%; max-width: 28vw; }
}

@media (max-width: 1060px) {
  :root { --header-h: 64px; }
  .site-header { padding-left: 20px; }
  /* backdrop-filterがあるとfixedの基準が親になるため無効化 */
  .site-header { backdrop-filter: none; background: rgba(255,255,255,0.97); }
  .global-nav {
    position: fixed;
    inset: 0;
    z-index: 96;
    background: rgba(255,255,255,0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .global-nav.is-open { opacity: 1; pointer-events: auto; }
  .global-nav ul { flex-direction: column; text-align: center; gap: 22px; }
  .tel-box { display: none; }
  .reserve-btn { min-width: 120px; }
  .nav-toggle { display: flex; z-index: 110; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { padding-bottom: 90px; }
  .hero-stage { margin-left: 0; height: 480px; }
  /* SP: 白パネルなしで英語コピーのみ表示 */
  .hero-message {
    left: 7%;
    right: auto;
    top: 8%;
    bottom: auto;
    max-width: none;
    width: auto;
    font-size: 13px;
    line-height: 2;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    box-shadow: none;
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.95),
      0 0 18px rgba(255, 255, 255, 0.85),
      0 1px 2px rgba(255, 255, 255, 0.95);
  }
  .hero-message__jp { display: none; }
  .hero-copyright { display: none; }
  .hero-reserve { left: 20px; bottom: -30px; }

  .concept-block { grid-template-columns: 1fr; gap: 90px; }
  .about-wrap { grid-template-columns: 1fr; gap: 40px; }
  .about-photos { max-width: 440px; margin: 0 auto; }
  .concept-block--rev .concept-text { order: 1; }
  .concept-block--rev .concept-imgs { order: 2; }
  .concept-last { grid-template-columns: 1fr; }
  .deco-branch--r, .deco-branch--l { display: none; }

  .menu { padding-top: 120px; }
  .menu-vertical { position: static; writing-mode: horizontal-tb; rotate: none; transform: none; text-align: center; margin-bottom: 30px; }
  .num-badge { left: 6%; top: 40px; width: 56px; height: 56px; font-size: 20px; }
  .menu-slider { min-height: auto; }
  .menu-slide { position: static; grid-template-columns: 1fr; display: none; }
  .menu-slide.is-active { display: block; }
  .menu-card { margin: -40px 5% 0; padding: 34px 26px; position: relative; }
  .menu-controls { transform: none; }
  .menu-dots { position: static; flex-direction: row; justify-content: center; margin-top: 16px; }

  .carousel-item, .carousel[data-name="stylist"] .carousel-item { flex-basis: 72%; padding: 0 4%; }
  .calendar-wrap { grid-template-columns: 1fr; max-width: 480px; }

  .info { grid-template-columns: 1fr; gap: 44px; }
  .footer-main { grid-template-columns: 1fr; gap: 40px; padding: 80px 8% 70px; }
  .footer-nav { justify-content: flex-start; gap: 50px; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .recruit-inner { align-items: flex-start; }
  .hero-panel--a { left: 6%; }
  .hero-panel--b { left: 44%; }
  .hero-panel--c { left: 80%; }
}

/* =====================================================
   下層ページ共通(元デザイン準拠・自作CSS)
   ===================================================== */
/* タイトル帯: ベージュ地に大きな英字+日本語 */
.page-hero {
  position: relative;
  height: 400px;
  padding-top: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 背景写真 + うすいオーバーレイ(元デザインの page_ttl--bg 相当) */
  background: url("../../../img/page-ttl-bg.webp") center / cover, rgba(195, 183, 168, 0.2);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 244, 240, 0.66);
}
.page-hero h1 { position: relative; }
.page-hero .en {
  display: block;
  font-family: var(--en-accent);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(40px, 5vw, 78px);
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.page-hero .jp-label {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* パンくず(帯の下) */
.breadcrumb-bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 6%;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.breadcrumb-bar a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-bar a:hover { text-decoration: none; }

/* セクション: 交互背景 */
.sub-section { padding: 96px 6%; }
.sub-section:nth-of-type(even) { background: rgba(195, 183, 168, 0.2); }
.sub-section > .inner { max-width: 960px; margin: 0 auto; }
.sub-section--wide > .inner { max-width: 1120px; }

.sub-ttl {
  text-align: center;
  margin-bottom: 48px;
}
.sub-ttl .en {
  display: block;
  font-family: var(--en);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: #8a6f58;
}
.sub-ttl .jp {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
}

.sub-lead { text-align: center; margin-bottom: 8px; }
.sub-lead .catch {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 2;
  margin-bottom: 16px;
  text-wrap: balance;
}

/* 白ボックス(料金表の器) */
.price-box {
  background: #fff;
  box-shadow: 0 0 16px rgba(44, 44, 44, 0.1);
  padding: 40px 48px;
}
.price-note { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 18px; }
.price-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px dashed #cfc9c0;
  flex-wrap: wrap;
}
.price-item:last-child { border-bottom: 0; }
.price-item .name { font-weight: 500; font-size: 16px; letter-spacing: 0.06em; }
.price-item .desc {
  flex-basis: 100%;
  order: 3;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.9;
  margin-top: 2px;
}
.price-item .price {
  font-family: var(--en);
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-item .price small { font-size: 11px; color: var(--ink-soft); }
.price-caption { font-size: 13px; margin-top: 22px; }

/* コンセプトページ: 画像+テキスト */
.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cp-grid--rev .cp-img { order: 2; }
.cp-grid h2 {
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin-bottom: 22px;
  text-wrap: balance;
}
.cp-img { overflow: hidden; box-shadow: 0 0 16px rgba(44,44,44,0.1); }

/* スタイルページ: 3カラムカード */
.style-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.style-card { background: transparent; }
.style-card figure { position: relative; overflow: hidden; }
.style-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.6s ease; }
.style-card a:hover img { transform: scale(1.05); }
.style-card .style-name {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.style-card .style-tag { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.1em; }
.style-more { text-align: center; margin-top: 56px; }

/* NEXT PAGE ボタン */
.next-page { padding: 64px 6% 110px; }
.next-page a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--ink);
  padding: 26px 34px;
  transition: background 0.3s ease, color 0.3s ease;
}
.next-page .lbl {
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  display: block;
}
.next-page .ttl { font-size: 17px; font-weight: 500; letter-spacing: 0.12em; }
.next-page a:hover, .next-page a:focus-visible { background: var(--ink); color: #fff; }
.next-page a:hover .lbl, .next-page a:hover .circle-arrow { color: #fff; border-color: #fff; }

@media (max-width: 1060px) {
  .page-hero { height: 260px; }
  .sub-section { padding: 70px 6%; }
  .price-box { padding: 26px 22px; }
  .cp-grid { grid-template-columns: 1fr; gap: 34px; }
  .cp-grid--rev .cp-img { order: 0; }
  .style-page-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
}

/* =====================================================
   マツエク集客LP(/eyelash/) — ゼロベース設計
   ===================================================== */
:root {
  --lp-warm: #f7f1ea;
  --lp-tan: #a5836a;
  --lp-brown: #6f533d;
  --lp-line: #e4d9cd;
}

/* ファーストビュー */
.lp-hero {
  padding: calc(var(--header-h) + 40px) 6% 70px;
  background:
    radial-gradient(ellipse 60% 80% at 88% 10%, rgba(255,255,255,0.9), transparent 60%),
    var(--lp-warm);
}
.lp-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.lp-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 50px;
  padding: 4px 18px;
  margin-bottom: 18px;
}
.lp-hero h1 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-bottom: 14px;
  text-wrap: balance;
}
.lp-hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 68%, #eddcc7 68%);
}
.lp-hero__sub { color: var(--ink-soft); margin-bottom: 24px; }
.lp-price-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 26px;
}
.lp-price-tag .from { font-size: 13px; letter-spacing: 0.1em; }
.lp-price-tag .num {
  font-family: var(--en);
  font-size: clamp(38px, 4vw, 52px);
  line-height: 1;
  color: var(--lp-brown);
}
.lp-price-tag .tax { font-size: 12px; color: var(--ink-soft); }

.lp-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.lp-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  padding: 14px 26px;
  border-radius: 6px;
  text-align: center;
  line-height: 1.6;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lp-btn:hover { opacity: 0.88; transform: translateY(-2px); }
.lp-btn--main {
  background: var(--lp-brown);
  color: #fff;
  box-shadow: 0 8px 22px rgba(111, 83, 61, 0.35);
}
.lp-btn--main .big { font-size: 16px; font-weight: 600; letter-spacing: 0.1em; }
.lp-btn--main .sml { font-size: 11px; opacity: 0.85; }
.lp-btn--line {
  background: #06c755;
  color: #fff;
}
/* ヒーロー等のCTAブロック内では他ボタンと同じ幅感で伸ばす */
.lp-cta .lp-btn--line { flex: 1 1 100%; max-width: 430px; }
.lp-btn--line .big { font-size: 16px; font-weight: 600; letter-spacing: 0.1em; }
.lp-btn--line .sml { font-size: 11px; opacity: 0.85; }
.lp-btn--tel {
  background: #fff;
  border: 1px solid var(--lp-brown);
  color: var(--lp-brown);
}
.lp-btn--tel .big { font-family: var(--en); font-size: 18px; letter-spacing: 0.04em; }
.lp-btn--tel .sml { font-size: 11px; }
.lp-hero__img { border-radius: 10px; overflow: hidden; box-shadow: 0 18px 44px rgba(111,83,61,0.2); }

/* 悩みチェック */
.lp-sec { padding: 84px 6%; }
.lp-sec--warm { background: var(--lp-warm); }
.lp-sec__inner { max-width: 900px; margin: 0 auto; }
.lp-ttl {
  text-align: center;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-bottom: 44px;
  text-wrap: balance;
}
.lp-ttl small {
  display: block;
  font-family: var(--en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--lp-tan);
  margin-bottom: 6px;
}
.lp-checks {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  padding: 34px 40px;
}
.lp-checks li {
  position: relative;
  padding: 10px 0 10px 38px;
  border-bottom: 1px dashed var(--lp-line);
  font-size: 15px;
}
.lp-checks li:last-child { border-bottom: 0; }
.lp-checks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  translate: 0 -50%;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--lp-warm);
  border: 1px solid var(--lp-tan);
}
.lp-checks li::after {
  content: "";
  position: absolute;
  left: 9px; top: 50%;
  translate: 0 -70%;
  width: 9px; height: 5px;
  border-left: 2px solid var(--lp-brown);
  border-bottom: 2px solid var(--lp-brown);
  rotate: -45deg;
}
.lp-checks-note { text-align: center; margin-top: 22px; font-weight: 600; letter-spacing: 0.08em; }

/* 選ばれる理由 */
.lp-reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 900px;
  margin: 0 auto;
}
.lp-reason {
  background: #fff;
  border-radius: 10px;
  padding: 30px 30px 26px;
  box-shadow: 0 6px 24px rgba(111, 83, 61, 0.08);
}
.lp-reason .no {
  font-family: var(--en);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--lp-tan);
}
.lp-reason h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 6px 0 10px;
  line-height: 1.7;
}
.lp-reason p { font-size: 13.5px; color: var(--ink-soft); }

/* 料金 */
.lp-price-box {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  overflow: hidden;
}
.lp-price-box table { width: 100%; border-collapse: collapse; }
.lp-price-box th, .lp-price-box td {
  padding: 15px 26px;
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid var(--lp-line);
  font-size: 15px;
}
.lp-price-box tr:last-child th, .lp-price-box tr:last-child td { border-bottom: 0; }
.lp-price-box td {
  text-align: right;
  font-family: var(--en);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.lp-price-box .osusume th { position: relative; }
.lp-badge {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  background: var(--lp-brown);
  color: #fff;
  border-radius: 4px;
  padding: 2px 10px;
  margin-left: 10px;
  vertical-align: 2px;
}
.lp-price-sub {
  max-width: 720px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.lp-mini { background: #fff; border: 1px solid var(--lp-line); border-radius: 10px; padding: 20px 24px; }
.lp-mini h4 { font-size: 13px; letter-spacing: 0.12em; color: var(--lp-brown); margin-bottom: 8px; }
.lp-mini li { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; }
.lp-mini li span:last-child { font-family: var(--en); }
.lp-price-note { max-width: 720px; margin: 16px auto 0; font-size: 12px; color: var(--ink-soft); }

/* 流れ */
.lp-flow { max-width: 760px; margin: 0 auto; counter-reset: step; }
.lp-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 0 0 34px 0;
}
.lp-step::before {
  content: "";
  position: absolute;
  left: 31px; top: 64px; bottom: 0;
  width: 2px;
  background: var(--lp-line);
}
.lp-step:last-child::before { display: none; }
.lp-step .n {
  counter-increment: step;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--lp-warm);
  border: 1px solid var(--lp-tan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--en);
  font-size: 20px;
  color: var(--lp-brown);
}
.lp-step .n::before { content: counter(step, decimal-leading-zero); }
.lp-step h3 { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; margin: 4px 0 6px; }
.lp-step p { font-size: 13.5px; color: var(--ink-soft); }

/* FAQ */
.lp-faq { max-width: 760px; margin: 0 auto; }
.lp-faq details {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.lp-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 14.5px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before {
  content: "Q";
  flex: none;
  font-family: var(--en);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--lp-brown);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.lp-faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--en);
  font-size: 20px;
  color: var(--lp-tan);
  transition: rotate 0.25s ease;
}
.lp-faq details[open] summary::after { rotate: 45deg; }
.lp-faq .a {
  padding: 0 22px 18px 66px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* 最終CTA */
.lp-final {
  text-align: center;
  padding: 90px 6%;
  background:
    radial-gradient(ellipse 55% 70% at 15% 20%, rgba(255,255,255,0.8), transparent 60%),
    var(--lp-warm);
}
.lp-final .lp-ttl { margin-bottom: 26px; }
.lp-final .lp-cta { justify-content: center; }
.lp-final .hours { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); }

/* 追従予約バー */
.lp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 24px rgba(60,50,40,0.12);
}
.lp-sticky .lp-btn { min-width: 200px; padding: 9px 18px; border-radius: 6px; }
.lp-sticky .lp-btn--main .big { font-size: 14px; }
.lp-sticky .lp-btn--line .big { font-size: 14px; }
.lp-sticky .lp-btn--tel .big { font-size: 15px; }
@media (max-width: 560px) {
  .lp-sticky { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .lp-sticky .lp-btn { padding: 9px 6px; }
  .lp-sticky .lp-btn--main .big,
  .lp-sticky .lp-btn--line .big { font-size: 12px; letter-spacing: 0; }
  .lp-sticky .lp-btn--tel .big { font-size: 13px; letter-spacing: 0; }
}

@media (max-width: 900px) {
  .lp-hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .lp-hero__img { order: -1; max-width: 480px; }
  .lp-reasons { grid-template-columns: 1fr; }
  .lp-price-sub { grid-template-columns: 1fr; }
  .lp-checks { padding: 24px 20px; }
  .lp-sticky .lp-btn { min-width: 0; flex: 1; }
}

/* =====================================================
   コンセプトページ拡張(ABOUT/STYLIST/INFO/ACCESS/SCHEDULE)
   ===================================================== */
/* 背景を明示指定(交互指定を上書き) */
.sub-section.sub-section--beige { background: rgba(195, 183, 168, 0.2); }
.sub-section.sub-section--plain { background: #fff; }

/* セクション大見出し(英字大+日本語) */
.big-ttl {
  text-align: center;
  margin-bottom: 56px;
}
.big-ttl .en {
  display: block;
  font-family: var(--en);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.big-ttl .jp {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #8a6f58;
}

/* ABOUT: 導入 + ワイド画像 */
.about-lead { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.about-lead .catch {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 2;
  margin-bottom: 20px;
  text-wrap: balance;
}
.about-wide {
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(44,44,44,0.1);
}
.about-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* スタイリスト・プロフィール(画像+テキスト交互) */
.profile {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto 90px;
}
.profile:last-child { margin-bottom: 0; }
.profile--rev .profile__img { order: 2; }
.profile__img {
  overflow: hidden;
  box-shadow: 0 0 16px rgba(44,44,44,0.1);
}
.profile__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.profile .role-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  border: 1px solid var(--ink);
  padding: 3px 14px;
  margin-bottom: 14px;
}
.profile h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
.profile .en-name {
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 18px;
}
.profile p { margin-bottom: 12px; }

/* SALON INFO: 画像+テーブル */
.saloninfo-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.saloninfo-grid figure { overflow: hidden; box-shadow: 0 0 16px rgba(44,44,44,0.1); }

/* ACCESS: 道案内+地図 */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.access-grid h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 18px 0 6px;
}
.access-map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(44,44,44,0.1);
}
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* SCHEDULE(下層用・白地) */
.sub-schedule .calendar-wrap { max-width: 1120px; }

@media (max-width: 1060px) {
  .profile, .saloninfo-grid, .access-grid { grid-template-columns: 1fr; gap: 30px; }
  .profile--rev .profile__img { order: 0; }
  .about-wide img { aspect-ratio: 16 / 10; }
  .profile { margin-bottom: 60px; }
}

/* ===== まつげLP: デザインメニュー・比較・ギャラリー追加 ===== */
.lp-design {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1000px;
  margin: 0 auto;
}
.lp-design-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(111, 83, 61, 0.1);
  display: flex;
  flex-direction: column;
}
.lp-design-card figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.lp-design-card .body { padding: 22px 24px 26px; flex: 1; }
.lp-design-card .en {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--lp-tan);
}
.lp-design-card h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 2px 0 10px;
}
.lp-design-card p { font-size: 13px; color: var(--ink-soft); }
.lp-design-card .tag {
  display: inline-block;
  font-size: 10.5px;
  background: var(--lp-warm);
  border: 1px solid var(--lp-line);
  border-radius: 50px;
  padding: 2px 12px;
  margin-bottom: 10px;
  color: var(--lp-brown);
}

/* デザイン比較 */
.lp-eyes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.lp-eye figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.lp-eye h3 { font-size: 14.5px; font-weight: 600; letter-spacing: 0.06em; margin: 12px 0 2px; }
.lp-eye .en { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; color: var(--lp-tan); }
.lp-eye p { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

/* 料金カテゴリ見出し */
.lp-price-cat {
  max-width: 720px;
  margin: 44px auto 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lp-brown);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-price-cat::after { content: ""; flex: 1; height: 1px; background: var(--lp-line); }

/* ギャラリー */
.lp-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
}
.lp-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }

@media (max-width: 900px) {
  .lp-design, .lp-eyes { grid-template-columns: 1fr; }
  .lp-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ===== トップ: PICK UP 2枚バナー ===== */
.pickup-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
}
.pu-banner {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(60,60,50,0.14);
}
.pu-banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; transition: transform 0.7s ease; }
.pu-banner:hover img { transform: scale(1.04); }
.pu-banner .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 26px 18px;
  background: linear-gradient(transparent, rgba(30,26,22,0.62));
  color: #fff;
}
.pu-banner .cap .en {
  display: block;
  font-family: var(--en);
  font-size: 20px;
  letter-spacing: 0.18em;
  line-height: 1.4;
}
.pu-banner .cap .jp { font-size: 12px; letter-spacing: 0.16em; opacity: 0.9; }

/* ===== 着物着付けページ ===== */
.kimono-hero {
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(44,44,44,0.1);
}
.kimono-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.kimono-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.kimono-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tokuten {
  max-width: 760px;
  margin: 36px auto 0;
  background: #fff;
  border: 1px solid #ded1c6;
  padding: 26px 32px;
}
.tokuten h4 {
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #9a6f5c;
  margin-bottom: 10px;
}
.tokuten li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
}
.tokuten li::before {
  content: "";
  position: absolute;
  left: 4px; top: 16px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c8a294;
}

@media (max-width: 900px) {
  .pickup-banners { grid-template-columns: 1fr; }
  .kimono-gallery { grid-template-columns: 1fr; max-width: 480px; }
}

/* ===== 雰囲気写真(装飾フロート) ===== */
.mood-float {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(60,60,50,0.14);
  z-index: 1;
}
.mood-float img { width: 100%; height: 100%; object-fit: cover; }
/* ABOUT: テキストカード + 写真クラスタの2カラム */
.about-wrap {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-photos {
  position: relative;
  padding: 0 0 64px 14%;
}
.ap-main {
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(60,60,50,0.14);
}
.ap-main img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ap-sub {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(60,60,50,0.16);
}
.ap-sub img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* RECRUIT左の余白に窓光 */
.recruit { position: relative; }
.recruit .mood-float--c { left: 9%; top: 50%; translate: 0 -50%; width: 300px; height: 300px; }

@media (max-width: 1180px) {
  .mood-float { display: none; }
}

/* =====================================================
   スマホ最適化(〜767px) — 元サイトのSP設計値準拠
   ===================================================== */
@media (max-width: 767px) {
  body { font-size: 14px; }

  /* セクション余白: 64px(元サイトSP値) */
  .sub-section, .lp-sec { padding-top: 64px; padding-bottom: 64px; }
  .concept, .about, .menu, .stylist, .style, .pickup, .posts, .recruit, .info,
  .schedule, .reserve-cta { padding-top: 64px; padding-bottom: 64px; }

  /* セクションタイトル: SPは48px相当 */
  .sec-title { font-size: clamp(34px, 12vw, 48px); }
  .big-ttl .en { font-size: clamp(30px, 10vw, 44px); }

  /* タイトル帯: 高さ200px(元サイトSP値)・英字40px */
  .page-hero { height: 200px; }
  .page-hero .en { font-size: 40px; }
  .page-hero .jp-label { font-size: 13px; }

  /* ヒーロー: 3枚目を隠して2枚を大きく(元サイトと同じ) */
  .hero { padding-bottom: 130px; }
  .hero-stage { height: 300px; }
  .hero-panel--a { left: 4%; top: 18px; width: 46%; height: 110%; }
  .hero-panel--b { left: 54%; top: 42px; width: 46%; height: 96%; }
  .hero-panel--c { display: none; }
  .hero-reserve {
    left: 12px;
    bottom: -96px;
    scale: 0.82;
    transform-origin: left bottom;
  }
  .concept { padding-top: 150px; }

  /* メニュー */
  .menu-slide figure { aspect-ratio: 4 / 3; }
  .menu-card { margin: -30px 4% 0; }
  .num-badge { width: 48px; height: 48px; font-size: 17px; top: 20px; }

  /* フッター */
  .footer-main { padding-top: 70px; gap: 34px; }
  .footer-logo img { width: 140px; }
  .footer-nav { gap: 0; }
  .footer-nav ul { width: 33%; }
  .footer-nav li { margin-bottom: 10px; }

  /* 予約CTA: ボタンを全幅に(元サイトSPと同じ) */
  .reserve-cta { padding-top: 115px; padding-bottom: 64px; }
  .reserve-btns { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 4%; }
  .reserve-btn--lg { width: 100%; }
  .reserve-tel { width: 100%; }
  .tel-outline { width: 100%; justify-content: center; }

  /* 料金表・LP */
  .price-item { padding: 14px 2px; }
  .price-item .name { font-size: 14.5px; }
  .lp-hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 46px; }
  .lp-hero h1 { font-size: 24px; }
  .lp-btn { min-width: 0; width: 100%; }
  .lp-cta { flex-direction: column; }
  .lp-price-box th, .lp-price-box td { padding: 12px 16px; font-size: 14px; }

  /* カレンダー */
  .calendar th, .calendar td { padding: 8px 2px; font-size: 11.5px; }

  /* 下層NEXT PAGE */
  .next-page a { padding: 18px 20px; }
  .next-page .ttl { font-size: 15px; }

  /* コンセプトページ */
  .about-lead .catch { font-size: 17px; }
  .profile { gap: 22px; margin-bottom: 48px; }
  .access-map { aspect-ratio: 1 / 1; }
}

/* ===== SPヘッダー: 電話する/予約する/メニューの3ボタン(元サイトSP準拠) ===== */
.tel-sp { display: none; }

@media (max-width: 1060px) {
  .site-header { padding-left: 16px; gap: 12px; }
  .brand img { width: 112px; }

  /* 電話する(コンパクト表示) */
  .tel-box {
    display: flex !important;
    padding: 0 14px;
    border-left: 1px solid var(--line);
  }
  .tel-box .tel-number, .tel-box .tel-hours { display: none; }
  .tel-sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .tel-sp .ic { width: 17px; height: 17px; margin: 0; }

  /* 予約する(コンパクト) */
  .reserve-btn { min-width: 92px; padding: 0 10px; }
  .reserve-btn__jp { font-size: 9.5px; }
  .reserve-btn__en { font-size: 10.5px; letter-spacing: 0.1em; gap: 5px; }
  .reserve-btn__en .ic-scissors { width: 18px; height: 9px; }

  /* メニュー(ラベル付きハンバーガー) */
  .nav-toggle { margin-right: 8px; padding: 8px 6px; align-items: center; }
  .nav-toggle::after {
    content: "メニュー";
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink);
    margin-top: 1px;
  }
  .nav-toggle.is-open::after { content: "閉じる"; }
}

/* =====================================================
   ページ別タイトル帯背景 + RESERVE/RECRUIT背景画像
   ===================================================== */
.page-hero--menu    { background-image: url("../../../img/page-ttl-menu.webp"); }
.page-hero--concept { background-image: url("../../../img/page-ttl-concept.webp"); }
.page-hero--eyelash { background-image: url("../../../img/page-ttl-eyelash.webp"); }
.page-hero--kimono  { background-image: url("../../../img/page-ttl-kimono.webp"); }
.page-hero--style   { background-image: url("../../../img/page-ttl-style.webp"); }

/* RESERVE: 背景写真 + 可読性オーバーレイ */
.reserve-cta {
  background:
    linear-gradient(rgba(244, 240, 233, 0.18), rgba(244, 240, 233, 0.18)),
    url("../../../img/reserve-bg.webp") center / cover,
    #cfc5b8;
}

/* RECRUIT: 背景写真 + 可読性オーバーレイ */
.recruit {
  background:
    linear-gradient(rgba(241, 236, 229, 0.60), rgba(241, 236, 229, 0.60)),
    url("../../../img/recruit-bg.webp") center / cover,
    #d9d0c4;
}

/* =====================================================
   ピックアップ下層(白髪染め/美髪矯正)共通パーツ
   ===================================================== */
.page-hero--grayhair { background-image: url("../../../img/page-ttl-grayhair.webp"); }
.page-hero--bihatsu  { background-image: url("../../../img/page-ttl-bihatsu.webp"); }

/* できること: 番号付きカード2列 */
.pt-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 960px;
  margin: 0 auto;
}
.pt-card {
  background: #fff;
  box-shadow: 0 0 16px rgba(44,44,44,0.08);
  padding: 30px 32px;
}
.pt-card .no {
  font-family: var(--en);
  font-size: 22px;
  color: #8a6f58;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.pt-card p { font-size: 15px; font-weight: 500; letter-spacing: 0.05em; line-height: 1.9; }
.pt-card small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

/* FLOW: 番号ステップ(ニュートラル配色) */
.n-flow { max-width: 760px; margin: 0 auto; counter-reset: nstep; }
.n-step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  padding-bottom: 32px;
}
.n-step::before {
  content: "";
  position: absolute;
  left: 29px; top: 60px; bottom: 0;
  width: 1px;
  background: var(--line);
}
.n-step:last-child::before { display: none; }
.n-step .n {
  counter-increment: nstep;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--en);
  font-size: 18px;
}
.n-step .n::before { content: counter(nstep, decimal-leading-zero); }
.n-step h3 { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; margin: 4px 0 6px; }
.n-step p { font-size: 13.5px; color: var(--ink-soft); }

/* Q&A(ニュートラル) */
.n-faq { max-width: 760px; margin: 0 auto; }
.n-faq details {
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.n-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 14.5px;
}
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq summary::before {
  content: "Q";
  flex: none;
  font-family: var(--en);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.n-faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--en);
  font-size: 20px;
  color: #8a6f58;
  transition: rotate 0.25s ease;
}
.n-faq details[open] summary::after { rotate: 45deg; }
.n-faq .a { padding: 0 22px 18px 66px; font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 767px) {
  .pt-cards { grid-template-columns: 1fr; }
}

/* ===== ABOUT US: スマホ1カラム化(定義順の上書き対策で末尾に配置) ===== */
@media (max-width: 1060px) {
  .about .about-wrap { grid-template-columns: 1fr; gap: 36px; }
  .about .about-photos { max-width: 420px; margin: 0 auto; padding: 0 0 56px 12%; }
  .about .about-inner { padding: 40px 28px; }
}

/* ===== カット・カラーモデルページ ===== */
.page-hero--model { background-image: url("../../../img/page-ttl-model.webp"); }
/* PICK UP 5枚目(全幅) */
.pu-banner--wide { grid-column: 1 / -1; }
.pu-banner--wide img { aspect-ratio: 32 / 9; }
@media (max-width: 900px) {
  .pu-banner--wide img { aspect-ratio: 21 / 9; }
}
/* LINE応募ボタン */
.model-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.model-cta .line-btn--boxed { min-width: 240px; justify-content: center; gap: 10px; }

/* ===== SP微調整(2026-07 全体チェック) ===== */
@media (max-width: 767px) {
  /* INFO: 見出しがグリッド列を押し広げて右にはみ出すのを防ぐ */
  .info > * { min-width: 0; }
  .info .sec-title { font-size: clamp(28px, 10vw, 48px); }
  /* フッターナビ: REPAIR & COLOR が2行に折れて列がガタつくのを防ぐ */
  .footer-nav a { font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
  .footer-nav { gap: 30px; }
  /* STYLIST見出し行: 矢印・VIEW ALLが右にはみ出すのを防ぐ */
  .carousel-head { gap: 16px; }
  .carousel-head .sec-title { font-size: clamp(28px, 10vw, 48px); }
}

/* ===== 採用ページ(recruit) — recruit.arglarte.com トーン(白×黒×#fff000) ===== */
.recruit-body { --rb-yellow: #fff000; }
.recruit-body main {
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', Meiryo, sans-serif;
  color: #000;
  font-weight: 400;
}
.sp-only { display: none; }

.rb-inner { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.rb-inner--narrow { max-width: 900px; }
.rb-inner--mid { max-width: 1000px; }
.rb-sec { margin-top: 150px; }

/* 見出し */
.rb-en-ttl {
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.25em;
  margin-bottom: 0.6em;
}
.rb-ja-ttl {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 52px;
}

/* ヒーロー */
.rb-hero {
  position: relative;
  height: clamp(480px, 68vh, 700px);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.rb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.rb-hero__body { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 6%; color: #fff; }
.rb-hero__en { display: block; font-family: var(--en, 'Sen'), sans-serif; font-size: 13px; letter-spacing: 0.32em; color: var(--rb-yellow); margin-bottom: 18px; }
.rb-hero__body h1 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 900; line-height: 1.3; letter-spacing: 0.06em; }
.rb-hero__body h1 .yl { color: var(--rb-yellow); }
/* 蛍光マーカー強調 */
.recruit-body .mk {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(255, 240, 0, 0.8) 62%);
  padding: 0 2px;
}
.rb-hero__sub { margin-top: 22px; font-size: 13.5px; letter-spacing: 0.14em; color: rgba(255,255,255,0.95); }

/* ボタン */
.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 250px;
  height: 72px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: background 0.3s, color 0.3s, opacity 0.3s;
}
.rb-btn--yellow {
  background: var(--rb-yellow);
  color: #000;
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 20px;
  letter-spacing: 0.2em;
}
.rb-btn--yellow { box-shadow: 0 8px 22px rgba(60, 55, 0, 0.16); }
.rb-btn--yellow::after { content: '→'; font-weight: 400; letter-spacing: 0; transition: transform 0.3s; }
.rb-btn--yellow:hover::after { transform: translateX(5px); }
.rb-btn--yellow:hover, .rb-btn--yellow:focus-visible { background: #000; color: #fff; }
.rb-btn--line { background: #06C755; color: #fff; }
.rb-btn--line .ic { width: 19px; height: 17px; }
.rb-btn--line:hover, .rb-btn--line:focus-visible { opacity: 0.82; }
.rb-btn--tel {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.rb-btn--tel:hover, .rb-btn--tel:focus-visible { background: #000; color: #fff; }
.rb-hero-cta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding: 0 6%; }

/* メッセージ */
.rb-message { line-height: 2.4; font-size: 16px; }

/* DELIGHT */
.rb-delight {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 120px 50px;
  margin-top: 104px;
}
.rb-delight-item { position: relative; }
.rb-delight-item .num {
  position: absolute;
  top: -62px;
  left: 1px;
  font-family: 'Montserrat', var(--en, 'Sen'), sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 70px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--rb-yellow);
  z-index: 1;
  pointer-events: none;
}
.rb-delight-item figure { aspect-ratio: 4 / 3; overflow: hidden; }
.rb-delight-item figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.rb-delight-item:hover figure img { transform: scale(1.05); }
.rb-delight-item h3 { font-size: 21px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; margin-top: 30px; }
.rb-delight-item p:not(.num) { font-size: 14px; color: #222; line-height: 2.2; margin-top: 18px; }

/* DATA(黒帯) */
.rb-sec--black { background: #000; padding: 100px 0; }
.rb-sec--black .rb-en-ttl { color: var(--rb-yellow); }
.rb-sec--black .rb-ja-ttl { color: #fff; margin-bottom: 0; }
.rb-data { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; list-style: none; padding: 0; }
.rb-data li { text-align: center; padding: 40px 16px; }
.rb-data li + li { border-left: 1px solid #333; }
.rb-data .num {
  font-family: 'Montserrat', var(--en, 'Sen'), sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 5.6vw, 74px);
  color: var(--rb-yellow);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rb-data .unit { font-size: 26px; font-weight: 400; color: #fff; margin-left: 4px; letter-spacing: 0; }
.rb-data .label { font-size: 13px; color: #ddd; letter-spacing: 0.15em; margin-top: 20px; }

/* オーナーメッセージ */
.rb-owner { display: grid; grid-template-columns: 380px 1fr; gap: 70px; align-items: start; }
.rb-owner__img img { width: 100%; height: auto; display: block; }
.rb-owner__img figcaption { margin-top: 14px; line-height: 1.7; }
.rb-owner__img figcaption span { display: block; font-family: var(--en, 'Sen'), sans-serif; font-size: 11px; letter-spacing: 0.22em; color: #555; }
.rb-owner__img figcaption strong { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; }
.rb-owner .rb-ja-ttl { margin-bottom: 34px; font-size: clamp(24px, 2.6vw, 32px); }
.rb-owner__text { line-height: 2.3; font-size: 15.5px; }

/* 募集要項(アコーディオン) */
.rb-jobs { margin-top: 66px; border-top: 1px solid #e5e5e5; }
.rb-job { border-bottom: 1px solid #e5e5e5; }
.rb-job summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  cursor: pointer;
  list-style: none;
  transition: background 0.3s;
}
.rb-job summary::-webkit-details-marker { display: none; }
.rb-job summary:hover { background: #fffde6; }
.rb-job .tag {
  background: var(--rb-yellow);
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  min-width: 150px;
  text-align: center;
  flex-shrink: 0;
}
.rb-job .ttl { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }
.rb-job .toggle {
  width: 38px; height: 38px;
  border: 1px solid #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.rb-job[open] { background: #fffef0; }
.rb-job[open] summary { padding-left: 14px; }
.rb-job[open] .rb-job__body { padding-left: 14px; padding-right: 14px; }
.rb-job[open] .toggle { background: #000; color: #fff; transform: rotate(45deg); }
.rb-job__body { padding: 4px 0 42px; }
.rb-job dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px 30px;
  font-size: 14px;
  border-top: 1px solid #e5e5e5;
  padding-top: 28px;
  margin: 0;
}
.rb-job dt { font-weight: 700; color: #555; }
.rb-job dd { margin: 0; color: #111; line-height: 1.9; }
.rb-jobs-note { margin-top: 26px; font-size: 12.5px; color: #444; line-height: 2; }

/* 採用フロー */
.rb-flow { display: flex; margin-top: 96px; position: relative; list-style: none; padding: 0; }
.rb-flow::before { content: ''; position: absolute; top: 32px; left: 10%; right: 10%; height: 1px; background: #e5e5e5; }
.rb-flow li { flex: 1; text-align: center; padding: 0 14px; position: relative; z-index: 1; }
.rb-flow .circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rb-yellow);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 6px 16px rgba(60, 55, 0, 0.18);
}
.rb-flow .circle span { font-family: var(--en, 'Sen'), sans-serif; font-size: 17px; font-weight: 700; }
.rb-flow h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 12px; }
.rb-flow .desc { font-size: 12.5px; color: #222; line-height: 2; letter-spacing: 0.03em; text-align: left; }

/* ギャラリー */
.rb-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 66px; }
.rb-gallery figure { aspect-ratio: 1 / 1; overflow: hidden; }
.rb-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.rb-gallery figure:hover img { transform: scale(1.04); }

/* FAQ */
.rb-faq { margin-top: 56px; border-top: 1px solid #e5e5e5; }
.rb-faq details { border-bottom: 1px solid #e5e5e5; }
.rb-faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  transition: background 0.3s;
}
.rb-faq summary::-webkit-details-marker { display: none; }
.rb-faq summary:hover { background: #fffde6; }
.rb-faq summary::before {
  content: 'Q';
  font-family: var(--en, 'Sen'), sans-serif;
  width: 30px; height: 30px;
  background: var(--rb-yellow);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.rb-faq .toggle { margin-left: auto; font-size: 20px; font-weight: 300; flex-shrink: 0; transition: transform 0.3s; }
.rb-faq details[open] .toggle { transform: rotate(45deg); }
.rb-faq .a { padding: 2px 0 30px 46px; font-size: 14.5px; line-height: 2.1; color: #111; }

/* アクセス */
.rb-access {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
  margin-top: 60px;
}
.rb-access__info { display: grid; grid-template-columns: 96px 1fr; gap: 16px 24px; font-size: 14.5px; margin: 0; }
.rb-access__info dt { font-weight: 700; color: #555; }
.rb-access__info dd { margin: 0; color: #111; line-height: 1.9; }
.rb-access__info dd a { text-decoration: underline; }
.rb-access__map { aspect-ratio: 16 / 10; }
.rb-access__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15); }

/* 最終CTA: 黄色帯で目立たせる */
.rb-entry {
  text-align: center;
  background: var(--rb-yellow);
  padding: 96px 0 130px;
}
.rb-entry .rb-en-ttl, .rb-entry .rb-ja-ttl { color: #000; }
.rb-entry .rb-ja-ttl { margin-bottom: 24px; }
.rb-entry__desc { font-size: 16px; line-height: 2.2; color: #111; }
.rb-entry__btns { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 46px; }
.rb-entry .rb-btn--yellow { background: #000; color: #fff; box-shadow: 0 10px 26px rgba(60, 55, 0, 0.25); }
.rb-entry .rb-btn--yellow:hover { background: #fff; color: #000; }
.rb-entry .rb-btn--tel { background: rgba(255,255,255,0.9); }
.rb-entry__hours { margin-top: 46px; font-size: 12.5px; color: #333; line-height: 2; }

/* 追従応募バー */
.rb-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.14);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes rbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
  .rb-sticky .rb-btn--yellow { animation: rbPulse 2.4s ease-in-out infinite; }
}
.rb-sticky .rb-btn { min-width: 0; flex: 0 1 230px; height: 54px; font-size: 13.5px; }
.rb-sticky .rb-btn--yellow { flex: 0 1 160px; font-size: 16px; }
.rb-sticky .rb-btn--tel { font-size: 15px; }

/* フッターは参考サイト同様の黒に */
.recruit-body .site-footer { background: #000; }

@media (max-width: 1060px) {
  .rb-delight { grid-template-columns: repeat(2, 1fr); gap: 92px 30px; }
}
@media (max-width: 767px) {
  .sp-only { display: inline; }
  .rb-sec { margin-top: 96px; }
  .rb-sec--black { padding: 70px 0; }
  .rb-hero { height: 420px; }
  .rb-hero-cta { margin-top: 36px; flex-direction: column; align-items: stretch; }
  .rb-hero-cta .rb-btn { width: 100%; }
  .rb-ja-ttl { margin-bottom: 34px; }
  .rb-delight { grid-template-columns: 1fr; gap: 84px; margin-top: 84px; }
  .rb-data { grid-template-columns: repeat(2, 1fr); margin-top: 50px; }
  .rb-data li { padding: 30px 10px; }
  .rb-data li + li { border-left: none; }
  .rb-data li:nth-child(even) { border-left: 1px solid #333; }
  .rb-data li:nth-child(n+3) { border-top: 1px solid #333; }
  .rb-owner { grid-template-columns: 1fr; gap: 30px; }
  .rb-owner .rb-ja-ttl { font-size: 21px; }
  .rb-owner__img { max-width: 300px; }
  .rb-job summary { gap: 12px; padding: 22px 0; }
  .rb-job .tag { min-width: 0; padding: 5px 10px; letter-spacing: 0.12em; }
  .rb-job .ttl { font-size: 15px; }
  .rb-job .toggle { width: 32px; height: 32px; font-size: 15px; }
  .rb-job dl { grid-template-columns: 92px 1fr; gap: 10px 14px; }
  .rb-flow { flex-direction: column; gap: 36px; margin-top: 60px; }
  .rb-flow::before { display: none; }
  .rb-flow li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 4px 18px;
    text-align: left;
    padding: 0;
  }
  .rb-flow .circle { width: 56px; height: 56px; margin: 0; grid-row: 1 / 3; }
  .rb-flow h3 { align-self: center; margin-bottom: 0; }
  .rb-gallery { grid-template-columns: repeat(2, 1fr); }
  .rb-access { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
  .rb-access__info { grid-template-columns: 84px 1fr; gap: 12px 16px; }
  .rb-access__map { aspect-ratio: 4 / 3; }
  .rb-entry { padding: 70px 0 120px; }
  .rb-entry__btns { flex-direction: column; align-items: stretch; padding: 0 6%; }
  .rb-sticky { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .rb-sticky .rb-btn { flex: 1; height: 52px; font-size: 12px; }
  .rb-sticky .rb-btn--yellow { flex: 0 1 100px; font-size: 14px; }
  .rb-sticky .rb-btn--tel { font-size: 13px; }
}

/* ===== 採用エントリーページ(recruit/entry) ===== */
.rb-hero--page { height: clamp(240px, 32vh, 340px); }
.rb-hero--page h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 900; letter-spacing: 0.08em; }
.rb-sec--tight { margin-top: 70px; }
.rbe-lead { font-size: 16px; line-height: 2.3; }

/* 電話・LINEカード */
.rbe-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rbe-way {
  border: 1px solid #e5e5e5;
  padding: 42px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.rbe-way__label { font-family: var(--en, 'Sen'), sans-serif; font-size: 13px; letter-spacing: 0.25em; color: #555; }
.rbe-way__tel { font-family: var(--en, 'Sen'), sans-serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: 0.04em; }
.rbe-way__tel:hover { opacity: 0.6; }
.rbe-way__note, .rbe-way__txt { font-size: 13px; line-height: 2; color: #333; }
.rbe-way .rb-btn--line { min-width: 0; width: 100%; max-width: 320px; height: 60px; font-size: 14.5px; }

/* フォーム */
.rb-inner--form { max-width: 760px; }
.rbe-form-lead {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 20px;
}
.rbe-form-lead::before, .rbe-form-lead::after { content: ''; flex: 1; height: 1px; background: #ddd; }
.rbe-form { margin-top: 50px; }
.rbe-form__group {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 46px 0 20px;
  padding-left: 12px;
  border-left: 5px solid var(--rb-yellow);
}
.rbe-field { margin-bottom: 22px; }
.rbe-field label, .rbe-field__ttl { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.rbe-field .req {
  display: inline-block;
  background: #000;
  color: var(--rb-yellow);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: 1px;
}
.rbe-field input[type="text"],
.rbe-field input[type="tel"],
.rbe-field input[type="email"],
.rbe-field input[type="date"],
.rbe-field select,
.rbe-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
  color: #000;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.rbe-field textarea { resize: vertical; line-height: 1.9; }
.rbe-field input:focus, .rbe-field select:focus, .rbe-field textarea:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.55);
}
.rbe-radios { display: flex; gap: 26px; flex-wrap: wrap; padding: 6px 2px; }
.rbe-radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 400; margin: 0; cursor: pointer; }
.rbe-radios input { width: 18px; height: 18px; accent-color: #000; }

/* 個人情報 */
.rbe-privacy {
  margin-top: 50px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  padding: 28px 26px;
}
.rbe-privacy h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; }
.rbe-privacy p { font-size: 12.5px; line-height: 2.1; color: #333; }
.rbe-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.rbe-agree input { width: 20px; height: 20px; accent-color: #000; }

/* 送信 */
.rbe-submit { margin-top: 40px; text-align: center; }
.rbe-submit__btn { border: 0; cursor: pointer; min-width: 320px; height: 76px; font-size: 17px; }
.rbe-submit__note { margin-top: 16px; font-size: 12.5px; color: #444; line-height: 2; }
.rbe-result { margin-top: 14px; font-size: 14px; font-weight: 700; }
.rbe-result.is-ok { color: #0a7a33; }
.rbe-result.is-error { color: #c62828; }
.rbe-fallback { width: 100%; margin-top: 14px; font: inherit; font-size: 13px; padding: 12px; border: 1px solid #ccc; }

@media (max-width: 767px) {
  .rbe-ways { grid-template-columns: 1fr; }
  .rbe-way { padding: 32px 22px; }
  .rbe-submit__btn { width: 100%; min-width: 0; }
}

/* ===== まつげエクステLP(eyelash) — 白×ダスティローズ×明朝 ===== */
.eyelash-body {
  --el-rose: #c07a6c;
  --el-rose-deep: #a05a4e;
  --el-cream: #f9f1ee;
  --el-ink: #443733;
  --el-line: #ecdcd6;
}
.eyelash-body main {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--el-ink);
  font-weight: 400;
  background: #fffdfc;
}
.el-inner { max-width: 1080px; margin: 0 auto; padding: 0 5%; }
.el-inner--narrow { max-width: 840px; }
.el-sec { padding: 96px 0; }
.el-sec--tint {
  background-color: var(--el-cream);
  background-image: radial-gradient(rgba(192, 122, 108, 0.08) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* 見出し */
.el-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 54px;
}
.el-ttl::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, var(--el-rose), transparent);
}
.el-ttl .en {
  display: block;
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--el-rose);
  margin-bottom: 14px;
}

/* ヒーロー */
.el-hero {
  position: relative;
  overflow: hidden;
  padding: 174px 0 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 10%, rgba(192, 122, 108, 0.16) 0, transparent 34%),
    radial-gradient(circle at 4% 80%, rgba(228, 178, 163, 0.2) 0, transparent 32%),
    linear-gradient(175deg, #fdf7f5 0%, var(--el-cream) 70%, #fffdfc 100%);
}
.el-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(192, 122, 108, 0.13) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 78%);
  pointer-events: none;
}
.el-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 50px;
  align-items: center;
  flex: 1;
}
.el-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--el-rose-deep);
  border: 1px solid var(--el-rose);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 24px;
  background: #fff;
}
.el-hero__text h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.05em;
}
.el-hero__text h1 em {
  font-style: normal;
  color: var(--el-rose-deep);
  background: linear-gradient(transparent 68%, rgba(192, 122, 108, 0.22) 68%);
}
.el-hero__sub { margin-top: 20px; font-size: 14.5px; line-height: 2.1; }
.el-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--el-line);
  border-radius: 999px;
  padding: 10px 26px 10px 18px;
  margin-top: 24px;
  box-shadow: 0 8px 24px rgba(160, 90, 78, 0.1);
}
.el-price-pill .label {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.08em;
  background: var(--el-rose);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
}
.el-price-pill strong { font-family: var(--en, 'Sen'), sans-serif; font-size: 30px; color: var(--el-rose-deep); }
.el-price-pill small { font-size: 12px; color: var(--el-ink); font-weight: 400; margin-left: 4px; }
.el-hero__img { position: relative; }
.el-hero__img::before {
  content: '';
  position: absolute;
  top: -34px; right: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(192, 122, 108, 0.55);
}
.el-hero__img::after {
  content: '';
  position: absolute;
  bottom: -22px; left: -24px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(192, 122, 108, 0.18);
}
.el-hero__img img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 60px rgba(160, 90, 78, 0.22); }

/* CTAボタン(丸ピル) */
.el-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.el-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 230px;
  min-height: 64px;
  padding: 10px 26px;
  border-radius: 999px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.el-btn strong { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.el-btn span { font-size: 10.5px; opacity: 0.85; letter-spacing: 0.04em; }
.el-btn:hover { transform: translateY(-2px); }
.el-btn--main {
  background: linear-gradient(135deg, var(--el-rose) 0%, var(--el-rose-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(160, 90, 78, 0.35);
}
.el-btn--line { background: #06C755; color: #fff; box-shadow: 0 10px 24px rgba(6, 199, 85, 0.25); }
.el-btn--tel { background: #fff; color: var(--el-ink); border: 1px solid var(--el-ink); }
.el-btn--tel strong { font-family: var(--en, 'Sen'), sans-serif; letter-spacing: 0.04em; }

/* バッジ帯 */
.el-badges {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 56px auto 0;
  margin-top: auto;
  padding: 40px 5% 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
}
.el-badges li {
  background: #fff;
  border: 1px solid var(--el-line);
  border-radius: 16px;
  padding: 18px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 26px rgba(160, 90, 78, 0.1);
}
.el-hero + .el-sec { padding-top: 96px; }

/* チェックリスト */
.el-checks { list-style: none; padding: 0; max-width: 620px; margin: 0 auto; }
.el-checks li {
  position: relative;
  padding: 14px 6px 14px 44px;
  border-bottom: 1px dashed var(--el-line);
  font-size: 15px;
  line-height: 1.8;
}
.el-checks li strong { color: var(--el-rose-deep); }
.el-checks li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--el-rose);
  color: #fff;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.el-checks__note { text-align: center; margin-top: 28px; font-size: 15px; font-weight: 500; }

/* 理由カード */
.el-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.el-reason {
  background: #fff;
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 10px 26px rgba(160, 90, 78, 0.08);
}
.el-reason .num {
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--el-rose);
}
.el-reason h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; margin: 8px 0 12px; line-height: 1.6; }
.el-reason p { font-size: 13.5px; line-height: 2; }

/* メニューカード */
.el-menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.el-menu-card {
  background: #fff;
  border: 1px solid var(--el-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(160, 90, 78, 0.08);
  display: flex;
  flex-direction: column;
}
.el-menu-card--pickup { border: 2px solid var(--el-rose); }
.el-menu-card figure { aspect-ratio: 4 / 3; overflow: hidden; }
.el-menu-card figure img { width: 100%; height: 100%; object-fit: cover; }
.el-menu-card .body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.el-menu-card .tag {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--el-rose-deep);
  border: 1px solid var(--el-rose);
  border-radius: 999px;
  padding: 4px 12px;
}
.el-menu-card .tag--hot { background: var(--el-rose); color: #fff; }
.el-menu-card h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; margin: 12px 0 10px; }
.el-menu-card p { font-size: 13px; line-height: 1.95; }
.el-menu-card .price {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 22px;
  color: var(--el-rose-deep);
  font-weight: 700;
}
.el-menu-card .price small { font-size: 11px; font-weight: 400; color: var(--el-ink); font-family: 'Noto Sans JP', sans-serif; }

/* 料金表 */
.el-price-group { background: #fff; border-radius: 18px; padding: 26px 30px; margin-bottom: 20px; box-shadow: 0 8px 22px rgba(160, 90, 78, 0.07); }
.el-price-group h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-rose-deep);
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--el-line);
}
.el-price-group dl { margin: 0; }
.el-price-group dl > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px dashed var(--el-line);
  font-size: 14px;
}
.el-price-group dl > div:last-child { border-bottom: none; }
.el-price-group dd { margin: 0; font-family: var(--en, 'Sen'), sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; }
.el-price-group .hot dt { font-weight: 700; }
.el-price-group .mini {
  font-size: 10px;
  background: var(--el-rose);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 6px;
  vertical-align: 1px;
}
.el-price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.el-price-note { font-size: 12.5px; line-height: 2; margin-top: 6px; color: #6d5c56; }

/* デザイン3種 */
.el-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.el-design figure { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
.el-design img { width: 100%; height: 100%; object-fit: cover; }
.el-design h3 { font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.el-design h3 span { font-family: var(--en, 'Sen'), sans-serif; font-size: 11px; letter-spacing: 0.25em; color: var(--el-rose); margin-left: 10px; }
.el-design p { font-size: 13px; line-height: 1.95; }

/* ギャラリー */
.el-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.el-gallery figure { border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; }
.el-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.el-gallery figure:hover img { transform: scale(1.05); }

/* フロー */
.el-flow { list-style: none; padding: 0; max-width: 680px; margin: 0 auto; }
.el-flow li { position: relative; padding: 0 0 34px 58px; }
.el-flow li::before {
  content: '';
  position: absolute;
  left: 19px; top: 40px; bottom: 0;
  width: 1px;
  background: var(--el-line);
}
.el-flow li:last-child::before { display: none; }
.el-flow h3 { font-family: 'Noto Serif JP', serif; font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.el-flow h3 span {
  position: absolute;
  left: 0; top: -4px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--el-rose);
  color: #fff;
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.el-flow p { font-size: 13.5px; line-height: 2; }

/* FAQ */
.el-faq details { background: #fff; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(160, 90, 78, 0.06); overflow: hidden; }
.el-faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::before {
  content: 'Q';
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--el-rose);
  color: #fff;
  font-family: var(--en, 'Sen'), sans-serif;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.el-faq summary::after { content: '＋'; margin-left: auto; color: var(--el-rose); font-size: 17px; transition: transform 0.3s; }
.el-faq details[open] summary::after { transform: rotate(45deg); }
.el-faq details p { padding: 0 22px 20px 64px; font-size: 13.5px; line-height: 2; }

/* アクセス */
.el-access { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; max-width: 1000px; margin: 0 auto; }
.el-access__info dl { margin: 0; }
.el-access__info dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px dashed var(--el-line);
  font-size: 14px;
  line-height: 1.9;
}
.el-access__info dt { color: var(--el-rose-deep); font-weight: 700; }
.el-access__info dd { margin: 0; }
.el-access__info dd a { text-decoration: underline; }
.el-access__map { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: 0 12px 30px rgba(160, 90, 78, 0.12); }
.el-access__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 最終CTA */
.el-final {
  position: relative;
  background:
    radial-gradient(circle at 90% 20%, rgba(192, 122, 108, 0.14) 0, transparent 32%),
    radial-gradient(circle at 8% 85%, rgba(192, 122, 108, 0.12) 0, transparent 30%),
    linear-gradient(160deg, var(--el-cream) 0%, #f4e2dc 100%);
  padding: 100px 0 150px;
  text-align: center;
  overflow: hidden;
}
.el-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(192, 122, 108, 0.1) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  pointer-events: none;
}
.el-final .el-inner { position: relative; }
.el-final__lead { font-size: 15px; line-height: 2.2; }
.el-final .el-cta { justify-content: center; margin-top: 36px; }
.el-final__hours { margin-top: 40px; font-size: 12.5px; line-height: 2; color: #6d5c56; }

/* 追従バー */
.el-sticky {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(68, 55, 51, 0.25);
}
.el-sticky .el-btn { min-width: 0; min-height: 46px; padding: 6px 22px; }
.el-sticky .el-btn strong { font-size: 13px; }

@media (max-width: 1060px) {
  .el-hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .el-hero__img { order: -1; max-width: 520px; margin: 0 auto; }
  .el-menus { grid-template-columns: 1fr 1fr; }
  .el-menu-card--pickup { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .el-sec { padding: 64px 0; }
  .el-hero { padding-top: 118px; min-height: auto; }
  .el-hero__img::before { width: 90px; height: 90px; top: -20px; right: -12px; }
  .el-hero__img::after { width: 44px; height: 44px; bottom: -14px; left: -12px; }
  .el-hero + .el-sec { padding-top: 64px; }
  .el-badges { grid-template-columns: repeat(2, 1fr); }
  .el-cta { flex-direction: column; }
  .el-btn { width: 100%; }
  .el-price-pill {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 20px;
    padding: 14px 20px;
  }
  .el-price-pill strong { font-size: 26px; }
  .el-reasons { grid-template-columns: 1fr; }
  .el-menus { grid-template-columns: 1fr; }
  .el-menu-card--pickup { grid-column: auto; }
  .el-designs { grid-template-columns: 1fr; }
  .el-gallery { grid-template-columns: repeat(2, 1fr); }
  .el-price-cols { grid-template-columns: 1fr; }
  .el-access { grid-template-columns: 1fr; gap: 28px; }
  .el-final { padding: 70px 0 170px; }
  .el-sticky { left: 10px; right: 10px; transform: none; border-radius: 18px; }
  .el-sticky .el-btn { flex: 1; padding: 6px 8px; }
  .el-sticky .el-btn strong { font-size: 11.5px; letter-spacing: 0; }
}

/* スクリーンリーダー・検索エンジン用の非表示見出し */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== WordPress: 投稿・一覧・ページネーション ===== */
.news-list--archive li { border-bottom: 1px solid rgba(70,60,48,0.12); }
.post-body { padding-top: 10px; }
.post-head time { font-family: var(--en); font-size: 13px; letter-spacing: 0.12em; color: var(--ink-soft); }
.post-title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.6; margin: 10px 0 34px; }
.post-thumb { margin: 0 0 34px; }
.post-thumb img { width: 100%; height: auto; }
.post-content p { line-height: 2.2; margin-bottom: 1.6em; }
.post-content h2 { font-size: 22px; margin: 2em 0 1em; padding-bottom: 10px; border-bottom: 1px solid rgba(70,60,48,0.2); }
.post-content h3 { font-size: 18px; margin: 1.8em 0 0.8em; }
.post-content ul, .post-content ol { margin: 0 0 1.6em 1.4em; line-height: 2; }
.post-content a { text-decoration: underline; }
.post-content img { max-width: 100%; height: auto; }
.post-back { margin-top: 56px; text-align: center; }
.pagination { margin-top: 50px; }
.pagination .nav-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  border: 1px solid var(--ink); font-family: var(--en); font-size: 14px;
}
.pagination .page-numbers.current { background: var(--ink); color: #fff; }
.footer-widgets { max-width: 1120px; margin: 0 auto; padding: 40px 6% 0; color: #cfc8bf; }

/* ===== WordPress 管理バー表示中のヘッダー位置調整 ===== */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ===== メニュー内ジャンプボタン ===== */
.menu-jump {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 36px auto 0;
}
.menu-jump a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px 12px;
  border: 1px solid var(--ink);
  background: #fff;
  text-align: center;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}
.menu-jump .en { font-family: var(--en); font-size: 13px; letter-spacing: 0.18em; }
.menu-jump .jp { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); transition: color 0.3s ease; }
.menu-jump a::after { content: '↓'; font-size: 10px; margin-top: 2px; opacity: 0.55; }
.menu-jump a:hover, .menu-jump a:focus-visible { background: var(--ink); color: #fff; }
.menu-jump a:hover .jp, .menu-jump a:focus-visible .jp { color: rgba(255,255,255,0.8); }
#cut, #perm, #straight, #treatment { scroll-margin-top: 120px; }
@media (max-width: 767px) {
  .menu-jump { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* 予約CTA背後をフッターと同じダークに(clip-pathの切れ目対策) */
.reserve-cta-wrap { background: #211f1c; }

/* スタイル一覧: 担当スタイリスト */
.style-card .style-stylist { font-size: 12px; color: var(--ink-soft); margin-top: 6px; letter-spacing: 0.05em; }
.style-card .style-stylist a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.3s ease; }
.style-card .style-stylist a:hover { opacity: 0.6; }

/* スタイル一覧: ページ切り替え */
.style-pager { display: flex; justify-content: center; gap: 12px; margin-top: 64px; }
.style-pager__btn {
  width: 46px; height: 46px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--en);
  font-size: 15px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.style-pager__btn:hover { background: rgba(37, 31, 26, 0.08); }
.style-pager__btn.is-active { background: var(--ink); color: #fff; cursor: default; }

/* メニュー: 見出し下の施術イメージ */
.menu-sec-img { margin: 6px 0 26px; }
.menu-sec-img img { width: 100%; height: auto; display: block; }

/* INFORMATION: 画像を大きく + 葉っぱ装飾 + MAPボタン */
.info { position: relative; grid-template-columns: 1fr 1.25fr; gap: 60px; overflow: hidden; }
.deco-branch--info {
  position: absolute;
  top: 60px; right: -40px;
  width: 340px;
  opacity: 0.55;
  pointer-events: none;
}
.info-text, .info-imgs { position: relative; z-index: 1; }
.info-imgs { gap: 30px; }
.info-imgs figure img { width: 100%; height: auto; display: block; }
.info-imgs figure:nth-child(2) { width: 76%; margin-left: auto; }
.info-map { margin-top: 30px; }
@media (max-width: 1060px) {
  .info { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .deco-branch--info { width: 220px; top: 20px; }
  .info-imgs figure:nth-child(2) { width: 100%; }
}

/* トップRECRUIT: 半透明の白パネル（テキストのみ） */
.recruit-inner {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 12px 40px rgba(60, 55, 45, 0.10);
  max-width: 760px;
  padding: 0;
}
.recruit-inner > * { max-width: none; }
/* 「.recruit-body」は採用ページの body クラスと同名のため、必ず .recruit-inner でスコープする */
.recruit-inner .recruit-body {
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.recruit-inner .recruit-body > * { max-width: 560px; }
@media (max-width: 1060px) {
  .recruit-inner .recruit-body { padding: 30px 24px 36px; }
}

/* お知らせ: リンクなしの行（プラグイン表示用） */
.news-list li .news-row {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  padding: 22px 30px;
  box-shadow: 0 6px 24px rgba(70, 60, 48, 0.06);
  flex-wrap: wrap;
}

/* ナビ: PICK UP ドロップダウン */
.nav-pickup { position: relative; }
.nav-pickup__btn small, .nav-pickup__btn span { white-space: nowrap; }
.nav-pickup__panel {
  display: none;
  position: absolute;
  top: calc(100% + 24px);
  right: -80px;
  width: 620px;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(50, 45, 38, 0.18);
  z-index: 120;
}
.nav-pickup.is-open .nav-pickup__panel { display: grid; }
.nav-pickup__panel .pu-banner { box-shadow: 0 6px 18px rgba(60, 60, 50, 0.12); }
.nav-pickup__panel .pu-banner .cap { padding: 22px 14px 10px; }
.nav-pickup__panel .pu-banner .cap .en { font-size: 13px; letter-spacing: 0.14em; }
.nav-pickup__panel .pu-banner .cap .jp { font-size: 10px; }
@media (max-width: 1060px) {
  .nav-pickup { position: static; }
  .nav-pickup__panel {
    position: static;
    width: min(84vw, 460px);
    margin: 14px auto 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    gap: 10px;
  }
}

/* セクション見出しの日本語添え */
.sec-title .sec-title-jp {
  display: block;
  font-family: var(--jp);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* スタッフ写真: メディアライブラリの任意サイズ画像を410:600に揃える */
.profile__img img, .round-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 410 / 600;
  object-fit: cover;
}