/* ============================================================
   Nice Eyelash — 各コンテンツセクション固有スタイル
   （Concept / Feature / Flow / BeforeAfter / Reviews /
     Menu / Coupon / FAQ / Shop / Message）
   共通部品・トークンは style.css / tokens.css を参照。
   ============================================================ */


/* ===== concept ===== */
/* ============================================================
   CONCEPT（sections1.js Concept）— 中央寄せ見出し＋ビフォーアフター2×2＋本文
   まつ毛×眉毛セットである旨は、カードごとではなくグリッド上のラベルに一度だけ表示
   ============================================================ */
.ne-concept__inner { display: flex; flex-direction: column; align-items: center; }
.ne-concept__body { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* ビフォーアフター群（共通ラベル＋2×2グリッド）をまとめる枠 */
.ne-concept__ba { width: 100%; max-width: 620px; margin: 24px 0 48px; }
.ne-concept__ba-cap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
.ne-concept__ba-pill {
  font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  color: var(--ivory); background: var(--gold); padding: 7px 20px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-gold);
}
.ne-concept__ba-sub {
  font-family: var(--font-serif); font-style: italic; font-size: 13px;
  letter-spacing: .14em; color: var(--gold-ink);
}
.ne-concept__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%;
}
.ne-concept__photo {
  width: 100%; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.ne-concept__lead {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--text-secondary); text-align: center; max-width: 44ch; margin: 0;
}
/* Concept本文↔直後のCTA帯（自己処理は卒業の囲い）の上下余白を従来の約半分に。
   .ne-section 下=clamp(56,8vw,104) ＋ .ne-cta-band 上=clamp(36,5vw,56) を各々半分に縮める。
   直後の1本目のCTA帯のみが対象（他セクション・他CTA帯は不変）。 */
.ne-concept { padding-bottom: clamp(28px, 4vw, 52px); }
.ne-concept + .ne-cta-band { padding-top: clamp(18px, 2.5vw, 28px); }
/* スマホ幅でも見出しを必ず2行に収める（Conceptのみ。他セクションの見出しは変更しない） */
@media (max-width: 760px) {
  .ne-concept .ne-sec-head__title { font-size: clamp(1.05rem, 5vw, 1.6rem); }
}


/* ===== feature ===== */
/* ============================================================
   FEATURE（sections1.js Feature）— ナイスアイラッシュのこだわり
   背景=muted / 720px幅コンテナ / 丸番号＋見出し横並び→画像→説明 のカード6件グリッド
   ============================================================ */
/* サブ文は指定の2行で固定（max-width 40chの自動折返しで3行化するのを防ぐ）。
   <br> は nowrap でも必ず効くため、各行は折り返さずちょうど2行になる。Featureのみ。 */
.ne-feature .ne-sec-head__sub { max-width: none; white-space: nowrap; }
.ne-feature__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  margin-top: 64px;
}
.ne-feature__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.ne-feature__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .05em;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.ne-feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.ne-feature__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.ne-feature__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 2;
  color: var(--text-secondary);
  margin: 0;
}


/* ===== flow ===== */
/* ============================================================
   FLOW（sections1.js Flow）— 施術の流れ。画像＋テキストの交互2カラム
   原典: wrap(..,720) / SectionHead marginTop:60 / 行間 gap clamp(36,5vw,56)
   各行: grid（偶数indexは左右反転）, gap clamp(20,4vw,52), 中央揃え
   ============================================================ */
.ne-flow__list {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
}

/* 1行 = 画像セル + テキストセルの2カラムグリッド（偶数番目で比率を反転） */
.ne-flow__row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
}
/* 原典 i%2（index 1,3…＝1-based even）で 1.1fr 1fr に反転し、画像を右に */
.ne-flow__row:nth-child(even) {
  grid-template-columns: 1.1fr 1fr;
}
.ne-flow__row:nth-child(even) .ne-flow__media { order: 2; }
.ne-flow__row:nth-child(even) .ne-flow__text  { order: 1; }

/* 画像枠（角丸 lg・影 md・はみ出し隠し） */
.ne-flow__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ne-flow__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* テキストセル：番号バッジ＋見出し行 */
.ne-flow__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.ne-flow__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  letter-spacing: .06em;
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
}
.ne-flow__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-secondary);
  margin: 0;
}

/* モバイル（<=760px）：1カラム・画像が先・16/10 */
@media (max-width: 760px) {
  .ne-flow__row,
  .ne-flow__row:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .ne-flow__media,
  .ne-flow__row:nth-child(even) .ne-flow__media { order: 1; }
  .ne-flow__text,
  .ne-flow__row:nth-child(even) .ne-flow__text  { order: 2; }
  .ne-flow__media img { aspect-ratio: 16 / 10; }
}


/* ===== beforeafter ===== */
/* ============================================================
   BeforeAfter（sections2.js BeforeAfter）— 施術事例 Before & After
   背景=muted。3カードを auto-fit グリッドで並べる。
   各カード：中央寄せ斜体ゴールド施術名＋40x1pxゴールド罫 → 画像（原寸表示）→ 説明文
   ============================================================ */
.ne-beforeafter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 36px);
  margin-top: 60px;
}
.ne-beforeafter__head { text-align: center; margin-bottom: 16px; }
.ne-beforeafter__name {
  font-family: var(--font-serif); font-style: italic; font-size: 17px;
  letter-spacing: .08em; color: var(--gold-ink);
}
.ne-beforeafter__rule {
  display: block; width: 40px; height: 1px; background: var(--gold); margin: 12px auto 0;
}
.ne-beforeafter__frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--white);
}
.ne-beforeafter__img { width: 100%; display: block; }
.ne-beforeafter__desc {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.95;
  color: var(--text-secondary); margin: 18px 4px 0;
}


/* ===== reviews ===== */
/* ============================================================
   Reviews（sections2.js Reviews）— 暗背景の口コミカード（Voice）
   ============================================================ */
.ne-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin: 56px 0 48px;
}
.ne-reviews__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.ne-reviews__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 2;
  color: var(--greige-100);
  margin: 18px 0 22px;
}
.ne-reviews__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--gold-light);
}
.ne-reviews__summary { text-align: center; }
.ne-reviews__avg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: .08em;
  color: var(--ivory);
  line-height: 1.6;
}
.ne-reviews__avg-num {
  font-family: var(--font-serif);
  color: var(--gold-light);
  font-size: 1.4em;
}
.ne-reviews__note {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--greige-400);
  margin-top: 12px;
}


/* ===== menu ===== */
/* ============================================================
   Menu（sections2.js Menu）— メニュー・料金（最重要セクション）
   ============================================================ */

/* グループ群：縦並び。SectionHead 直後に marginTop:56 */
.ne-menu__groups {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

/* featured グループのみ cream の囲み箱（1.5px ゴールド枠・radius-xl・shadow-md） */
.ne-menu__group--featured {
  background: var(--cream);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--gold);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-md);
}

/* グループ見出しブロック（中央寄せ） */
.ne-menu__group-head { text-align: center; margin-bottom: 14px; }

/* ✦ MOST POPULAR ✦（featured のみ） */
.ne-menu__popular { margin-bottom: 14px; }
.ne-menu__popular-mark {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-serif); font-style: italic; font-size: 13px;
  letter-spacing: .16em; color: var(--gold-deep);
}

/* band 名のゴールド pill */
.ne-menu__band {
  display: inline-block; font-family: var(--font-body); font-weight: 500;
  font-size: 15px; letter-spacing: .12em; color: var(--ivory);
  background: var(--gold); padding: 11px 36px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-gold);
}
.ne-menu__band--featured { font-size: 17px; padding: 13px 44px; }

/* note（ゴールドink小） */
.ne-menu__note {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.9;
  letter-spacing: .04em; color: var(--gold-ink);
  margin: 14px auto 0; max-width: 52ch;
}

/* items グリッド */
.ne-menu__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 44px);
  margin-top: 22px;
}

/* BracketHead ラッパー（marginBottom:18） */
.ne-menu__frame { margin-bottom: 18px; }

/* 画像枠（aspectRatio 4/3・radius-lg・shadow-md） */
.ne-menu__photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); margin-bottom: 20px;
}
.ne-menu__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}

/* save バッジ（左上 ivory pill） */
.ne-menu__save {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px;
  letter-spacing: .04em; color: var(--espresso); background: var(--ivory);
  padding: 6px 12px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}

/* item 明朝見出し */
.ne-menu__title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: .04em; color: var(--ink); margin: 0 0 12px; line-height: 1.5;
}

/* item 説明 */
.ne-menu__desc {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.95;
  color: var(--text-secondary); margin: 0 0 18px;
}

/* item 注記 */
.ne-menu__item-note {
  font-family: var(--font-body); font-size: 11px; color: var(--text-muted); margin: 10px 0 0;
}

/* 締めの本文 */
.ne-menu__closing {
  text-align: center; font-family: var(--font-body); font-size: 15px;
  line-height: 2.1; color: var(--text-secondary);
  max-width: 46ch; margin: 64px auto 0;
}


/* ===== coupon ===== */
/* ============================================================
   Coupon（sections2.js Coupon）— 人気クーポン
   背景=既定(ivory) / featured=cream+ゴールド枠+shadow-md / 通常=white+subtle枠+shadow-sm
   ============================================================ */
.ne-coupon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.ne-coupon__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow-sm);
}
.ne-coupon__card--featured {
  background: var(--cream);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}
.ne-coupon__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ne-coupon__tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ivory);
  background: var(--greige-400);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.ne-coupon__tag--featured { background: var(--gold); }
.ne-coupon__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold-ink);
}
.ne-coupon__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
  flex: 1;
}
.ne-coupon__note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin: 22px 0 0;
}
.ne-coupon__more {
  text-align: center;
  margin-top: 32px;
}
.ne-coupon__more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--gold-ink);
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 13px 30px;
  transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.ne-coupon__more-link:hover {
  background: var(--gold);
  color: var(--ivory);
}


/* ===== faq ===== */
/* ============================================================
   FAQ（sections3.js Faq）— よくある質問 / Q&A アコーディオン
   ============================================================ */
.ne-faq__acc { margin-top: 48px; }


/* ===== shop ===== */
/* ============================================================
   Shop（sections3.js Shop / StoreTable）— エリア別 店舗アコーディオン
   ============================================================ */
/* エリアブロックの縦並び（marginTop:56 ＋ gap:clamp(28,4vw,44)） */
.ne-shop__areas { margin-top: 56px; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }

/* エリア見出し（ゴールド縦バー＋明朝エリア名） */
.ne-shop__area-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ne-shop__bar { flex: none; width: 4px; height: 20px; background: var(--gold); border-radius: var(--radius-pill); }
.ne-shop__area-name {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: .08em; color: var(--ink); margin: 0;
}

/* StoreTable：評価行 */
.ne-shop__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ne-shop__reviews { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }

/* StoreTable：情報テーブル（角丸枠でクリップ） */
.ne-shop__table { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.ne-shop__row { display: grid; grid-template-columns: 92px 1fr; border-bottom: 1px solid var(--border-subtle); }
.ne-shop__row:last-child { border-bottom: none; }
.ne-shop__label {
  background: var(--greige-50); padding: 12px 14px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--greige-600); display: flex; align-items: center;
}
.ne-shop__value {
  padding: 12px 16px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.7;
  color: var(--text-primary); white-space: pre-line;
}

/* StoreTable：ホットペッパー予約ボタン（ゴールド・ピル） */
.ne-shop__reserve {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 20px; height: 54px; border-radius: var(--radius-pill); text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: .08em;
  color: var(--ivory); background: var(--gold); box-shadow: var(--shadow-gold);
  transition: background var(--dur-base) var(--ease-soft);
}
.ne-shop__reserve:hover { background: var(--gold-deep); }


/* ===== message ===== */
/* ============================================================
   Message（sections3.js Message）— 「最後に」中央寄せの締めセクション
   ============================================================ */
/* 原典は下パディングのみ clamp(40px,6vw,72px)（.ne-section 既定と異なる）→ 個別に上書き */
.ne-message { padding-bottom: clamp(40px, 6vw, 72px); }
.ne-message__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ne-message__body {
  font-family: var(--font-body); font-size: 14.5px; line-height: 2.2;
  color: var(--text-secondary); max-width: 42ch; margin: 36px 0 44px;
}
.ne-message__p { margin: 0 0 1.6em; }
.ne-message__p--last { margin: 0; }
.ne-message__figure {
  width: 100%; max-width: 600px; border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 36px;
}
.ne-message__img { width: 100%; display: block; }
.ne-message__closing {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: .08em; color: var(--ink); margin-bottom: 26px;
}
.ne-message__logo { display: inline-flex; }
.ne-message__logo img { height: 48px; width: auto; display: block; }