/* ===== base.css ===== */
/* =========================================================
   ローマピンク LP — base / common components
   PC design: 950px wide / SP design: 375px wide (breakpoint 767px)
   ========================================================= */

:root {
  --c-pink: #f07799;
  --c-wine: #991d49;
  --c-green: #2bac38;
  --c-brown: #40220f;
  --c-text: #3e3a39;
  --c-cream: #f7e5af;
  --c-bg: #faf8f8;       /* #f6f1f0 @50% on white */
  --c-white: #fff;
  --gold: linear-gradient(90deg, #f0cc7e 0%, #f4db8c 19%, #f9f3e5 41%, #c78a03 73%, #e3b75e 89%, #efca84 95%);
  --ff-serif: "Noto Serif JP", serif;
  --ff-sans: "Noto Sans JP", sans-serif;
  --ff-ui: "Inter", "Noto Sans JP", sans-serif;
  --w-pc: 950px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.inner { width: min(100%, var(--w-pc)); margin-inline: auto; }
.sp-only { display: none !important; }
@media (max-width: 767px) {
  .pc-only { display: none !important; }
  .sp-only { display: revert !important; }
  .inner { width: 100%; max-width: 480px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 256px; height: 59px;
  border-radius: 999px;
  color: #fff;
  font-family: var(--ff-ui); font-weight: 700; font-size: 18.67px; letter-spacing: 0;
  transition: transform .2s, box-shadow .3s;
}
.btn:hover { transform: translateY(-1px); }
.btn--reserve { background: var(--c-pink); }
.btn--line { background: var(--c-green); }
.btn__icon { width: 37px; height: auto; flex: none; }

/* ---------- CTA block (heading with slashes + 2 buttons) ---------- */
.cta { text-align: center; color: var(--c-brown); }
.cta__head {
  position: relative; display: inline-block;
  padding: 0 28px;
  margin-bottom: 17px;
}
.cta__head::before, .cta__head::after {
  content: ""; position: absolute; top: 0; width: 21px; height: 57px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--c-brown) calc(50% - 1px), var(--c-brown) calc(50% + 1px), transparent calc(50% + 1px));
}
.cta__head::before { left: 0; }
.cta__head::after { right: 0; transform: scaleX(-1); }
.cta__lead { font-family: var(--ff-ui); font-weight: 700; font-size: 22px; line-height: 1.21; }
.cta__sub { margin-top: 8px; font-family: var(--ff-ui); font-size: 14px; line-height: 1.21; }
.cta__btns { display: flex; justify-content: center; gap: 21px; }

@media (max-width: 767px) {
  .cta { padding-inline: 15px; }
  .cta__head { padding: 0 24px; margin-bottom: 8px; }
  .cta__lead { font-size: 20px; line-height: 25px; }
  .cta__sub { margin-top: 6px; font-size: 14px; line-height: 20px; }
  .cta__btns { gap: 15px; }
  .cta .btn {
    flex-direction: column; gap: 8px;
    width: 165px; height: 110px; border-radius: 10px;
    font-size: 16px;
  }
  .cta .btn__icon { width: 50px; }
}

/* ---------- Section heading: pink triangle ribbon (REASON / VOICE / MESSAGE / FAQ) ---------- */
.ribbon-head {
  position: relative;
  width: 375px; height: 120px;
  padding: 6px 0 0 20px;
}
.ribbon-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--c-pink);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ribbon-head > * { position: relative; }
.ribbon-head__en { display: block; font-family: var(--ff-serif); font-weight: 600; font-size: 35px; line-height: 50px; color: #fff; }
.ribbon-head__ja { display: block; font-weight: 400; font-size: 13px; line-height: 16px; color: var(--c-text); }

/* ---------- Section heading: centered pink serif (MENU / PRICE / BLOG ...) ---------- */
.title-center { text-align: center; color: var(--c-pink); }
.title-center__en { display: block; font-family: var(--ff-serif); font-weight: 600; font-size: 40px; line-height: 1.2; }
.title-center__ja { display: block; font-size: 12px; line-height: 1.4; }

/* =========================================================
   Header
   ========================================================= */
.header {
  position: relative; z-index: 10;
  height: 64px;
  background: var(--gold);
  box-shadow: 0 5px 5px rgba(0,0,0,.75);
}
.header__inner { position: relative; height: 100%; }
.header__catch {
  position: absolute; left: 39px; top: 17px;
  font-family: var(--ff-serif); font-weight: 500; font-size: 16px; line-height: 23px; color: var(--c-brown);
  white-space: nowrap;
}
.header__catch strong { font-weight: 500; font-size: 23px; }
.header__logo { position: absolute; left: 482px; top: 8px; width: 270px; }
.header__limited { position: absolute; left: 636px; top: -6px; width: 153px; }
.header__badge { position: absolute; left: 797px; top: -34px; width: 112px; z-index: 2; }

@media (max-width: 767px) {
  .header { height: 61px; box-shadow: 0 4px 4px rgba(0,0,0,.25); }
  .header__catch { left: 19px; top: 8px; font-size: 13px; line-height: 23px; white-space: normal; }
  .header__catch strong { font-size: 17px; }
  .header__badge { left: auto; right: 19px; top: -33px; }
}

/* =========================================================
   FV (first view) — collage scaled with container units
   PC canvas: 950 x 614  /  SP canvas: 375 x 742
   ========================================================= */
.fv { position: relative; container-type: inline-size; width: min(100%, var(--w-pc)); margin-inline: auto; }
.fv__canvas { --u: calc(100cqw / 950); position: relative; height: calc(var(--u) * 614); }
.fv__canvas > * { position: absolute; }
.fv__bg {
  left: calc(-50vw + 50%); right: calc(-50vw + 50%); top: 0;
  height: calc(var(--u) * 496);
  background: #727171 url("../images/fv-bg.jpg") center / cover no-repeat;
  background-blend-mode: multiply;
}
.fv__title {
  left: calc(var(--u) * 91); top: calc(var(--u) * 5);
  font-family: var(--ff-serif); font-weight: 800; color: var(--c-cream);
  text-shadow: 0 calc(var(--u) * 4.76) calc(var(--u) * 4.76) rgba(0,0,0,.75);
  font-size: calc(var(--u) * 64.26); line-height: calc(var(--u) * 79);
}
.fv__title small { font-size: calc(var(--u) * 48.79); }
.fv__tag {
  left: calc(var(--u) * 128); top: calc(var(--u) * 180);
  width: calc(var(--u) * 340); height: calc(var(--u) * 37);
  display: grid; place-items: center;
  background: var(--c-wine); color: #fff;
  font-family: var(--ff-serif); font-weight: 500; font-size: calc(var(--u) * 21.42); line-height: 1;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 4) rgba(0,0,0,.75);
}
.fv__lead {
  left: calc(var(--u) * 128); top: calc(var(--u) * 225);
  color: #fff; font-size: calc(var(--u) * 14.88); line-height: calc(var(--u) * 25);
  text-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 4) rgba(0,0,0,.75);
}
.fv__features {
  left: calc(var(--u) * 128); top: calc(var(--u) * 295);
  display: flex; gap: calc(var(--u) * 22);
  filter: drop-shadow(calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2) rgba(0,0,0,.75));
}
.fv__features li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: calc(var(--u) * 94); color: #fff; font-weight: 500; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 20); white-space: nowrap; }
.fv__features img { margin-bottom: auto; height: auto; }
.fv__features li:nth-child(1) img { width: calc(var(--u) * 46); margin-top: calc(var(--u) * 3); }
.fv__features li:nth-child(2) img { width: calc(var(--u) * 47); }
.fv__features li:nth-child(3) img { width: calc(var(--u) * 52); margin-top: calc(var(--u) * 3); }
.fv__ba { left: calc(var(--u) * 428); top: calc(var(--u) * 40); width: calc(var(--u) * 206); }
.fv__model { left: calc(var(--u) * 465); top: calc(var(--u) * 11); width: calc(var(--u) * 444); }

/* campaign card */
.fv__campaign {
  left: calc(var(--u) * 50); top: calc(var(--u) * 406);
  width: calc(var(--u) * 850); height: calc(var(--u) * 208);
  border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0;
  background: #fff;
  border: calc(var(--u) * 3) solid transparent; border-bottom: 0;
  background: linear-gradient(#fff, #fff) padding-box, var(--gold) border-box;
}
.campaign { position: absolute; inset: 0; color: var(--c-wine); font-family: var(--ff-serif); }
.campaign > * { position: absolute; }
.campaign__lead { left: calc(var(--u) * 12); top: calc(var(--u) * 15); color: var(--c-brown); font-weight: 600; font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 24); }
.campaign__off { left: calc(var(--u) * 12); top: calc(var(--u) * 51); font-weight: 800; font-size: calc(var(--u) * 35); line-height: calc(var(--u) * 79); white-space: nowrap; }
.campaign__off b { font-size: calc(var(--u) * 50); font-weight: 800; }
.campaign__off small { font-size: calc(var(--u) * 30); font-weight: 800; }
.campaign__item { width: calc(var(--u) * 266); height: calc(var(--u) * 114); }
.campaign__item--cream { left: calc(var(--u) * 282); top: calc(var(--u) * 9); }
.campaign__item--white { left: calc(var(--u) * 566); top: calc(var(--u) * 14); }
.campaign__item img { position: absolute; left: 0; top: calc(var(--u) * 4); width: calc(var(--u) * 103); }
.campaign__item--white img { top: 0; }
.campaign__body { position: absolute; left: calc(var(--u) * 109); top: 0; width: calc(var(--u) * 157); text-align: center; }
.campaign__badge { display: block; margin-top: calc(var(--u) * 4); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 15); background: var(--c-wine); color: #fff; font-weight: 600; font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 26); }
.campaign__badge b { font-size: calc(var(--u) * 21); font-weight: 600; }
.campaign__item--white .campaign__badge { margin-top: 0; font-size: calc(var(--u) * 14); }
.campaign__name { display: block; margin-top: calc(var(--u) * 6); font-weight: 600; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 20); white-space: nowrap; }
.campaign__name b { font-size: calc(var(--u) * 24); font-weight: 600; }
.campaign__item--white .campaign__name { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 15); }
.campaign__note { display: block; font-family: var(--ff-sans); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 14); }
.campaign__big { display: block; font-weight: 700; font-size: calc(var(--u) * 27); line-height: calc(var(--u) * 39); white-space: nowrap; }
.campaign__btns { left: 0; right: 0; top: calc(var(--u) * 135); display: flex; justify-content: center; gap: calc(var(--u) * 11); padding-right: calc(var(--u) * 16); }
.campaign__btns .btn { width: calc(var(--u) * 240); height: calc(var(--u) * 54); font-size: calc(var(--u) * 16.86); gap: calc(var(--u) * 8); }
.campaign__btns .btn__icon { width: calc(var(--u) * 33); }

@media (max-width: 767px) {
  .fv { width: 100%; max-width: 480px; }
  .fv__canvas { --u: calc(100cqw / 375); height: calc(var(--u) * 706); }
  .fv__bg { left: 0; right: 0; top: calc(var(--u) * -25); height: calc(var(--u) * 591); background-image: url("../images/sp-fv-bg.jpg"); background-size: cover; }
  .fv__model { left: calc(var(--u) * 171); top: calc(var(--u) * -36); width: calc(var(--u) * 204); }
  .fv__sp-ribbon { left: calc(var(--u) * 98); top: calc(var(--u) * -7); width: calc(var(--u) * 135); }
  .fv__sp-logo { left: calc(var(--u) * 14); top: calc(var(--u) * 25); width: calc(var(--u) * 230); }
  .fv__sp-title { left: calc(var(--u) * -6); top: calc(var(--u) * 60); width: calc(var(--u) * 259); }
  .fv__ba { left: calc(var(--u) * 234); top: calc(var(--u) * 143); width: calc(var(--u) * 133); }
  .fv__tag { left: calc(var(--u) * 19); top: calc(var(--u) * 178); width: calc(var(--u) * 214); height: calc(var(--u) * 25); font-size: calc(var(--u) * 13); }
  .fv__lead { left: calc(var(--u) * 19); top: calc(var(--u) * 209); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 18); }
  .fv__features { left: calc(var(--u) * 57); top: calc(var(--u) * 273); gap: calc(var(--u) * 12); }
  .fv__features li { font-size: calc(var(--u) * 14); }

  .fv__campaign { left: calc(var(--u) * 15); top: calc(var(--u) * 380); width: calc(var(--u) * 345); height: calc(var(--u) * 326); }
  .campaign__lead { left: 0; right: 0; top: calc(var(--u) * 6); text-align: center; font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 22); }
  .campaign__off { left: 0; right: 0; top: calc(var(--u) * 14); text-align: center; line-height: calc(var(--u) * 72); }
  .campaign__item { width: calc(var(--u) * 162); height: calc(var(--u) * 98); }
  .campaign__item--cream { left: calc(var(--u) * 4); top: calc(var(--u) * 83); }
  .campaign__item--white { left: calc(var(--u) * 170); top: calc(var(--u) * 85); }
  .campaign__item img { left: auto; right: 0; top: calc(var(--u) * 2); width: calc(var(--u) * 68); }
  .campaign__item--white img { top: 0; }
  .campaign__body { left: 0; width: auto; text-align: left; }
  .campaign__badge { display: inline-block; margin-top: 0; padding: 0 calc(var(--u) * 6); height: calc(var(--u) * 20); line-height: calc(var(--u) * 20); font-size: calc(var(--u) * 10); }
  .campaign__badge b { font-size: calc(var(--u) * 15); }
  .campaign__item--white .campaign__badge { height: calc(var(--u) * 18); line-height: calc(var(--u) * 18); font-size: calc(var(--u) * 10.5); }
  .campaign__name { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 16); white-space: normal; }
  .campaign__name b { font-size: calc(var(--u) * 17); }
  .campaign__item--white .campaign__name { margin-top: calc(var(--u) * 1); }
  .campaign__note { font-size: calc(var(--u) * 8.5); line-height: calc(var(--u) * 10); }
  .campaign__big { font-size: calc(var(--u) * 27); line-height: calc(var(--u) * 39); margin-top: calc(var(--u) * -6); }
  .campaign__btns { top: calc(var(--u) * 187); flex-direction: column; align-items: center; gap: calc(var(--u) * 12); padding: 0; }
  .campaign__btns .btn { width: calc(var(--u) * 278); height: calc(var(--u) * 54); }
}

/* =========================================================
   Floating CTA
   ========================================================= */
.float-cta { position: fixed; right: 0; bottom: 100px; z-index: 50; display: flex; flex-direction: column; gap: 7px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.float-cta.is-show { opacity: 1; pointer-events: auto; }
.float-cta .btn { width: 172px; height: 36px; border-radius: 20px 0 0 20px; font-size: 16px; justify-content: flex-start; padding-left: 10px; gap: 8px; }
.float-cta .btn__icon { width: 26px; }
.pagetop {
  position: fixed; right: 40px; bottom: 28px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-wine); color: #fff;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.pagetop.is-show { opacity: 1; pointer-events: auto; }
.pagetop::before { content: ""; width: 12px; height: 12px; border: solid #fff; border-width: 1.5px 0 0 1.5px; transform: translateY(3px) rotate(45deg); }

@media (max-width: 767px) {
  body { padding-bottom: 45px; }
  .float-cta { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; }
  .float-cta .btn { flex: 1; width: auto; height: 45px; border-radius: 0; justify-content: center; }
  .pagetop { right: 15px; bottom: 60px; }
}

/* ===== 10-worries.css ===== */
/* =========================================================
   悩み
   ========================================================= */
.worries { padding-bottom: 31px; }
.worries__hero {
  height: 417px;
  background: #595757 url("../images/worries-bg.jpg") center 12% / cover no-repeat;
  background-blend-mode: multiply;
  color: #fff;
}
.worries__inner { position: relative; padding-inline: 94px; }
.worries__title { padding-top: 27px; font-family: var(--ff-serif); font-weight: 600; font-size: 40px; line-height: 57.5px; }
.worries__sub {
  display: inline-block; margin: 18px 0 0 4px;
  padding-bottom: 5px; border-bottom: 1px solid #d0a900;
  width: 352px;
  font-family: var(--ff-serif); font-weight: 600; font-size: 25px; line-height: 36px; color: #d0a900;
}
.worries__list { margin: 16px 0 0 4px; font-size: 16px; line-height: 40px; }
.worries__list li::before { content: "▪︎"; }

.worries__answer {
  position: relative; z-index: 1;
  width: 380px; height: 185px;
  margin: -86px auto 0; padding-top: 17px;
  background: url("../images/worries-box.svg") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px #231815);
  text-align: center; font-size: 18px; line-height: 30px; color: var(--c-brown);
}
.worries__answer-em { margin-top: 1px; font-weight: 700; color: var(--c-wine); }
.worries__answer-em span { border-bottom: 1.5px solid var(--c-wine); }

.worries__about {
  width: 570px; height: 328px;
  margin: -51px auto 0; padding-top: 63px;
  border-radius: 10px; overflow: hidden;
  background: #727171 url("../images/worries-about.jpg") center / cover no-repeat;
  background-blend-mode: multiply;
  text-align: center; color: #fff;
}
.worries__about-title { font-family: var(--ff-serif); font-weight: 400; font-size: 22px; line-height: 30px; }
.worries__about-text { margin-top: 6px; font-size: 18px; line-height: 28px; }

@media (max-width: 767px) {
  .worries { padding-bottom: 30px; }
  .worries__hero { height: 386px; background-image: url("../images/worries-sp-bg.jpg"); background-size: cover; }
  .worries__inner { padding-inline: 30px; }
  .worries__title { padding-top: 16px; font-size: 30px; line-height: 43px; }
  .worries__sub { width: 282px; margin: 10px 0 0; padding-bottom: 2px; font-size: 20px; line-height: 29px; }
  .worries__list { margin: 6px 0 0; font-size: 13px; line-height: 32px; }

  .worries__answer { width: 315px; height: 153px; margin-top: -89px; padding-top: 16px; font-size: 15px; line-height: 20px; }
  .worries__answer-em { margin-top: 4px; line-height: 25px; }
  .worries__about { width: 316px; height: 371px; margin-top: -22px; padding-top: 30px; }
  .worries__about-title { font-size: 18.5px; line-height: 29px; }
  .worries__about-text { margin-top: 6px; font-size: 15px; line-height: 23px; }
}

/* ===== 20-manga.css ===== */
/* =========================================================
   漫画
   ========================================================= */
.manga { padding-bottom: 30px; }
.manga__img { width: min(100%, 630px); margin-inline: auto; }
@media (max-width: 767px) {
  .manga { padding-bottom: 20px; }
}

/* ストーリー漫画（メッセージの後） */
.manga--story { padding-top: 40px; }
@media (max-width: 767px) {
  .manga--story { padding-top: 30px; }
}

/* ===== 30-cta1.css ===== */
/* =========================================================
   CTA①
   ========================================================= */
.cta1 { padding-bottom: 30px; }
@media (max-width: 767px) {
  .cta1 { padding-bottom: 21px; }
}

/* ===== 40-cases.css ===== */
/* =========================================================
   症例
   ========================================================= */
.cases { background: #fff; padding: 30px 0 41px; }
.cases__inner { padding-inline: 91px; }
.cases__head { position: relative; z-index: 0; height: 142px; }
.cases__head > * { position: absolute; }
.cases__limited { left: 0; top: 0; width: 206px; }
.cases__title { left: 74px; top: 53px; font-family: var(--ff-serif); font-weight: 600; font-size: 25px; line-height: 35.9px; color: var(--c-brown); white-space: nowrap; }
.cases__bubble { left: 344px; top: 17px; width: 81px; }
.cases__product { left: 424px; top: 12px; width: 195px; }

.cases__grid { display: grid; grid-template-columns: repeat(2, 373px); justify-content: space-between; row-gap: 20px; }
.case__title {
  height: 37px; border-radius: 999px;
  background: var(--c-wine); color: #fff; text-align: center;
  font-family: var(--ff-serif); font-weight: 600; font-size: 21px; line-height: 37px;
}
.case__ba { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; padding-left: 27px; }
.case__ba figure { width: 147px; text-align: center; }
.case__ba img { width: 100%; aspect-ratio: 147 / 142; object-fit: cover; border-radius: 8px; }
.case__ba figcaption { margin-top: 3px; font-family: var(--ff-serif); font-size: 17.5px; line-height: 25px; }
.case__arrow { flex: none; width: 0; height: 0; margin-top: 59px; border-style: solid; border-width: 12.5px 0 12.5px 15px; border-color: transparent transparent transparent var(--c-pink); }
.case--lip .case__ba img { aspect-ratio: 146 / 97; }
.case--lip .case__arrow { margin-top: 36px; }
.case--lip .case__ba figcaption { margin-top: 5px; }
/* カード全体をリンクにする（タイトル内のリンクを広げる） */
.case:has(.case__link) { position: relative; }
.case__link { color: inherit; text-decoration: none; }
.case__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.case__link::after { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 0 3px 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: middle; }
.case__illust { width: 344px; margin: 11px 0 0 18px; }

.case__meta { margin-top: 5px; font-size: 16.5px; line-height: 20px; }
.case--vio .case__meta { margin-top: 10px; }
.case__meta p + p { margin-top: 7px; }
.case__meta p:nth-child(2) { display: flex; align-items: center; line-height: 22px; }
.case__tag { display: inline-block; width: 43px; height: 22px; margin-right: 5px; background: #d3a4a4; color: #fff; text-align: center; line-height: 22px; }
.case__tag + .case__tag { margin-left: 10px; }

@media (max-width: 767px) {
  .cases { padding: 15px 0 24px; }
  .cases__inner { padding-inline: 30px; }
  .cases__head { height: 210px; margin-inline: -15px; }
  .cases__limited { left: 0; top: 0; }
  .cases__title { left: 24px; top: 63px; }
  .cases__bubble { left: 255px; top: 2px; width: 84px; }
  .cases__product { left: 180px; top: 102px; width: 155px; z-index: -1; }

  .cases__grid { grid-template-columns: 1fr; row-gap: 19px; }
  .case__title { height: 35px; line-height: 35px; }
  .case__ba { gap: 7px; margin-top: 14px; padding-left: 23px; }
  .case__ba figure { width: 124px; }
  .case__ba figcaption { margin-top: 4px; }
  .case__arrow { margin-top: 50px; border-width: 10.5px 0 10.5px 13px; }
  .case--lip .case__ba figure { width: 123px; }
  .case--lip .case__arrow { margin-top: 31px; }
  .case--lip .case__ba figcaption { margin-top: 4px; }
  .case__illust { width: 304px; margin: 15px 0 0 8px; }

  .case__meta { margin-top: 7px; font-size: 14px; line-height: 17px; }
  .case--vio .case__meta { margin-top: 13px; }
  .case__meta p + p { margin-top: 5px; }
  .case__meta p:nth-child(2) { line-height: 21px; }
  .case__tag { width: 36px; height: 21px; line-height: 21px; margin-right: 4px; }
  .case__tag + .case__tag { margin-left: 9px; }
}

/* ===== 50-reason.css ===== */
/* =========================================================
   選ばれる理由（REASON）
   ========================================================= */
.reason { padding: 44px 0 50px; }
.reason .ribbon-head { margin-left: 91px; }
.reason__lead {
  margin-top: -18px;
  text-align: center;
  font-family: var(--ff-serif); font-weight: 600; font-size: 25px; line-height: 35px; color: var(--c-brown);
}

.reason__points { width: 541px; margin: 32px auto 0; display: grid; gap: 25px; }
.reason-point { display: flex; gap: 32px; align-items: flex-start; }
.reason-point__photo {
  position: relative; flex: none;
  width: 185px; height: 143px; margin-top: 2px;
  border-radius: 10px; overflow: hidden;
}
.reason-point__photo img { width: 100%; height: 100%; object-fit: cover; }
.reason-point__num {
  position: absolute; left: -8px; top: -13px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--c-wine); color: #fff;
  padding: 15px 0 0 14px;
  font-family: var(--ff-serif); font-weight: 500; font-size: 26px; line-height: 26px;
}
.reason-point__num small { display: block; margin-left: -2px; font-size: 11px; line-height: 12px; letter-spacing: .02em; }
.reason-point__body { flex: 1; }
.reason-point__title { font-family: var(--ff-serif); font-weight: 600; font-size: 20px; line-height: 28.7px; color: var(--c-wine); }
.reason-point__text { margin-top: 8px; font-size: 16px; line-height: 23px; color: var(--c-text); }

/* ---- monitor campaign card + map ---- */
.reason__cards { display: flex; gap: 24px; margin: 33px 0 0 122px; align-items: flex-start; }
.reason__map { width: 315px; flex: none; }

.monitor {
  --w: 380px; --h: 346px;
  position: relative; flex: none;
  width: var(--w); height: var(--h);
  border: 5px solid transparent; border-radius: 12px;
  background: linear-gradient(var(--c-pink), var(--c-pink)) padding-box, var(--gold) border-box;
  box-shadow: 0 0 6px 3px rgba(0,0,0,.35);
  color: #fff; font-family: var(--ff-serif); font-weight: 600; text-align: center;
}
.monitor > * { position: absolute; }
.monitor__lead { left: 0; right: 0; top: 15px; font-size: 28px; line-height: 40px; }
.monitor__row { left: 0; top: 88px; width: 100%; }
.monitor__offer { position: absolute; left: 0; top: 0; width: 226px; }
.monitor__offer > span { display: block; white-space: nowrap; }
.monitor b { line-height: 0; }
.monitor__off { height: 55px; font-size: 20px; line-height: 55px; }
.monitor__off small { font-size: 20px; }
.monitor__off b, .monitor__cream b { font-weight: 600; font-size: 38px; }
.monitor__plus {
  position: relative; width: 30px; height: 30px; margin: -1px auto -1px; border-radius: 50%; background: #fff;
}
.monitor__plus::before, .monitor__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-pink); transform: translate(-50%, -50%); }
.monitor__plus::before { width: 22px; height: 5px; }
.monitor__plus::after { width: 5px; height: 22px; }
.monitor__cream { height: 55px; margin-top: -15px; font-size: 20px; line-height: 55px; }
.monitor__note { margin-top: -7px; font-family: var(--ff-sans); font-size: 13px; line-height: 15px; }
.monitor__present { font-size: 36px; line-height: 52px; }
.monitor__img { position: absolute; left: 225px; top: 16px; width: 128px; height: 159px; object-fit: cover; border-radius: 10px; }
.monitor__limit {
  left: 5px; right: 5px; top: 272px; height: 41px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f9f3e5 0%, #f4db8c 35%, #e3b75e 70%, #c78a03 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.6);
  color: var(--c-wine); font-size: 19px; line-height: 41px; letter-spacing: .03em; white-space: nowrap;
}
.monitor__limit b { font-weight: 600; font-size: 30px; }

@media (max-width: 767px) {
  .reason { padding: 0 0 30px; }
  .reason .ribbon-head { margin-left: 0; }
  .reason__lead { margin-top: -20px; }

  .reason__points { width: auto; margin-top: 15px; gap: 24px; padding: 0 30px; }
  .reason-point { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .reason-point__photo { margin-top: 0; }
  .reason-point__title { margin-top: 5px; font-size: 18px; line-height: 26px; }
  .reason-point__text { margin-top: 2px; font-size: 14px; line-height: 20px; }

  .reason__cards { flex-direction: column; align-items: center; gap: 14px; margin: 22px 0 0; }

  .monitor { --w: 302px; --h: 257px; border-width: 4px; border-radius: 10px; }
  .monitor__lead { top: 7px; font-size: 16px; line-height: 23px; }
  .monitor__row { top: 47px; }
  .monitor__offer { width: 168px; }
  .monitor__off { height: 45px; font-size: 17px; line-height: 45px; }
  .monitor__off small { font-size: 17px; }
  .monitor__off b, .monitor__cream b { font-size: 32px; }
  .monitor__plus { width: 24px; height: 24px; margin: -2px auto 0; }
  .monitor__plus::before { width: 18px; height: 4px; }
  .monitor__plus::after { width: 4px; height: 18px; }
  .monitor__cream { height: 44px; margin-top: -16px; font-size: 17px; line-height: 44px; }
  .monitor__note { margin-top: -6px; font-size: 13px; line-height: 19px; }
  .monitor__present { margin-top: -5px; font-size: 28.5px; line-height: 41px; }
  .monitor__img { left: 183px; top: 15px; width: 102px; height: 127px; }
  .monitor__limit { left: 4px; right: 4px; top: 200px; height: 33px; font-size: 15px; line-height: 33px; }
  .monitor__limit b { font-size: 24px; }
}

/* ===== 60-steps.css ===== */
/* =========================================================
   施術後のステップ・症例
   ========================================================= */
.steps { padding-bottom: 23px; }
.steps__head {
  text-align: center;
  font-family: var(--ff-serif); font-weight: 600; font-size: 25px; line-height: 36px; color: var(--c-brown);
}
.steps__head small { display: block; font-size: 18px; line-height: 26px; }

.steps__body { display: flex; justify-content: space-between; align-items: flex-start; margin: 24px 89px 0 92px; }
.steps__timeline { width: 448px; flex: none; }
.steps__cases { width: 291px; display: grid; gap: 13px; margin-top: -2px; }

.case-mini__title {
  height: 29px; border-radius: 15px;
  background: var(--c-wine); color: #fff; text-align: center;
  font-family: var(--ff-serif); font-weight: 600; font-size: 16.5px; line-height: 29px;
}
.case-mini__pair { position: relative; display: flex; justify-content: space-between; width: 255px; margin: 13px auto 0; }
div.case-mini__pair::after {
  content: ""; position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
  border-left: 12px solid var(--c-pink); border-block: 9.5px solid transparent;
}
.case-mini__pair img { width: 115px; height: 111px; border-radius: 8px; object-fit: cover; }
.case-mini__labels {
  display: flex; justify-content: space-between; width: 255px; margin: 1px auto 0;
  font-family: var(--ff-serif); font-size: 17.5px; line-height: 25px; color: var(--c-text);
}
.case-mini__labels span { width: 115px; text-align: center; }

/* banner */
.steps__banner {
  position: relative;
  width: 629px; height: 76px; margin: 29px auto 0;
  border: 4px solid transparent; border-radius: 8px;
  background: linear-gradient(180deg, #f58fac, var(--c-pink) 50%, #ec6a8f) padding-box, var(--gold) border-box;
  box-shadow: 0 0 0 2px #fff, 0 0 8px 3px rgba(0,0,0,.3);
  display: grid; place-items: center;
  color: #fff; font-family: var(--ff-serif); font-weight: 500; font-size: 28px; line-height: 1.3; text-align: center;
  text-shadow: 0 0 6px rgba(153,29,73,.35);
}
/* sparkles */
.steps__banner::before, .steps__banner::after {
  content: ""; position: absolute; width: 46px; height: 46px;
  background: radial-gradient(circle, #fff 0 8%, rgba(255,255,255,.8) 14%, transparent 22%),
              conic-gradient(from 45deg, transparent 0 0);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  filter: drop-shadow(0 0 4px #fff);
  background-color: #fffbe9;
}
.steps__banner::before { left: -22px; bottom: -14px; }
.steps__banner::after { right: -20px; top: -10px; width: 40px; height: 54px; }

@media (max-width: 767px) {
  .steps { padding-bottom: 11px; }
  .steps__body { flex-direction: column; align-items: center; margin: 18px 0 0; }
  .steps__timeline { width: 315px; }
  .steps__cases { margin-top: 20px; }
  .steps__banner { width: 315px; height: 84px; margin-top: 11px; font-size: 22px; line-height: 27px; }
}

/* ===== 70-cta2.css ===== */
/* =========================================================
   CTA②
   ========================================================= */
.cta2 { padding-bottom: 44px; }
@media (max-width: 767px) {
  .cta2 { padding-bottom: 27px; }
}

/* ===== 82-voice.css ===== */
/* =========================================================
   お客様の声
   ========================================================= */
.voice { background: #fff; padding: 39px 0 50px; }
.voice__head { margin-left: 91px; }
.voice__list {
  display: grid; grid-template-columns: repeat(2, 316px); align-items: start;
  gap: 27px 30px;
  margin-left: max(0px, calc(50% - 340px));
}
.voice-card {
  border: 1px solid var(--c-text); border-radius: 10px;
  padding: 17px 22px 19px 23px;
}
.voice-card__head { display: flex; align-items: flex-start; gap: 8px; }
.voice-card__img { width: 73px; height: 73px; border-radius: 50%; flex: none; }
.voice-card__name {
  padding: 2px 0 0 10px;
  font-family: var(--ff-serif); font-weight: 600; font-size: 18px; line-height: 39px; color: #231815;
}
.voice-card__name b { font-weight: 600; font-size: 30px; }
.voice-card__name span { display: block; margin: -4px 0 0 -10px; font-weight: 400; font-size: 14px; line-height: 20px; }
.voice-card__text { margin-top: 10px; font-size: 15px; line-height: 21px; color: var(--c-text); }

@media (max-width: 767px) {
  .voice { padding: 0 0 27px; }
  .voice__head { margin-left: 0; }
  .voice__list { grid-template-columns: minmax(0, 316px); justify-content: center; gap: 20px; margin: 10px 15px 0; }
}

/* ===== 84-instagram.css ===== */
/* =========================================================
   Instagram
   ========================================================= */
.insta { padding: 30px 0 0; text-align: center; }
.insta__logo img { width: 284px; margin-inline: auto; }
.insta__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11.5px 10.5px;
  width: min(100%, 426px); margin: 20px auto 0;
}
.insta__item {
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  background: #5a4f54; color: rgba(255,255,255,.45); font-size: 17px;
}
.insta__item img { width: 100%; height: 100%; object-fit: cover; }
.insta__links { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 26px; }
.insta__follow {
  display: inline-flex; align-items: center; gap: 3px;
  height: 30px; padding: 0 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5a0ef6 0%, #8b1cff 22%, #f201cb 50%, #f901bc 78%, #bb0159 100%);
  color: #fff; font-family: "Avenir", var(--ff-sans); font-size: 16.98px; line-height: 1;
}
.insta__account {
  display: inline-flex; align-items: stretch; height: 24px;
  border: 1.06px solid var(--c-pink); border-radius: 2px; background: #fff;
}
.insta__account span { padding: 0 10px 0 4px; font-family: "Avenir", var(--ff-sans); font-size: 14px; line-height: 22px; color: #717071; }
.insta__account i { display: grid; place-items: center; width: 26px; background: var(--c-pink); }

@media (max-width: 767px) {
  .insta { padding-top: 25px; }
  .insta__logo img { width: 211px; }
  .insta__grid { width: min(calc(100% - 59px), 316px); margin-top: 15px; gap: 8.5px 7.8px; }
  .insta__item { font-size: 13px; }
  .insta__links { gap: 15px; margin-top: 17px; }
  .insta__follow { height: 22px; padding: 0 5px; font-size: 12.6px; }
  .insta__follow svg { width: 13px; height: 13px; }
  .insta__account { height: 18px; }
  .insta__account span { padding: 0 6px 0 3px; font-size: 11px; line-height: 16px; }
  .insta__account i { width: 19px; }
  .insta__account svg { width: 11px; height: 12px; }
}

/* ===== 86-message.css ===== */
/* =========================================================
   メッセージ
   ========================================================= */
.message { padding-top: 34px; }
.message__ribbon { margin-left: 91px; }
.message__body {
  position: relative;
  display: flex; gap: 24px;
  margin: -25px 0 0 127px;
}
.message__profile { flex: none; width: 183px; }
.message__photo { width: 183px; height: 193px; object-fit: cover; }
.message__name {
  margin: 10px 0 0 18px;
  font-family: var(--ff-serif); font-weight: 600; font-size: 24px; line-height: 34.5px; color: #231815;
}
.message__name span { display: block; font-weight: 400; font-size: 12px; line-height: 17px; }
.message__text { flex: 1; max-width: 527px; padding-top: 3px; font-size: 15px; line-height: 21px; color: var(--c-text); }
.message__text p + p { margin-top: 21px; }
.message__data { margin: 18px 0 0 144px; font-size: 15px; line-height: 35px; color: var(--c-text); }
.message__data li { display: inline-block; margin-right: 2em; }
.message__data li:nth-child(3) { display: block; }

@media (max-width: 767px) {
  .message { padding-top: 25px; }
  .message__ribbon { margin-left: 0; }
  .message__body { display: block; margin: -60px 0 0; padding: 0 30px 0 27px; }
  .message__profile { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; width: auto; }
  .message__photo { flex: none; }
  .message__name { margin: 0 0 0 27px; padding-bottom: 0; }
  .message__text { max-width: none; padding-top: 21px; }
  .message__data { margin: 21px 0 0; padding: 0 30px 0 27px; line-height: 30px; }
  .message__data li { display: block; margin: 0; padding-left: 4em; text-indent: -4em; }
}

/* ===== 88-cta3.css ===== */
/* =========================================================
   CTA③
   ========================================================= */
.cta3 { padding: 45px 0; }
@media (max-width: 767px) {
  .cta3 { padding: 30px 0 28px; }
}

/* ===== 90-flow.css ===== */
/* =========================================================
   施術の流れ
   ========================================================= */
.flow { background: #fff; padding: 38px 0 35px; color: #000; }
.flow__title { text-align: center; font-family: var(--ff-serif); font-weight: 600; font-size: 25px; line-height: 36px; color: var(--c-brown); }

.flow__steps { display: grid; grid-template-columns: repeat(4, 177px); gap: 19px; justify-content: center; margin-top: 17px; }
.flow__step { position: relative; padding-top: 140px; }
.flow__step:not(:last-child)::after {
  content: ""; position: absolute; top: 47px; right: -19px;
  width: 19px; height: 31px;
  background: var(--c-pink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.flow__img { position: absolute; top: 0; left: 50%; width: 124px; height: 124px; transform: translateX(-50%); }
.flow__img--tall { top: 13px; left: 18px; height: 172px; transform: none; }
.flow__label {
  position: relative; z-index: 1;
  height: 30px; border-radius: 15px;
  background: var(--c-wine); color: #fff;
  text-align: center; font-family: var(--ff-serif); font-weight: 600; font-size: 18px; line-height: 30px;
  white-space: nowrap;
}
.flow__text { margin: 9px -4px 0 0; font-size: 14px; line-height: 20px; }

.flow__caution { width: min(770px, 100%); margin: 29px auto 0; padding-top: 25px; border-top: 1px solid #b3b3b3; }
.flow__caution-title { font-family: var(--ff-serif); font-weight: 600; font-size: 20px; line-height: 29px; color: var(--c-brown); }
.flow__caution-body { position: relative; margin-top: 12px; padding-left: 106px; min-height: 79px; }
.flow__caution-icon { position: absolute; left: 14px; top: 3px; width: 71px; }
.flow__caution-main { font-weight: 500; font-size: 16px; line-height: 19px; }
.flow__caution-note { font-size: 14px; line-height: 19px; }
.flow__caution-main + .flow__caution-note { margin-top: 8px; }

@media (max-width: 767px) {
  .flow { padding: 20px 0 25px; }
  .flow__inner { padding-inline: 30px; }
  .flow__steps { display: block; margin-top: 16px; }
  .flow__step { min-height: 167px; padding: 0 138px 0 0; }
  .flow__step:last-child { min-height: 171px; }
  .flow__step:not(:last-child)::after {
    top: 136px; right: 49px; width: 31px; height: 19px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .flow__img, .flow__img--tall { left: auto; right: 1px; top: 0; transform: none; }
  .flow__label { width: 177px; }
  .flow__text { width: 181px; }
  .flow__caution { width: 100%; margin-top: 11px; padding-top: 18px; }
  .flow__caution-body { margin-top: 10px; padding-left: 102px; min-height: 0; }
  .flow__caution-icon { left: 10px; }
  .flow__caution-main { line-height: 23.2px; }
  .flow__caution-main + .flow__caution-note { margin-top: 13px; }
  .flow__caution-note--wide { margin: 5px 0 0 -102px; }
}

/* ===== 92-menu.css ===== */
/* =========================================================
   メニュー・料金（MENU / COMPARISON / PRICE / モニターキャンペーン）
   ========================================================= */
.menu { padding: 37px 0 0; color: var(--c-brown); }
.menu__lead { text-align: center; font-family: var(--ff-serif); font-weight: 600; font-size: 30px; line-height: 43px; }
.menu__sub { margin-top: 6px; text-align: center; font-size: 18px; line-height: 25px; text-spacing-trim: space-all; }

.menu__head { margin-top: 17px; text-align: center; color: var(--c-pink); font-family: var(--ff-serif); }
.menu__head-en { display: block; font-weight: 600; font-size: 35px; line-height: 50px; }
.menu__head-ja { display: block; margin-top: -3px; font-weight: 500; font-size: 13px; line-height: 19px; }
.menu__cards { display: block; width: 610px; margin: 4px auto 0; }
.menu__cards img { width: 100%; }

/* ---------- COMPARISON ---------- */
.compare { position: relative; width: 588px; margin: 15px auto 0; color: var(--c-text); }
.compare__hl {
  position: absolute; top: 0; bottom: 4px; left: 166px; width: 165px;
  border: 4px solid transparent; border-radius: 12px;
  background: linear-gradient(var(--c-pink), var(--c-pink)) padding-box, var(--gold) border-box;
  box-shadow: 0 0 6px rgba(199, 138, 3, .45);
}
.compare__table { position: relative; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px; margin: -6px; width: calc(100% + 12px); text-align: center; }
.compare__col-label { width: 160px; }
.compare__col-main { width: 165px; }
.compare__col-sub { width: 122px; }
.compare__table thead th { position: relative; z-index: 0; height: 58px; padding: 0; vertical-align: bottom; font-weight: 400; font-size: 15px; line-height: 33px; }
.compare__table thead th:not(.compare__main)::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 33px;
  background: #fff; border: 1px solid #ede4e1; border-bottom: 0; border-radius: 6px 6px 0 0;
}
.compare__table thead th.compare__main { vertical-align: middle; padding-top: 4px; color: #fff; font-family: var(--ff-serif); font-weight: 500; font-size: 18px; line-height: 21px; }
.compare__table tbody th, .compare__table tbody td { height: 74px; padding: 4px 2px; background: #f6f1f0; font-size: 13px; line-height: 17px; }
.compare__table tbody th { font-weight: 400; font-size: 18px; line-height: 24px; }
.compare__table td.compare__main { position: relative; background: none; color: #fff; }
.compare__table td.compare__main::before { content: ""; position: absolute; left: 3px; right: 3px; top: -3.5px; height: 1px; background: rgba(255,255,255,.85); }
.compare__mark { display: block; margin-bottom: 4px; font-size: 26px; line-height: 26px; }
.compare__mark--text { margin-bottom: 2px; font-size: 26px; line-height: 28px; }

/* ---------- PRICE ---------- */
.price { position: relative; width: 588px; margin: 15px auto 0; color: var(--c-text); }
.price__hl {
  position: absolute; top: 12px; bottom: -6px; left: 358px; width: 216px;
  border: 4px solid transparent; border-radius: 12px;
  background: linear-gradient(var(--c-pink), var(--c-pink)) padding-box, var(--gold) border-box;
  box-shadow: 0 0 6px rgba(199, 138, 3, .45);
}
.price__table { position: relative; width: 574px; table-layout: fixed; border-collapse: collapse; }
.price__table th, .price__table td { padding: 0; }
.price__table thead th { height: 72px; vertical-align: bottom; font-weight: 400; }
.price__table thead th.price__normal { position: relative; z-index: 0; width: 173px; font-size: 14px; line-height: 33px; text-align: center; }
.price__table thead th.price__normal::before { content: ""; position: absolute; z-index: -1; left: 0; right: 8px; bottom: 0; height: 33px; background: #f6f1f0; border-radius: 6px 6px 0 0; }
.price__table thead th.price__normal { padding-right: 8px; }
.price__table thead th.price__monitor { width: 230px; padding: 0 0 7px 14px; color: #fff; font-family: var(--ff-sans); font-size: 16px; line-height: 20px; text-align: center; }
.price__off { font-family: var(--ff-serif); font-size: 15px; }
.price__off b { font-weight: 400; font-size: 23px; }
.price__table tbody th { height: 54.5px; text-align: left; font-weight: 400; font-size: 16px; line-height: 20px; }
.price__table tbody th, .price__table tbody td.price__normal { border-bottom: 1px solid #8a8584; }
.price__table tbody th { font-feature-settings: "palt"; }
.price__table tbody td.price__normal { padding-right: 40px; text-align: right; font-family: var(--ff-serif); font-size: 28px; line-height: 1; }
.price__table tbody td.price__monitor {
  padding-left: 14px; text-align: center; color: #fff; font-family: var(--ff-serif); font-size: 32px; line-height: 1;
  background: linear-gradient(#fff, #fff) no-repeat right 10px top / 202px 1px;
}
.price__table small { font-size: 18px; }
.price__table td.price__monitor small { font-size: 20px; }

.menu__cream {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 588px; height: 49px; margin: 13px auto 0;
  background: #fad6e0; color: var(--c-brown); font-size: 14px; line-height: 17px;
}
.menu__cream-price { margin-right: 2px; font-family: var(--ff-serif); font-weight: 500; font-size: 25px; line-height: 36px; }
.menu__cream-price small { font-size: 20px; }
.menu__notes { width: 588px; margin: 5px auto 0; color: var(--c-text); font-size: 14px; line-height: 20px; }

/* ---------- モニターキャンペーン ---------- */
.menu-campaign {
  position: relative; width: 380px; height: 346px; margin: 36px auto 11px;
  border: 4px solid transparent; border-radius: 12px;
  background: linear-gradient(var(--c-pink), var(--c-pink)) padding-box, var(--gold) border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, .35);
  color: #fff; font-family: var(--ff-serif); font-weight: 600; text-align: center;
}
.menu-campaign > * { position: absolute; }
.menu-campaign__lead { left: 0; right: 0; top: 16px; font-size: 28px; line-height: 40px; }
.menu-campaign__col { left: 0; top: 94px; width: 228px; }
.menu-campaign__off { font-size: 20px; line-height: 55px; white-space: nowrap; }
.menu-campaign__off b, .menu-campaign__cream b { font-weight: 600; font-size: 38px; }
.menu-campaign__plus { display: block; margin: -12px auto 0; width: 30px; position: relative; }
.menu-campaign__cream { margin-top: -15px; font-size: 20px; line-height: 55px; white-space: nowrap; }
.menu-campaign__note { margin-top: -16px; font-family: var(--ff-sans); font-size: 13px; line-height: 20px; }
.menu-campaign__present { margin-top: -5px; font-size: 36px; line-height: 52px; white-space: nowrap; }
.menu-campaign__img { left: 226px; top: 105px; width: 128px; height: 159px; border-radius: 11px; object-fit: cover; }
.menu-campaign__pill {
  left: 11px; right: 12px; top: 278px; height: 41px;
  border-radius: 21px; background: var(--gold);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
  color: var(--c-wine); font-size: 18px; line-height: 41px; letter-spacing: .04em; white-space: nowrap;
}
.menu-campaign__pill b { font-weight: 600; font-size: 28px; vertical-align: -2px; }

@media (max-width: 767px) {
  .menu { padding-top: 20px; }
  .menu__inner { padding-inline: 30px; }
  .menu__lead { margin-inline: -10px; font-size: 25px; line-height: 34px; }
  .menu__sub { margin-top: 2px; font-size: 15px; line-height: 21px; letter-spacing: -.02em; }
  .menu__head { margin-top: 14px; }
  .menu__cards { width: 316px; margin-top: 5px; }
  .menu__head--compare { margin-top: 12px; }
  .menu__head--price { margin-top: 9px; }

  .compare { width: 316px; margin-top: 8px; }
  .compare__hl { left: 72px; width: 90px; border-width: 3px; border-radius: 10px; bottom: 2px; top: 5px; }
  .compare__table { border-spacing: 4px 5px; margin: -5px -4px; width: calc(100% + 8px); }
  .compare__col-label { width: 68px; }
  .compare__col-main { width: 90px; }
  .compare__col-sub { width: 71px; }
  .compare__table thead th { height: 50px; font-size: 11px; line-height: 25px; }
  .compare__table thead th::before { height: 25px !important; }
  .compare__table thead th.compare__main { padding-top: 8px; font-size: 13px; line-height: 15px; }
  .compare__table tbody th, .compare__table tbody td { height: 54px; padding: 2px 1px; font-size: 9px; line-height: 12px; letter-spacing: -.03em; }
  .compare__table tbody th { font-size: 13px; line-height: 16px; letter-spacing: 0; }
  .compare__table td.compare__main::before { top: -3px; }
  .compare__mark { margin-bottom: 2px; font-size: 16px; line-height: 17px; }
  .compare__mark--text { font-size: 17px; line-height: 18px; }

  .price { width: 316px; margin-top: 0; }
  .price__hl { left: 202px; width: 110px; top: 10px; bottom: -4px; border-width: 3px; border-radius: 10px; }
  .price__table { width: 312px; }
  .price__table thead th { height: 52px; }
  .price__table thead th.price__normal { width: 102px; font-size: 11px; line-height: 23px; padding-right: 5px; }
  .price__table thead th.price__normal::before { height: 23px; right: 5px; }
  .price__table thead th.price__monitor { width: 120px; padding: 0 0 4px 10px; font-size: 11px; line-height: 13px; }
  .price__off { font-size: 10px; }
  .price__off b { font-size: 15px; }
  .price__table tbody th { height: 39px; font-size: 12px; line-height: 14px; letter-spacing: -.04em; white-space: nowrap; }
  .price__table tbody td.price__normal { padding-right: 4px; font-size: 19px; }
  .price__table tbody td.price__monitor { padding-left: 10px; font-size: 20px; background-size: 98px 1px; background-position: right 6px top; }
  .price__table small, .price__table td.price__monitor small { font-size: 12px; }

  .menu__cream { flex-wrap: wrap; justify-content: flex-start; align-content: center; column-gap: 1px; row-gap: 0; width: 316px; height: 73px; margin-top: 6px; padding: 0 20px; }
  .menu__cream-price { margin-left: auto; margin-right: 18px; line-height: 30px; }
  .menu__cream-unit { padding-left: 3px; }
  .menu__notes { width: 316px; margin-top: 3px; }

  .menu-campaign { width: 302px; height: 257px; margin-top: 17px; border-width: 3px; border-radius: 10px; }
  .menu-campaign__lead { top: 8px; font-size: 16px; line-height: 23px; }
  .menu-campaign__col { top: 48px; width: 182px; }
  .menu-campaign__off { font-size: 20px; line-height: 45px; }
  .menu-campaign__off b, .menu-campaign__cream b { font-size: 32px; }
  .menu-campaign__s { font-size: 17px; }
  .menu-campaign__plus { width: 24px; margin-top: 0; }
  .menu-campaign__cream { margin-top: -16px; line-height: 44px; }
  .menu-campaign__note { margin-top: -2px; font-size: 13px; line-height: 19px; }
  .menu-campaign__present { margin-top: -5px; font-size: 28.5px; line-height: 41px; }
  .menu-campaign__img { left: 184px; top: 63px; width: 102px; height: 127px; border-radius: 9px; }
  .menu-campaign__pill { left: 9px; right: 10px; top: 203px; height: 32px; font-size: 14px; line-height: 32px; letter-spacing: .02em; }
  .menu-campaign__pill b { font-size: 22px; }
}

/* ===== 94-cta4.css ===== */
/* =========================================================
   CTA④（メニュー・料金の後）
   ========================================================= */
.cta4 { padding: 45px 0 84px; }
.cta4 .cta__head { padding-inline: 42px; }

@media (max-width: 767px) {
  .cta4 { padding: 17px 0 16px; }
  .cta4 .cta__head { padding-inline: 26px; }
}

/* ===== 96-faq.css ===== */
/* FAQ — PC 14:3193 / SP 19:3591 */
.faq { background: #fff; padding: 33px 0 65px; }
.faq__head { margin-left: 88px; font-weight: 400; }
.faq__list { width: 545px; max-width: calc(100% - 40px); margin: 0 auto 0 191px; }
.faq details { position: relative; }
.faq details + details { margin-top: 20px; }
.faq__q {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 0 46px 0 37px; min-height: 30px;
  font-weight: 500; font-size: 18px; line-height: 30px; color: var(--c-text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before,
.faq__a::before {
  position: absolute; left: 0; top: 1px;
  width: 29px; height: 29px;
  display: grid; place-items: center;
  font-family: var(--ff-serif); font-weight: 400; font-size: 18px; line-height: 1;
}
.faq__q::before { content: "Q"; background: var(--c-pink); color: #fff; }
/* open/close icon: circle + minus (plus when closed) */
.faq__q::after {
  content: ""; position: absolute; right: 0; top: 3px;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1.5px solid #c9caca;
  background:
    linear-gradient(#c9caca, #c9caca) center / 15px 3px no-repeat,
    linear-gradient(#c9caca, #c9caca) center / 3px 15px no-repeat;
}
.faq details[open] > .faq__q::after {
  background: linear-gradient(#c9caca, #c9caca) center / 15px 3px no-repeat;
}
.faq__a {
  position: relative; margin-top: 10px; padding: 0 46px 0 37px; min-height: 29px;
  font-size: 15px; line-height: 21px; color: var(--c-text);
}
.faq__a::before { content: "A"; top: 0; border: 1px solid var(--c-pink); color: var(--c-pink); }
.faq__a p + p { margin-top: 21px; }
.faq__cta { margin-top: 27px; }

@media (max-width: 767px) {
  .faq { padding: 1px 0 25px; }
  .faq__head { margin-left: 0; }
  .faq__list { width: auto; max-width: none; margin: 8px 29px 0 30px; }
  .faq details + details { margin-top: 18px; }
  .faq__q { padding-right: 42px; line-height: 23px; padding-top: 3px; }
  .faq__a { margin-top: 6px; padding-right: 42px; }
  .faq__cta { margin-top: 25px; }
}

/* ===== 98-blog.css ===== */
/* BLOG — PC 16:3464 / SP 19:3586 + 32:610 */
.blog { padding: 0 0 41px; }
.blog__heading .title-center__en { font-size: 35px; line-height: 50px; }
.blog__heading .title-center__ja { font-family: var(--ff-serif); font-weight: 500; font-size: 13px; line-height: 16px; }
.blog__list {
  display: grid; grid-template-columns: repeat(3, 206px); column-gap: 26px; row-gap: 26px;
  justify-content: center; margin-top: 19px;
}
.blog__card a { display: block; }
.blog__thumb {
  display: grid; place-items: center;
  aspect-ratio: 206 / 156;
  background: #5a4f54; color: #a49ba0; font-size: 16px;
  transition: opacity .2s;
}
.blog__card a:hover .blog__thumb { opacity: .85; }
.blog__title { margin-top: 13px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--c-text); }
.blog__excerpt {
  margin-top: 4px; font-size: 10px; line-height: 16px; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blog__more {
  display: inline-grid; place-items: center; margin-top: 12px;
  width: 81px; height: 26px; background: #d3a4a4; color: #fff; font-size: 12px;
}
.blog__pager { display: flex; justify-content: center; gap: 6px; margin-top: 44px; }
.blog__pager > * {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid #ddd; background: #fff; color: #bbb; font-size: 11px; line-height: 1;
}
.blog__pager .is-current { border-color: var(--c-pink); background: var(--c-pink); color: #fff; }
.blog__pager a:hover { border-color: var(--c-pink); color: var(--c-pink); }

@media (min-width: 768px) and (max-width: 949px) {
  .blog__list { grid-template-columns: repeat(3, minmax(0, 206px)); padding-inline: 20px; }
}

@media (max-width: 767px) {
  .blog { padding: 14px 0 32px; }
  .blog__list { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin: 14px 30px 0; }
  .blog__thumb { aspect-ratio: 315 / 178; }
  .blog__title { margin-top: 10px; font-size: 16px; line-height: 23px; }
  .blog__excerpt { margin-top: 6px; font-size: 12px; line-height: 18px; }
  .blog__more { margin-top: 10px; width: 93px; height: 31px; font-size: 13px; }
  .blog__pager { justify-content: flex-start; gap: 7px; margin: 22px 30px 0; }
  .blog__pager > * { width: 27px; height: 27px; font-size: 13px; }
}

/* ===== 99-footer.css ===== */
/* footer — PC 19:3489 / SP 19:3555 */
.footer { background: #fff; color: #231815; }
.footer__map { height: 445px; }
.footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.footer__body {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 30px 119px 30px;
}
.footer__brand { display: grid; grid-template-columns: 109px 259px; column-gap: 12px; align-items: start; }
.footer__mark { grid-row: 1 / 3; width: 109px; }
.footer__type { width: 259px; margin-top: 29px; }
.footer__sub {
  justify-self: center; margin-top: 15px;
  width: 186px; padding: 2px 0 3px;
  border-block: .5px solid #231815;
  font-family: var(--ff-serif); font-weight: 500; font-size: 16px; line-height: 23px; text-align: center;
}
.footer__info { width: 315px; margin-top: 43px; text-align: center; }
.footer__address { font-style: normal; font-size: 14px; line-height: 17px; }
.footer__pill {
  margin-top: 9px; height: 37px; border-radius: 999px;
  background: var(--c-pink); color: #fff; font-size: 18px; line-height: 37px;
}
.footer__copy { background: #231815; color: #fff; text-align: center; padding: 12px 10px; }
.footer__copy small { font-weight: 300; font-size: 12px; line-height: 14px; }

@media (min-width: 768px) and (max-width: 949px) {
  .footer__body { padding-inline: 40px; gap: 20px; }
}

@media (max-width: 767px) {
  .footer__map { height: 382px; }
  .footer__body { flex-direction: column; align-items: center; padding: 17px 15px 13px; }
  .footer__brand { grid-template-columns: 288px; justify-items: center; }
  .footer__mark { grid-row: auto; width: 139px; }
  .footer__type { width: 288px; margin-top: 7px; }
  .footer__sub { margin-top: 14px; }
  .footer__info { width: 315px; margin-top: 17px; }
  .footer__pill { margin-top: 9px; }
  .footer__copy { padding: 13px 10px; }
  .footer__copy small { font-size: 10px; line-height: 12px; }
}

/* ===== zy-motion.css ===== */
/* =========================================================
   モーション
   1. CTAボタン：hoverで光が走る＋発光（スマホは定期的に自動で光る）
   2. FVキャンペーン枠：読み込み時に下からスライドイン
   3. キャンペーンのスライドインポップアップ（FV通過後に1回だけ）
   ========================================================= */

/* ---------- 1. CTAボタンのシャイン ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; z-index: 1; top: -10%; left: 0;
  width: 45%; height: 120%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-20deg);
  pointer-events: none;
}
.btn > * { position: relative; z-index: 2; }

@keyframes btn-shine {
  from { transform: translateX(-160%) skewX(-20deg); }
  to   { transform: translateX(330%) skewX(-20deg); }
}
/* 待ち時間込みの自動シャイン（スマホ用）：最初の 25% で通過し、残りは待機 */
@keyframes btn-shine-loop {
  0%        { transform: translateX(-160%) skewX(-20deg); }
  25%, 100% { transform: translateX(330%) skewX(-20deg); }
}

@media (hover: hover) {
  .btn:hover::after { animation: btn-shine .7s ease-out; }
  .btn--reserve:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset, 0 0 18px 2px rgba(240,119,153,.75); }
  .btn--line:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset, 0 0 18px 2px rgba(43,172,56,.65); }
}
@media (hover: none) {
  .btn::after { animation: btn-shine-loop 4s ease-in-out 1.5s infinite; }
  .btn--line::after { animation-delay: 2.1s; }  /* 予約と LINE が同時に光らないよう少しずらす */
}

/* 症例カードのリンク（ワキ → /waki/）：タイトル帯を CTA と同じように光らせる
   タイトルに position を付けるとカード全体のリンク範囲が崩れるため、背景グラデーションを動かして表現 */
.case:has(.case__link) .case__title {
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%) -100% 0 / 45% 100% no-repeat,
    var(--c-wine);
  transition: box-shadow .2s;
}
@keyframes title-shine {
  from { background-position: -100% 0, 0 0; }
  to   { background-position: 250% 0, 0 0; }
}
@keyframes title-shine-loop {
  0%        { background-position: -100% 0, 0 0; }
  25%, 100% { background-position: 250% 0, 0 0; }
}
@media (hover: hover) {
  .case:has(.case__link):hover .case__title {
    animation: title-shine .7s ease-out;
    box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset, 0 0 18px 2px rgba(240,119,153,.75);
  }
}
@media (hover: none) {
  .case:has(.case__link) .case__title { animation: title-shine-loop 4s ease-in-out 1.5s infinite; }
}

/* ---------- 2. FVキャンペーン枠のスライドイン ---------- */
@keyframes campaign-in {
  from { opacity: 0; transform: translateY(60px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes campaign-pop {
  0%   { opacity: 0; transform: scale(.6); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.fv__campaign { animation: campaign-in 1.4s cubic-bezier(.2, .8, .25, 1) .6s both; }
.campaign__off { animation: campaign-pop .9s cubic-bezier(.3, 1.4, .5, 1) 1.7s both; transform-origin: left center; }
.campaign__item { animation: campaign-in 1s cubic-bezier(.2, .8, .25, 1) both; }
.campaign__item--cream { animation-delay: 2s; }
.campaign__item--white { animation-delay: 2.3s; }
@media (max-width: 767px) {
  .campaign__off { transform-origin: center; }
}

/* ---------- 3. スライドインポップアップ ---------- */
.promo {
  position: fixed; z-index: 60; left: 24px; bottom: 24px;
  width: 316px; padding: 18px 18px 16px;
  border: 3px solid transparent; border-radius: 12px;
  background: linear-gradient(#fff, #fff) padding-box, var(--gold) border-box;
  box-shadow: 0 10px 30px rgba(64,34,15,.28);
  font-family: var(--ff-serif); color: var(--c-wine); text-align: center;
  transform: translateX(calc(-100% - 40px)); opacity: 0; visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .9, .25, 1.15), opacity .4s, visibility 0s .6s;
}
.promo.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .6s cubic-bezier(.2, .9, .25, 1.15), opacity .4s; }
.promo__close {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-text); font-family: var(--ff-sans); font-size: 18px; line-height: 1;
}
.promo__close:hover { background: #f3eceb; }
.promo__badge {
  display: inline-block; padding: 2px 12px; border-radius: 999px;
  background: var(--c-wine); color: #fff; font-weight: 600; font-size: 12px; line-height: 20px;
}
.promo__badge b { font-size: 16px; font-weight: 600; }
.promo__lead { margin-top: 8px; color: var(--c-brown); font-weight: 600; font-size: 13.5px; line-height: 1.5; white-space: nowrap; }
.promo__off { font-weight: 800; font-size: 24px; line-height: 1.2; white-space: nowrap; }
.promo__off b { font-size: 44px; font-weight: 800; }
.promo__off small { font-size: 22px; font-weight: 800; }
.promo__gift { display: flex; align-items: center; gap: 10px; margin-top: 6px; text-align: left; }
.promo__gift img { width: 64px; flex: none; border-radius: 6px; }
.promo__gift p { font-weight: 600; font-size: 14px; line-height: 1.45; }
.promo__gift small { display: block; font-family: var(--ff-sans); font-weight: 400; font-size: 11px; }
.promo__new {
  display: table; margin-bottom: 2px; padding: 0 8px; border-radius: 999px;
  background: var(--c-wine); color: #fff; font-size: 10.5px; line-height: 17px;
}
.promo .btn { width: 100%; height: 48px; margin-top: 12px; font-size: 16px; gap: 8px; }
.promo .btn__icon { width: 30px; }

@media (max-width: 767px) {
  .promo {
    left: 12px; right: 12px; bottom: 57px; width: auto;
    display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: center;
    padding: 12px 14px; text-align: left;
    transform: translateY(calc(100% + 80px));
  }
  .promo__badge, .promo__lead, .promo__off, .promo .btn { grid-column: 1 / -1; }
  .promo__badge { justify-self: start; }
  .promo__lead { margin-top: 6px; font-size: 12.5px; white-space: normal; }
  .promo__off { font-size: 20px; }
  .promo__off b { font-size: 34px; }
  .promo__off small { font-size: 18px; }
  .promo__gift { display: contents; }
  .promo__gift img { grid-column: 1; width: 64px; margin-top: 6px; }
  .promo__gift p { grid-column: 2; margin-top: 6px; font-size: 13px; }
  .promo .btn { height: 44px; margin-top: 10px; }
}

/* ---------- 動きを減らす設定の人には止める ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .fv__campaign, .campaign__off, .campaign__item { animation: none; }
  .promo, .promo.is-open { transition: none; }
}

/* ===== zz-wordpress.css ===== */
/* =========================================================
   WordPress 版でのみ使う要素（静的HTML版では該当要素なし）
   ========================================================= */

/* ブログ：アイキャッチ画像 */
.blog__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog__all { margin-top: 30px; text-align: center; }
.blog__all a {
  display: inline-block; padding: 8px 28px;
  border: 1px solid var(--c-pink); border-radius: 999px;
  color: var(--c-pink); font-size: 14px;
  transition: background .2s, color .2s;
}
.blog__all a:hover { background: var(--c-pink); color: #fff; }

/* Instagram：Smash Balloon フィードをデザインの 3 列グリッドに合わせる */
.insta__feed { width: min(100%, 426px); margin: 20px auto 0; }
.insta__feed #sb_instagram { padding: 0 !important; }
.insta__feed #sb_instagram #sbi_images {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 11.5px 10.5px !important;
  padding: 0 !important; width: 100% !important;
}
.insta__feed #sb_instagram .sbi_item { width: 100% !important; padding: 0 !important; margin: 0 !important; aspect-ratio: 1; }
.insta__feed #sb_instagram .sbi_photo_wrap,
.insta__feed #sb_instagram .sbi_photo { height: 100% !important; }
.insta__feed #sb_instagram .sbi_photo img { width: 100%; height: 100%; object-fit: cover; }
.insta__feed .sb_instagram_header,
.insta__feed #sbi_load { display: none !important; }

@media (max-width: 767px) {
  .insta__feed { width: min(calc(100% - 59px), 316px); margin-top: 15px; }
  .insta__feed #sb_instagram #sbi_images { gap: 8.5px 7.8px !important; }
}

/* フィードの取得件数は Smash Balloon 側の設定（現在 8 件）。3 列で端数が出ないよう 6 件まで表示 */
.insta__feed #sb_instagram .sbi_item:nth-child(n+7) { display: none !important; }
@media (max-width: 767px) {
  /* スマホは Smash Balloon 側の表示件数が 4 件のため、1 行 3 件にそろえる */
  .insta__feed #sb_instagram .sbi_item:nth-child(n+4) { display: none !important; }
}