/* ============================================================
   Auguri! ─ エステ 3 コース（本番・A 案「3 列で縦に伸ばす」）
   ------------------------------------------------------------
   2026-09-16 高野様ご確定：組みは **A 案**（デモ 16 番）。
   ai の 3 列の骨格（写真 400×265・列頭 284 / 737 / 1190）はそのままに、
   罫の下へ本文・こんな方におすすめ・期待できる効果を積み、価格は 3 列とも同じ高さに揃える。

   帯の地色（#f8f6f1）・書体・罫の作り（0.5px の黒）・円の価格表示は ai のまま。
   写真枠の天から下は新しい組みなので、ai の実測値ではなく下の律動で組んでいる
   （罫・字送りは ai に倣う）。座標は帯 b-es-our の中の相対値。

   ※ 共通の部品は `.esa__*` のほかに `.esb__*` / `.esc__*` にも当てている。
      B・C 案（デモ 16 番で見比べた組み）が同じ部品を使うため。本番では .esa だけを使う。
   ============================================================ */

/* ── 共通の部品（A・B・C で使い回す）───────────────────────────── */
.esa, .esb, .esc { flex-direction: column; color: var(--c-ink); }
.esb { flex-direction: row; }

/* 番号／分類 ── ai の「01／肌再生」と同じ組み（番号は Cormorant、分類は明朝）。
   2026-09-16 高野様ご指示：番号 15px・分類 14px → どちらも 16px */
.esa__num, .esb__num, .esc__num {
  margin: 0; font-family: var(--ff-en-display); font-size: calc(16 * var(--s)); line-height: 1;
  letter-spacing: .12em; font-variant-numeric: lining-nums tabular-nums;
}
.esa__slash, .esb__slash, .esc__slash { margin: 0 calc(2 * var(--s)); opacity: .45; }
.esa__cat, .esb__cat, .esc__cat {
  font-family: var(--ff-jp-body); font-size: calc(16 * var(--s)); letter-spacing: .09em;
  font-feature-settings: "palt";
}
/* 罫 ── ai と同じ 0.5px の黒 */
.esa__rule, .esb__rule, .esc__rule {
  display: block; width: 100%; height: calc(1 * var(--s)); background: var(--c-ink);
  transform: scaleY(.5); transform-origin: 0 0;
}
/* コース名 ── 欧文を主役に、カナを添える（2026-09-16 高野様ご指示：欧文 30 → 32px） */
.esa__name, .esb__name, .esc__name { margin: 0; font-weight: inherit; display: flex; align-items: baseline; gap: calc(6 * var(--s)); }
.esa__name-en, .esb__name-en, .esc__name-en {
  font-family: var(--ff-en-display); font-size: calc(32 * var(--s)); line-height: 1; letter-spacing: .05em;
}
.esa__name-jp, .esb__name-jp, .esc__name-jp {
  font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); line-height: 1; letter-spacing: .08em; opacity: .62;
}
/* キャッチ 2 行 */
.esa__catch, .esb__catch, .esc__catch {
  margin: 0; font-family: var(--ff-jp-display); font-size: calc(16 * var(--s)); line-height: 1.85;
  letter-spacing: .08em; font-feature-settings: "palt";
}
.esa__catch .ln, .esb__catch .ln, .esc__catch .ln { display: block; }
/* 本文 */
.esa__body, .esb__body, .esc__body {
  margin: 0; font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); line-height: 2.05;
  letter-spacing: .06em; font-feature-settings: "palt"; text-align: justify;
}

/* ── こんな方におすすめ／期待できる効果 ────────────────────────
   2026-09-16 高野様「より視覚的に分かりやすく、スタイリッシュに」
   ・節の頭に列いっぱいの 0.5px 罫を渡し、2 つの節を「ひと目で別のもの」にする
   ・見出しは字間を広くとった 14px。読む文字ではなく「札」として置く
   ・印を 2 種類に分ける ── おすすめ＝細い輪（○・問い）／効果＝短い罫（—・答え）
     サイトの語彙（View All の円・0.5px の黒罫）から借りているので、足した感じが出ない
   ・効果は「／」で流さず 2 列に組む。語が行をまたいで割れない
   ============================================================ */
.esa__sub, .esb__sub, .esc__sub {
  background-image: linear-gradient(var(--c-ink), var(--c-ink));
  background-repeat: no-repeat; background-size: 100% .5px; background-position: 0 0;
  padding-top: calc(18 * var(--s));
}
.esa__lab, .esb__lab, .esc__lab {
  margin: 0 0 calc(14 * var(--s));
  font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); line-height: 1;
  letter-spacing: .2em; opacity: .5; font-feature-settings: "palt";
}
.esa__rec, .esb__rec, .esc__rec, .esa__eff, .esb__eff, .esc__eff {
  margin: 0; padding: 0; list-style: none;
  font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); letter-spacing: .07em; font-feature-settings: "palt";
}
.esa__rec li, .esb__rec li, .esc__rec li,
.esa__eff li, .esb__eff li, .esc__eff li {
  line-height: 1.95; padding-left: calc(18 * var(--s)); position: relative;
}
/* おすすめ＝細い輪（φ5・0.5px） */
.esa__rec li::before, .esb__rec li::before, .esc__rec li::before {
  content: ""; position: absolute; left: 0; top: calc(11 * var(--s));
  width: calc(5 * var(--s)); height: calc(5 * var(--s)); border-radius: 50%;
  box-shadow: inset 0 0 0 .5px var(--c-ink); opacity: .55;
}
/* 効果＝短い罫（ai と同じ 0.5px の黒）。2 列に組んで語を割らない。
   左右を 1.1 : 0.9 にしているのは、いちばん長い「フェイスラインの引き締め」（14px・字送り .07em で約 198px）を
   1 行に収めるため。等分だと 192px しかなく、ここだけ 2 行になって 03 の価格が下にずれる（2026-09-16） */
.esa__eff, .esb__eff, .esc__eff {
  display: grid; grid-template-columns: 1.1fr .9fr; column-gap: calc(16 * var(--s));
}
.esa__eff li::before, .esb__eff li::before, .esc__eff li::before {
  content: ""; position: absolute; left: 0; top: calc(13 * var(--s));
  width: calc(9 * var(--s)); height: .5px; background: var(--c-ink); opacity: .55;
}
/* 価格 ── ai と同じ「白い円に分・右に料金」 */
.esa__price, .esb__price, .esc__price { position: relative; margin: 0; height: calc(80 * var(--s)); }
.esa__price-c, .esb__price-c, .esc__price-c {
  position: absolute; left: 0; top: 0; width: calc(80 * var(--s)); height: calc(80 * var(--s));
  border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 calc(1 * var(--s)) #d3d3d2;
}
.esa__price-min, .esb__price-min, .esc__price-min {
  position: absolute; left: 0; top: 0; width: calc(80 * var(--s)); height: calc(80 * var(--s));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); letter-spacing: .07em;
}
.esa__price-p, .esb__price-p, .esc__price-p {
  /* 2026-09-16：円と料金が近すぎたため、円の右端から 36px 空ける（ai は 18px・料金 16px のとき） */
  position: absolute; left: calc(116 * var(--s)); top: 50%; transform: translateY(-50%); margin: 0;
  font-family: var(--ff-jp-body); font-size: calc(20 * var(--s)); line-height: 1; letter-spacing: .07em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.esa__price-t, .esb__price-t, .esc__price-t { font-size: calc(12 * var(--s)); letter-spacing: .06em; opacity: .55; margin-left: calc(6 * var(--s)); }
/* 写真枠 */
.esa__ph, .esb__ph, .esc__ph { position: relative; background: #bababa; }


/* ── 3 列の位置 ─────────────────────────────────────────────
   天 1114.18＝ai の 1642.18 から、削除した SONIC ESTHETIC のぶん（528px）だけ上げた値。
   お試しメニューの足元からの空き（128px）は ai の律動のまま。
   ============================================================ */
.esa { display: flex; }
.esa {
  top: calc(1114.18 * var(--s)); width: calc(400 * var(--s)); height: calc(1030 * var(--s));
}
.esa1 { left: calc(284 * var(--s)); }
.esa2 { left: calc(737 * var(--s)); }
.esa3 { left: calc(1190 * var(--s)); }
.esa__ph { width: calc(400 * var(--s)); height: calc(265 * var(--s)); flex: none; }
.esa__num { margin-top: calc(44 * var(--s)); }
.esa__rule { margin-top: calc(17 * var(--s)); }
.esa__name { margin-top: calc(26 * var(--s)); }
.esa__catch { margin-top: calc(16 * var(--s)); }
.esa__body { margin-top: calc(20 * var(--s)); }
.esa__sub { margin-top: calc(26 * var(--s)); }
.esa__price { margin-top: auto; }

/* ── お試しメニューの料金（2026-09-16 高野様ご指示：3 コースに揃えて 16 → 20px）──
   料金が 4.4px 幅広くなるので、その右の「(税込)」も同じだけ右へ。
   ai の並び（料金の右端から 5.8px）はそのまま。ベースラインは ai のまま動かしていない。 */
.b-es-our .trial__price__tax { left: calc(1166.1 * var(--s)); }   /* 生成 CSS より後に読むので、詳細度をひとつ上げる */

/* ============================================================
   2026-09-27 田中様のフィードバック（手書き 3 枚・高野様ご確認済み）で組み替え
   ・3 つのオールハンドコースを上に（左から Premier → Classico → Basic。番号 01／02／03 は外し、分類は残す）
   ・その下に「ソニックエステ」を新設（文字は左・写真 53 は右）：3 つの工程と 45分 8,800円（税込）
   ・いちばん下に「ソニックエステのお試し」（写真 53-2 は左・文字は右）：45分 3,300円
   座標は帯 b-es-our の中の相対値（1920 基準）。罫（394.82）までは ai のまま。
   ・罫 → 見出し「お肌に合わせて選ぶ、3つのオールハンドコース。」：これまでの罫 → お試しの写真と同じ空き
   ・見出しのベースライン → コースの天：これまでと同じ 82.8
   ・コースの足元 → ソニックエステ、ソニックエステの足元 → お試しの写真：160
   ・帯の下の余白：これまでと同じ 197.82
   お試しの文字は ai の組み（写真の天からの距離）のまま、写真と一緒に +2051.06 下げている。
   ソニックエステは文字と写真を 1 つの格子に入れ、写真を文字の高さの中央に置く（お試しの逆の並び）。
   ============================================================ */
@media (min-width: 768px) {
  main.page .b-es-our { height: calc(3120.58 * var(--s)); }
  .b-es-our .eso__h3 { top: calc(var(--s) * (502.7 - 18 - 36 * var(--k-jp-36, var(--k-jp)))); }
  .b-es-our .esa { top: calc(585.5 * var(--s)); }

  .b-es-our .sonic {
    left: calc(262.04 * var(--s)); top: calc(1775.5 * var(--s)); width: calc(1327.96 * var(--s));
    display: grid; grid-template-columns: calc(600 * var(--s)) calc(600 * var(--s)); column-gap: calc(127.96 * var(--s));
    align-items: center; color: var(--c-ink);
  }
  .b-es-our .eso__sonic-ph { grid-column: 2; grid-row: 1; width: calc(600 * var(--s)); height: calc(400 * var(--s)); }
  .b-es-our .sonic__txt { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
  .sonic__en { font-size: calc(18 * var(--s)); line-height: 1; letter-spacing: .07em; }
  .sonic__h { margin-top: calc(21 * var(--s)); font-size: calc(36 * var(--s)); line-height: 1; letter-spacing: .08em; font-feature-settings: "palt"; font-weight: inherit; }
  .sonic__steps { margin: calc(36 * var(--s)) 0 0; }
  .b-es-our .sonic__price { margin-top: calc(36 * var(--s)); }

  .b-es-our .eso__trial-ph { top: calc(2522.76 * var(--s)); }
  .b-es-our .trial__en { top: calc(var(--s) * (2610.92 - 9 - 18 * var(--k-jp-18, var(--k-jp)))); }
  .b-es-our .trial__h { top: calc(var(--s) * (2667.99 - 18 - 36 * var(--k-jp-36, var(--k-jp)))); }
  .b-es-our .trial__desc { top: calc(var(--s) * (2729.29 - 7 - 14 * var(--k-jp-14, var(--k-jp)))); }
  .b-es-our .trial__price__circle { top: calc(2770.44 * var(--s)); }
  .b-es-our .trial__price__min { top: calc(var(--s) * (2815.64 - 7 - 14 * var(--k-jp-14, var(--k-jp)))); }
  .b-es-our .trial__price__price { top: calc(var(--s) * (2816.03 - 10 - 20 * var(--k-jp-20, var(--k-jp)))); }
  .b-es-our .trial__price__tax { top: calc(var(--s) * (2814.51 - 6 - 12 * var(--k-jp-12, var(--k-jp)))); }
}
/* ソニックエステの写真は section の中にあるので、写真（img）と枠の縁の基準にする */
.b-es-our .eso__sonic-ph { position: relative; background-color: #bababa; }
/* 工程（PC・SP 共通の見え方）
   2026-09-28 田中様（手書き）「線をなくす」「順番がわかるように」：
   工程と工程のあいだの 0.5px の罫はやめ、細い線の ▽ を置いて上から下への順を示す。
   見出し「ソニックエステ」の下の罫（最初の工程の上）は残す（高野様ご判断）。
   ▽ は 13×11・線 0.8px の黒を 6 割の濃さで。左端から 53.5（工程名のおよそ中ほど）に置く */
.sonic__steps { padding: 0; }
.sonic__step:first-child {
  background-image: linear-gradient(var(--c-ink), var(--c-ink));
  background-repeat: no-repeat; background-size: 100% .5px; background-position: 0 0;
  padding-top: calc(18 * var(--s));
}
.sonic__step + .sonic__step::before {
  content: ""; display: block; width: calc(13 * var(--s)); height: calc(11 * var(--s));
  margin: calc(20 * var(--s)) 0 calc(18 * var(--s)) calc(53.5 * var(--s));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M.7.6h11.6L6.5 10.2z' fill='none' stroke='%23000' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .6;
}
.sonic__step-h {
  font-family: var(--ff-jp-display); font-size: calc(16 * var(--s)); line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt";
}
.sonic__step-p {
  margin: calc(8 * var(--s)) 0 0; font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); line-height: 2.05;
  letter-spacing: .06em; font-feature-settings: "palt";
  word-break: keep-all; overflow-wrap: anywhere;   /* 語の途中（「10分／間」「肌／あれ」）で折り返さない。<wbr> の位置で折る（2026-09-28） */
}
/* SP：コース 3 つ → ソニックエステ（写真は右寄せ 72%）→ お試し（写真は左寄せ 72%）の順に 1 列で */
@media (max-width: 767px) {
  main.page .b-es-our .eso__h3 { order: 6; }
  main.page .b-es-our .esa { order: 7; }
  main.page .b-es-our .sonic { order: 8; display: flex; flex-direction: column; gap: var(--sp-text-gap); margin-top: 48px; }
  main.page .b-es-our .eso__trial-ph { order: 9; margin-top: 48px; }
  main.page .b-es-our .trial { order: 10; }
  main.page .b-es-our .eso__sonic-ph { width: 72%; height: auto; aspect-ratio: 600 / 400; margin-left: auto; }
  main.page .b-es-our .sonic__txt { display: flex; flex-direction: column; gap: 12px; }
  main.page .b-es-our .sonic__en { font-size: 14px; line-height: 2; }
  main.page .b-es-our .sonic__h { margin: 0; font-size: var(--sp-fs-h3); line-height: 1.6; }
  main.page .b-es-our .sonic__steps { margin: 4px 0 0; }
  main.page .b-es-our .sonic__step:first-child { padding-top: 14px; }
  main.page .b-es-our .sonic__step + .sonic__step::before { width: 12px; height: 10px; margin: 16px 0 14px 48px; }
  main.page .b-es-our .sonic__step-h { font-size: 15px; }
  main.page .b-es-our .sonic__step-p { margin-top: 6px; font-size: 14px; line-height: 2; text-wrap: pretty; }   /* 最後の行が「除去。」だけにならないように（360 幅） */
  main.page .b-es-our .sonic__price { margin-top: 16px; }
}