/* ==========================================================================
   ヒアルロン酸注射 固定ページ（page-hyaluronic.php）
   - 接頭辞 hy-（既存テーマCSSと衝突させない）／BEM／バニラCSS／モバイルファースト
   - ブレークポイント：768px（PC）
   - 色・フォントは docs/figma-workflow/02-design-system.md のトークン
   ========================================================================== */

/* ---------- tokens ---------- */
.hy {
  --hy-ink: #3b332d;
  --hy-sub: #6f655d;
  --hy-gold: #b08d57;
  --hy-gold-dark: #9c7a45;
  --hy-gold-light: #e8dcc6;
  --hy-rose: #b5476f;
  --hy-ivory: #faf6f0;
  --hy-blush: #f5e9e6;
  --hy-line: #e9e0d4;
  --hy-line-green: #00c755;

  --hy-font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --hy-font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --hy-font-en: "Cormorant Garamond", "Times New Roman", serif;
  --hy-font-script: "Allura", "Antro Vectra", cursive;

  --hy-container: 1168px;
  --hy-container-narrow: 840px;
  --hy-gutter: 16px;
  --hy-section-pad: 56px;

  color: var(--hy-ink);
  font-family: var(--hy-font-base);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-text-size-adjust: 100%;
}

/* リセットは :where() で詳細度0にし、以降のクラス指定が必ず勝つようにする */
:where(.hy) *,
:where(.hy) *::before,
:where(.hy) *::after { box-sizing: border-box; }
:where(.hy) img { max-width: 100%; height: auto; }
/* 画像のblock化は著者欄（共通パーツ。SNSアイコンは横並びのインライン）を除く自前の区間だけ */
.hy-hero img, .hy-section img, .hy-approach img, .hy-cta img { display: block; }
.hy-author img { display: inline; }
:where(.hy) h1, :where(.hy) h2, :where(.hy) h3, :where(.hy) p, :where(.hy) ul, :where(.hy) ol, :where(.hy) dl, :where(.hy) dd, :where(.hy) figure { margin: 0; padding: 0; }
:where(.hy) ul, :where(.hy) ol { list-style: none; }
:where(.hy) a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.hy-container { width: 100%; max-width: calc(var(--hy-container) + var(--hy-gutter) * 2); margin-inline: auto; padding-inline: var(--hy-gutter); }
.hy-container--narrow { max-width: calc(var(--hy-container-narrow) + var(--hy-gutter) * 2); }
.hy-section { padding-top: var(--hy-section-pad); }
.hy-section--narrow { padding-top: 72px; }
.hy-center { text-align: center; margin-top: 32px; }
.hy-pc-only { display: none; }
.hy-sp-only { display: inline; }
/* 改行位置の出し分け：<br class="hy-br-sp">=SPだけ改行 / <br class="hy-br-pc">=PCだけ改行 */
.hy-br-pc { display: none; }

/* ---------- parts: heading ---------- */
.hy-head { text-align: center; margin-bottom: 28px; }
.hy-head__en { font-family: var(--hy-font-en); font-style: italic; color: var(--hy-gold); font-size: 20px; letter-spacing: 0.08em; line-height: 1.4; }
.hy-head__en::after { content: ""; display: block; width: 32px; height: 1px; background: var(--hy-gold); margin: 12px auto 16px; }
.hy-head__title { font-family: var(--hy-font-serif); font-weight: 500; font-size: 21px; letter-spacing: 0.06em; line-height: 1.6; }
.hy-lead { text-align: center; font-size: 14px; line-height: 1.9; color: var(--hy-sub); margin: -12px 0 28px; }
.hy-note { font-size: 12px; color: #8a7b68; margin-top: 10px; line-height: 1.8; }
.hy-note__link { color: var(--hy-rose); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- parts: button / link ---------- */
.hy-btn { display: inline-block; text-align: center; letter-spacing: 0.08em; transition: opacity 0.2s; }
.hy-btn:hover { opacity: 0.85; }
.hy-btn--gold { background: var(--hy-gold); color: #fff; font-size: 14px; font-weight: 500; padding: 16px 32px; }
.hy-btn--outline { border: 1px solid var(--hy-gold); color: var(--hy-gold-dark); font-size: 14px; padding: 14px 40px; }
.hy-btn--insta { border: 1px solid var(--hy-gold); color: var(--hy-gold-dark); background: #fff; font-size: 14px; padding: 14px 24px; }
.hy-btn-group { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.hy-btn-group .hy-btn { max-width: 100%; line-height: 1.6; }
.hy-ba__item img { height: auto; }
.hy-part__btn { margin-top: 16px; text-align: center; }
.hy-approach .hy-part__btn .hy-btn { display: block; font-size: 13px; padding: 12px 16px; line-height: 1.6; }
.hy-table__list { margin: 0; padding: 0; list-style: none; text-align: left; }
.hy-table__list li { position: relative; padding-left: 1em; line-height: 1.7; }
.hy-table__list li::before { content: "・"; position: absolute; left: 0; }
.hy-table--compare td strong { font-weight: 700; }
.hy-columns__date { margin-left: 12px; font-family: var(--hy-font-sans, inherit); font-size: 12px; letter-spacing: 0.05em; color: var(--hy-sub); }
.hy-columns__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--hy-sub); }
.hy-columns__card--thumb .hy-columns__excerpt { margin-left: 20px; margin-right: 20px; }
.hy-care__rows dd small { display: block; margin-top: 4px; font-size: 12px; color: var(--hy-sub); }
.hy-btn--cta { background: var(--hy-gold); color: #fff; font-size: 16px; font-weight: 500; padding: 18px 56px; }
.hy-btn--line { background: var(--hy-line-green); color: #fff; font-size: 16px; font-weight: 500; padding: 18px 56px; }
.hy-link { color: var(--hy-rose); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- parts: accordion（SPのみ開閉／PCは常時表示） ---------- */
.hy-acc__btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--hy-gold); border-bottom: 1px solid var(--hy-gold);
  background: none; font: inherit; font-size: 13px; color: var(--hy-gold); text-align: left; cursor: pointer; letter-spacing: 0.04em;
}
.hy-acc__btn::after { content: "＋"; font-size: 18px; line-height: 1; flex: none; }
.hy-acc__btn[aria-expanded="true"]::after { content: "−"; }
.hy-acc__body { display: none; padding-top: 10px; }
.hy-acc.is-open > .hy-acc__body,
[data-hy-acc].is-open > .hy-acc__body { display: block; }

/* ---------- hero ---------- */
.hy-hero { background: var(--hy-ivory); padding: 28px 0 24px; }
/* SP：キッカー → メインコピー → サブキャッチ → 画像（Before/After＋要点）→ ピル → 金額・リスク の順 */
.hy-hero__inner { display: flex; flex-direction: column; }
.hy-hero__text { display: contents; }
.hy-hero__kicker { order: 1; align-self: flex-start; }
.hy-hero__title { order: 2; }
.hy-hero__lead { order: 3; }
.hy-hero__visual { order: 4; margin-top: 8px; }
.hy-pills { order: 5; }
.hy-hero__spec { order: 6; }
.hy-hero__kicker { display: inline-block; background: var(--hy-rose); color: #fff; font-size: 13px; letter-spacing: 0.1em; padding: 7px 16px; margin-bottom: 22px; line-height: 1.6; }
.hy-hero__title { font-family: var(--hy-font-serif); font-weight: 500; font-size: 28px; line-height: 1.45; letter-spacing: 0.05em; }
.hy-hero__lead { font-size: 14px; line-height: 2; color: var(--hy-sub); margin-top: 20px; }
.hy-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hy-pills li { border: 1px solid #dcc3b8; color: #8a5a4a; background: #fff; font-size: 12px; line-height: 1.6; padding: 5px 12px; border-radius: 999px; }
.hy-hero__spec { font-size: 12px; line-height: 1.9; color: var(--hy-sub); margin-top: 20px; }
.hy-hero__spec b { font-weight: 500; color: var(--hy-ink); }

.hy-ba { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hy-ba__item { position: relative; }
.hy-ba__item img { width: 100%; aspect-ratio: 256 / 322; object-fit: cover; }
.hy-ba__item figcaption { font-size: 11px; letter-spacing: 0.12em; color: #8d7b70; padding-top: 6px; line-height: 1.6; }
.hy-ba__label { position: absolute; left: 4px; top: -26px; z-index: 1; font-family: var(--hy-font-script); font-size: 30px; line-height: 1; color: #c7104a; pointer-events: none; }
.hy-ba__label--after { font-size: 27px; }
.hy-ba__arrow { position: absolute; left: 50%; top: 11%; width: 84px; max-width: none; transform: translateX(-50%) rotate(10deg); z-index: 2; pointer-events: none; }
.hy-hero .hy-ba { margin-top: 28px; }

.hy-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 24px; }
.hy-points__item { background: #fff; border-top: 2px solid var(--hy-gold); padding: 14px 14px 13px; font-size: 13px; line-height: 1.6; }
.hy-points__item small { display: block; font-size: 11px; color: var(--hy-gold); letter-spacing: 0.1em; margin-bottom: 4px; }

/* ---------- concerns ---------- */
.hy-concerns { display: grid; gap: 16px; }
.hy-concerns__photo img { width: 100%; height: 280px; object-fit: cover; }
.hy-concerns__list { display: grid; gap: 0; }
.hy-concerns__item { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--hy-line); font-size: 13px; line-height: 1.7; }
.hy-concerns__item::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 6px; margin-top: -6px; border-left: 2px solid var(--hy-rose); border-bottom: 2px solid var(--hy-rose); transform: rotate(-45deg); }

/* ---------- reasons ---------- */
.hy-reasons { display: grid; gap: 36px; }
.hy-reason__photo { position: relative; }
.hy-reason__photo img { width: 100%; height: 220px; object-fit: cover; }
.hy-reason__num { position: absolute; left: 14px; bottom: -30px; z-index: 1; font-family: var(--hy-font-en); font-weight: 300; font-size: 36px; letter-spacing: 0.08em; line-height: 1.2; color: var(--hy-gold); text-shadow: 0 0 8px rgba(255, 255, 255, 0.95); }
.hy-reason__title { font-family: var(--hy-font-serif); font-weight: 500; font-size: 17px; line-height: 1.7; margin: 40px 0 10px; }
.hy-reason__title br { display: none; }
.hy-reason__text { font-size: 14px; line-height: 1.9; color: var(--hy-sub); }

/* ---------- cases ---------- */
.hy-cases { display: grid; gap: 36px; }
.hy-case__label { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--hy-gold); line-height: 1.6; }
.hy-case__title { font-family: var(--hy-font-serif); font-weight: 500; font-size: 18px; line-height: 1.5; margin: 4px 0 14px; }
.hy-ba--case { gap: 36px; }
.hy-ba--case .hy-ba__item img { aspect-ratio: 191 / 169; }
.hy-ba--case .hy-ba__arrow { width: 52px; top: 36%; }
.hy-case__meta { margin-top: 4px; font-size: 12px; line-height: 1.85; color: var(--hy-sub); }
.hy-case__more { margin-top: 8px; }
.hy-case__link { margin-top: 12px; font-size: 12px; }
.hy-case__link a { color: var(--hy-rose); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- movie ---------- */
.hy-movie { display: grid; gap: 16px; background: var(--hy-ivory); padding: 20px 16px; grid-template-areas: "badge" "lead" "player" "summary" "link"; }
.hy-movie__badge { grid-area: badge; justify-self: start; background: var(--hy-ink); color: #fff; font-size: 12px; line-height: 1.6; padding: 4px 10px; letter-spacing: 0.06em; }
.hy-movie__lead { grid-area: lead; font-size: 14px; line-height: 1.9; }
.hy-movie__player { grid-area: player; position: relative; aspect-ratio: 16 / 9; background: #000; }
.hy-movie__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hy-movie__summary { grid-area: summary; }
.hy-movie__summary-title { font-weight: 700; color: var(--hy-gold-dark); margin-bottom: 6px; }
.hy-movie__list { font-size: 13px; line-height: 1.9; color: var(--hy-sub); }
.hy-movie__list li { margin-top: 6px; padding-left: 1em; text-indent: -1em; }
.hy-movie__list li::before { content: "・"; }
.hy-movie__list b { font-weight: 700; color: var(--hy-ink); }
.hy-movie__link { grid-area: link; text-align: center; }
.hy-movie__link .hy-btn { max-width: 100%; padding: 14px 16px; line-height: 1.6; }

/* ---------- approach ---------- */
.hy-approach { background: var(--hy-ivory); margin-top: 56px; padding: 48px 0 40px; }
.hy-anchors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 36px; }
.hy-anchors__link { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70px; padding: 6px 8px; background: var(--hy-gold-dark); color: #fff; text-align: center; }
.hy-anchors__num { font-family: var(--hy-font-en); font-size: 10px; letter-spacing: 0.12em; opacity: 0.85; line-height: 1.4; }
.hy-anchors__num b { font-size: 14px; font-weight: 600; margin-left: 2px; }
.hy-anchors__name { font-size: 11.5px; font-weight: 500; line-height: 1.4; margin-top: 2px; }
.hy-part { scroll-margin-top: 80px; margin-bottom: 36px; }
.hy-part__photo img { width: 100%; height: 230px; object-fit: cover; object-position: 50% 30%; }
.hy-part__card { background: #fff; border-top: 1px solid var(--hy-gold); padding: 22px 18px 24px; }
.hy-part__num { font-family: var(--hy-font-en); color: var(--hy-gold-dark); font-size: 16px; letter-spacing: 0.1em; line-height: 1.4; }
.hy-part__num b { font-size: 30px; font-weight: 600; margin-left: 4px; }
.hy-part__title { font-family: var(--hy-font-serif); font-weight: 500; font-size: 18px; line-height: 1.6; margin: 6px 0 12px; }
.hy-part__list { padding-left: 1.1em; margin-bottom: 14px; font-size: 14px; line-height: 1.8; }
.hy-part__list li { list-style: disc; }
.hy-part__text { font-size: 14px; line-height: 1.9; color: var(--hy-sub); }
.hy-part__spec { background: var(--hy-ivory); padding: 12px 14px; margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--hy-sub); }
.hy-approach .hy-center { margin-top: 0; }
.hy-approach .hy-btn { max-width: 100%; padding: 16px 20px; line-height: 1.6; }

/* ---------- tables ---------- */
.hy-table-wrap { overflow-x: auto; }
.hy-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.8; }
.hy-table th,
.hy-table td { padding: 10px 8px; border-bottom: 1px solid var(--hy-line); text-align: left; vertical-align: top; font-weight: 400; }
.hy-table th { color: var(--hy-gold); font-weight: 500; background: var(--hy-ivory); }
.hy-table--compare th[scope="row"] { width: 22%; }
.hy-table--price td:nth-child(3),
.hy-table--price td:nth-child(4) { white-space: nowrap; }
.hy-table-wrap + .hy-center { margin-top: 24px; }
.hy-price__more { margin-top: 18px; }

/* ---------- flow ---------- */
.hy-flow__item { border-left: 2px solid var(--hy-gold-light); padding: 6px 0 8px 16px; margin-bottom: 28px; }
.hy-flow__item:last-child { margin-bottom: 0; }
.hy-flow__step { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.hy-flow__step span { font-family: var(--hy-font-en); font-size: 26px; font-weight: 300; color: var(--hy-gold); letter-spacing: 0.04em; line-height: 1.2; }
.hy-flow__step b { font-size: 17px; font-weight: 700; color: var(--hy-gold-dark); letter-spacing: 0.06em; }
.hy-flow__item ul { padding-left: 1.2em; font-size: 14px; line-height: 2.2; }
.hy-flow__item li { list-style: disc; }

/* ---------- aftercare ---------- */
.hy-care { display: flex; border: 1px solid var(--hy-line); margin-bottom: 20px; }
.hy-care__group { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: upright; font-size: 11px; font-weight: 700; color: #6b5330; letter-spacing: 0.1em; }
.hy-care__rows { flex: 1; min-width: 0; }
.hy-care__row { display: flex; border-top: 1px solid var(--hy-line); }
.hy-care__row:first-child { border-top: 0; }
.hy-care__row dt { flex: none; width: 96px; padding: 16px 10px; font-size: 12px; font-weight: 700; color: #5d4a2c; display: flex; align-items: center; }
.hy-care__row dd { flex: 1; padding: 16px 12px; font-size: 12px; line-height: 2; background: #fff; }
.hy-care.is-1 .hy-care__group { background: #ead9b6; } .hy-care.is-1 dt { background: #f4ead3; }
.hy-care.is-2 .hy-care__group { background: #ecc9c3; } .hy-care.is-2 dt { background: #f6e3df; }
.hy-care.is-3 .hy-care__group { background: #ddd2bf; } .hy-care.is-3 dt { background: #eee7da; }

/* ---------- risk ---------- */
.hy-risk { font-size: 14px; line-height: 2.2; color: var(--hy-sub); }

/* ---------- faq ---------- */
.hy-faq { border-top: 1px solid var(--hy-gold); border-bottom: 1px solid var(--hy-gold); }
.hy-faq__item { border-bottom: 1px solid var(--hy-line); padding: 14px 0; }
.hy-faq__item:last-child { border-bottom: 0; }
.hy-faq__q { font-size: inherit; font-weight: inherit; }
.hy-faq__item .hy-acc__btn { border: 0; padding: 0; align-items: flex-start; gap: 10px; color: var(--hy-gold-dark); font-size: 14px; font-weight: 700; line-height: 1.8; }
.hy-faq__item .hy-acc__btn::after { color: var(--hy-gold); margin-left: auto; }
.hy-faq__qtext { flex: 1; }
.hy-faq__mark { flex: none; width: 22px; font-family: var(--hy-font-en); font-size: 24px; font-weight: 600; line-height: 1.3; }
.hy-faq__item .hy-acc__btn .hy-faq__mark { color: var(--hy-gold); }
.hy-faq__a { display: flex; gap: 10px; font-size: 13px; line-height: 2.1; color: var(--hy-sub); }
.hy-faq__a .hy-faq__mark { color: #b3aca4; }

/* ---------- column ---------- */
.hy-columns { display: grid; gap: 16px; }
.hy-columns__card { position: relative; display: block; background: #fff; border: 1px solid var(--hy-line); border-top: 2px solid var(--hy-gold); padding: 22px 20px 48px; min-height: 160px; }
.hy-columns__cat { display: block; font-family: var(--hy-font-en); color: var(--hy-gold); font-size: 13px; letter-spacing: 0.1em; line-height: 1.4; }
.hy-columns__title { display: block; font-family: var(--hy-font-serif); font-size: 15px; line-height: 1.8; margin-top: 10px; }
/* アイキャッチ付き（$hy_column_thumb = true のとき） */
.hy-columns__card--thumb { padding: 0 0 48px; }
.hy-columns__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hy-ivory); }
.hy-columns__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hy-columns__card--thumb .hy-columns__cat { padding: 16px 20px 0; }
.hy-columns__card--thumb .hy-columns__title { padding: 0 20px; margin-top: 8px; }
.hy-columns__more { position: absolute; left: 20px; bottom: 18px; font-size: 12px; letter-spacing: 0.1em; color: var(--hy-rose); }

/* ---------- cta ---------- */
.hy-cta { position: relative; overflow: hidden; margin-top: 56px; min-height: 360px; display: flex; }
.hy-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hy-cta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(59, 51, 45, 0.58); }
.hy-cta__frame { position: absolute; inset: 16px; border: 1px solid rgba(255, 255, 255, 0.55); pointer-events: none; }
.hy-cta__inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 48px 24px; }
.hy-cta__title { font-family: var(--hy-font-serif); font-weight: 500; font-size: 21px; letter-spacing: 0.06em; line-height: 1.6; margin-bottom: 12px; }
.hy-cta__text { font-size: 14px; line-height: 1.9; margin-bottom: 24px; }
.hy-cta__buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 300px; }
.hy-cta .hy-btn { padding: 16px 24px; }

/* ---------- author ---------- */
.hy-author { margin-top: 40px; margin-bottom: 32px; }

/* ==========================================================================
   PC（768px〜）
   ========================================================================== */
@media (min-width: 768px) {
  .hy { --hy-gutter: 56px; --hy-section-pad: 96px; }
  .hy-section--narrow { padding-top: 120px; }
  .hy-pc-only { display: inline; }
  .hy-sp-only { display: none; }
  .hy-br-sp { display: none; }
  .hy-br-pc { display: inline; }

  .hy-head { margin-bottom: 40px; }
  .hy-section--narrow .hy-head { margin-bottom: 64px; }
  .hy-head__title { font-size: 30px; }
  .hy-lead { font-size: 14px; margin: -16px 0 40px; }

  /* accordion：PCは常時展開、トグルUIは消す */
  .hy-acc__btn { cursor: default; pointer-events: none; }
  .hy-acc__btn::after { display: none; }
  .hy-acc__body { display: block !important; }
  .hy-case__more { margin-top: 0; }
  .hy-part__card > .hy-acc > .hy-acc__btn { display: none; }
  .hy-part__card > .hy-acc > .hy-acc__body { padding-top: 0; }
  .hy-faq__item .hy-acc__btn { cursor: default; }

  /* hero */
  .hy-hero { padding: 64px 0 72px; }
  .hy-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .hy-hero__text { display: block; }
  .hy-hero__visual { margin-top: 0; }
  .hy-hero__title { font-size: 44px; }
  .hy-hero__lead { font-size: 15px; max-width: 520px; }
  .hy-hero__spec { max-width: 520px; }
  .hy-hero__visual { padding-top: 28px; }
  .hy-hero .hy-ba { margin-top: 0; gap: 24px; max-width: 536px; }
  .hy-ba__label { font-size: 36px; top: -34px; }
  .hy-ba__label--after { font-size: 32px; }
  .hy-ba__arrow { width: 120px; top: 6%; }
  .hy-points { gap: 8px 24px; margin-top: 56px; max-width: 536px; }
  .hy-points__item { padding: 16px 16px 15px; font-size: 14px; }

  /* concerns */
  .hy-concerns { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
  .hy-concerns__photo img { height: 520px; }
  .hy-concerns__list { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hy-concerns__item { padding: 18px 18px 18px 52px; border-bottom: 0; background: var(--hy-ivory); font-size: 14px; }
  .hy-concerns__item::before { left: 22px; width: 14px; height: 7px; margin-top: -7px; }

  /* reasons */
  .hy-reasons { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hy-reason__photo img { height: 220px; }
  .hy-reason__num { font-size: 44px; left: 10px; bottom: -36px; }
  .hy-reason__title { font-size: 18px; margin-top: 48px; padding-inline: 4px; }
  .hy-reason__title br { display: inline; }
  .hy-reason__text { padding-inline: 4px; }

  /* cases */
  .hy-cases { grid-template-columns: 1fr 1fr; gap: 56px 32px; }
  .hy-ba--case { gap: 32px; }
  .hy-ba--case .hy-ba__arrow { width: 64px; }
  .hy-case__meta { font-size: 13px; }
  .hy-case__link { font-size: 13px; }
  .hy-center { margin-top: 40px; }
  .hy-btn--gold { font-size: 18px; padding: 20px 56px; }
  .hy-btn--insta { font-size: 16px; padding: 18px 40px; }
  .hy-btn-group { flex-direction: row; justify-content: center; gap: 20px; margin-top: 40px; }
  .hy-part__btn { text-align: left; }
  .hy-approach .hy-part__btn .hy-btn { display: inline-block; font-size: 14px; padding: 12px 28px; }
  .hy-columns__card--thumb .hy-columns__excerpt { margin-left: 24px; margin-right: 24px; }

  /* movie */
  .hy-movie { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "player badge" "player lead" "player summary" "player link"; grid-template-rows: auto auto auto 1fr; column-gap: 40px; row-gap: 16px; padding: 40px; align-items: start; }
  .hy-movie__link { text-align: left; align-self: end; }
  .hy-movie__link .hy-btn { padding: 14px 12px; font-size: 13px; letter-spacing: 0.04em; }

  /* approach */
  .hy-approach { margin-top: 96px; padding: 72px 0 72px; }
  .hy-anchors { grid-template-columns: repeat(3, 1fr); margin-bottom: 56px; }
  .hy-anchors__link { height: auto; padding: 20px 12px 22px; }
  .hy-anchors__num { font-size: 15px; }
  .hy-anchors__num b { font-size: 24px; }
  .hy-anchors__name { font-size: 14px; margin-top: 6px; }
  .hy-part { display: flex; align-items: flex-start; margin-bottom: 56px; }
  .hy-part__photo { flex: none; width: 60%; }
  .hy-part__photo img { height: 440px; }
  .hy-part__card { flex: 1; margin: 28px 0 0 -96px; padding: 36px 44px 32px; min-height: 412px; position: relative; }
  .hy-part--right { flex-direction: row-reverse; }
  .hy-part--right .hy-part__card { margin: 28px -96px 0 0; }
  .hy-part__num { font-size: 18px; }
  .hy-part__num b { font-size: 34px; }
  .hy-part__title { font-size: 22px; margin-bottom: 14px; }
  .hy-part__list { margin-bottom: 12px; }
  .hy-approach .hy-center { margin-top: 0; }
  .hy-approach .hy-btn { padding: 20px 56px; }

  /* tables */
  .hy-table { font-size: 14px; }
  .hy-table th, .hy-table td { padding: 16px 18px; }
  .hy-table--compare th[scope="row"] { width: 20%; }
  .hy-table--price th:first-child, .hy-table--price td:first-child { width: 25%; }

  /* flow */
  .hy-flow__item { padding-left: 32px; margin-bottom: 56px; }
  .hy-flow__step { gap: 18px; margin-bottom: 18px; }
  .hy-flow__step span { font-size: 32px; }

  /* aftercare */
  .hy-care { margin-bottom: 28px; }
  .hy-care__group { width: 48px; font-size: 13px; }
  .hy-care__row dt { width: 180px; padding: 26px 20px; font-size: 13px; }
  .hy-care__row dd { padding: 26px 24px; font-size: 14px; line-height: 2.1; }

  /* faq */
  .hy-faq { padding: 12px 0; }
  .hy-faq__item { padding: 36px 8px 36px; }
  .hy-faq__item .hy-acc__btn { gap: 16px; font-size: 16px; }
  .hy-faq__mark { width: 28px; font-size: 30px; }
  .hy-faq__a { gap: 16px; font-size: 14px; margin-top: 20px; }
  .hy-faq__item .hy-acc__body { padding-top: 0; }

  /* column */
  .hy-columns { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hy-columns__card { padding: 26px 24px 52px; min-height: 190px; }
  .hy-columns__title { font-size: 16px; }
  .hy-columns__more { left: 24px; bottom: 20px; }
  .hy-columns__card--thumb { padding: 0 0 52px; }
  .hy-columns__card--thumb .hy-columns__cat { padding: 18px 24px 0; }
  .hy-columns__card--thumb .hy-columns__title { padding: 0 24px; }

  /* cta */
  .hy-cta { margin: 96px 56px 0; min-height: 340px; }
  .hy-cta__title { font-size: 28px; }
  .hy-cta__buttons { flex-direction: row; justify-content: center; max-width: none; gap: 16px; }
  .hy-cta .hy-btn { padding: 18px 56px; }

  .hy-author { margin-top: 64px; margin-bottom: 56px; }
}

/* ファーストビュー：Before/After を1枚画像化（余白なし・ラベルと矢印は画像内） */
.hy-hero .hy-ba--single { display: block; margin-top: 28px; max-width: 536px; }
.hy-hero .hy-ba--single img { width: 100%; height: auto; aspect-ratio: 1024 / 606; object-fit: cover; }
@media (min-width: 768px) { .hy-hero .hy-ba--single { margin-top: 0; } }

/* 料金表：SPは「（税込〜円）」を改行して横スクロールを防ぐ */
.hy-table--price .hy-tax { display: block; font-size: 11px; white-space: nowrap; }
/* SP：施術名の列が1文字幅に潰れないよう最低5文字分を確保し、余白を詰めて横スクロールを防ぐ */
.hy-table--price th, .hy-table--price td { padding-left: 6px; padding-right: 6px; }
.hy-table--price th:first-child, .hy-table--price td:first-child { min-width: 5em; }
.hy-table--price th:nth-child(2), .hy-table--price td:nth-child(2) { white-space: nowrap; }
@media (min-width: 768px) { .hy-table--price .hy-tax { display: inline; font-size: inherit; } .hy-table--price th, .hy-table--price td { padding-left: 18px; padding-right: 18px; } }