/* =============================================================
 * 施術メニュー詳細ページ用デザインシステム（サブページ共通）
 * TOP のデザイン言語（Cormorant の英語見出し＋日本語サブ、ゴールド/赤茶/
 * ベージュ、float アニメ、before/after スライダー）を踏襲しつつ、
 * 均一なグリッドではなく余白と非対称で「空間を活かす」ことを意図する。
 * 本文ブロックの基本体裁は SWELL 本体に任せ、ここは構図と装飾のみ。
 * ============================================================= */

:root {
  --ak-gold: #b79464;
  --ak-red: #9b000d;       /* クリニックのイメージカラー＝差し色 */
  --ak-ink: #4a4744;       /* 黒は主張が強いので濃いめのグレー */
  --ak-sub: #7a6a5a;
  --ak-line: #e8e0d5;
  --ak-line2: #d0bea8;
  --ak-beige: #f6f0e7;
  --ak-beige-soft: rgba(245, 238, 229, 0.7);
  --ak-card: #f0ebe3;
  --ak-serif: "Noto Serif JP", serif;
  --ak-en: "Cormorant Garamond", serif;
}

/* ---- ページ土台：SWELL の素の本文幅をリセットして自前で構図を組む ----
 * page.php が付与する .sub-content（.l-mainContent__inner.l-article と併用）を
 * 0,3,0 で上書きして全幅にする。 */
.l-mainContent__inner.l-article.sub-content {
  max-width: none;
  padding: 0;
}
.l-mainContent__inner.l-article.sub-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- 共通セクション枠 ---- */
.sub-section {
  padding: clamp(56px, 9vw, 120px) 0;
}
.sub-section--beige { background: var(--ak-beige); }
.sub-section--soft { background: var(--ak-beige-soft); }
.sub-section--card { background: #faf7f2; }
.sub-inner {
  width: min(1080px, 88%);
  margin-inline: auto;
}
.sub-inner--narrow { width: min(820px, 88%); }
/* タイトルは sub-inner(1080)左端に置きつつ、本体だけ今までの幅(820中央)に保つ */
.sub-narrow-body { max-width: 820px; margin-inline: auto; }

/* ---- セクション見出し（英語：Cormorant ＋ 日本語） ---- */
.sub-head { margin-bottom: clamp(32px, 5vw, 56px); position: relative; }
.sub-head__en {
  display: block;
  font-family: var(--ak-en);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ak-red);
  opacity: 0.9;
}
.sub-head__ja {
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  letter-spacing: 0.18em;
  color: var(--ak-ink);
  margin: 0.15em 0 0 0.1em;
  position: relative;
  padding-left: 0;
}
.sub-head--center { text-align: center; }
.sub-head--center .sub-head__ja { margin-left: 0; }

/* ============================ HERO ============================ */
.sub-hero {
  position: relative;
  background: var(--ak-beige);
  overflow: hidden;
}
.sub-hero__inner {
  width: min(1200px, 92%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(48px, 8vw, 110px) 0;
}
.sub-hero__media {
  position: relative;
  order: 2;
}
.sub-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.sub-hero__media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--ak-line2);
  border-radius: 4px;
  z-index: -1;
}
.sub-hero__body { order: 1; }
.sub-hero__en {
  font-family: var(--ak-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--ak-red);
  opacity: 0.92;
  margin: 0;
}
.sub-hero__ja {
  font-family: var(--ak-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  letter-spacing: 0.2em;
  color: var(--ak-ink);
  margin: 0.55em 0 0;
}
.sub-hero__lead {
  font-family: var(--ak-serif);
  font-size: 1rem;
  line-height: 2.1;
  color: var(--ak-ink);
  margin: 1.6em 0 0;
  max-width: 30em;
}
.sub-hero__rule {
  width: 56px; height: 2px; background: var(--ak-red);
  margin: 1.8em 0 0;
}

/* ---- About / こんな方におすすめ（3×2のまま。本文中央・リストは狭めて） ---- */
.sub-lead-p.sub-about__lead { max-width: 720px; margin-inline: auto; }
.sub-recommend {
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 720px; margin-inline: auto;
}
.sub-recommend__label {
  font-family: var(--ak-serif); font-weight: 600;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  letter-spacing: 0.12em; color: var(--ak-ink);
  text-align: center; margin: 0 0 clamp(18px, 3vw, 30px);
  padding-bottom: 0.7em; position: relative;
}
.sub-recommend__label::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 40px; height: 2px; background: var(--ak-red);
}
.sub-recommend__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px);
}
.sub-recommend__list li {
  font-family: var(--ak-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ak-ink);
  padding: 18px 0 18px 38px;
  border-bottom: 1px solid var(--ak-line);
  position: relative;
}
.sub-recommend__list li::before {
  content: "";
  position: absolute; left: 4px; top: 50%;
  width: 18px; height: 18px; transform: translateY(-50%);
  background: var(--ak-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---- 本文段落（とは など） ---- */
.sub-lead-p {
  font-family: var(--ak-serif);
  font-size: 1.0625rem;
  line-height: 2.15;
  color: var(--ak-ink);
  margin: 0 0 1.4em;
}
.sub-lead-p:last-child { margin-bottom: 0; }

/* ============================ 技法（画像＋大きな番号・千鳥配置） ============================ */
.tech-list { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 76px); }
.tech-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.tech-item:nth-child(even) { direction: rtl; }
.tech-item:nth-child(even) > * { direction: ltr; }
.tech-item__visual { position: relative; }
.tech-item__num {
  position: absolute; top: -0.45em; left: -0.05em; z-index: 2;
  font-family: var(--ak-en); font-style: italic;
  font-size: clamp(3.25rem, 7vw, 5.5rem); line-height: 0.8;
  color: var(--ak-red); opacity: 0.9;
}
.tech-item__imgwrap {
  background: #fff; border: 1px solid var(--ak-line); border-radius: 8px;
  padding: clamp(18px, 3vw, 34px) clamp(16px, 2.5vw, 28px);
  display: flex; align-items: center; justify-content: center;
}
.tech-item__img { width: 100%; max-width: 380px; height: auto; display: block; }
.tech-item__body { max-width: 32em; }
.tech-item__ttl {
  font-family: var(--ak-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--ak-ink);
  margin: 0 0 0.7em;
  padding-bottom: 0.55em;
  border-bottom: 1px solid var(--ak-line2);
}
.tech-item__txt {
  font-family: var(--ak-serif);
  font-size: 1rem;
  line-height: 2;
  color: var(--ak-ink);
  margin: 0;
}

/* ============================ before/after スライダー（TOPと同形式） ============================ */
.case-slider-wrap {
  position: relative; margin-top: clamp(28px, 4vw, 48px);
  display: flex; align-items: stretch;
  border: 1px solid var(--ak-line); background: #fff;
}
.case-ba {
  position: relative; flex: 0 0 50%; overflow: hidden;
  cursor: ew-resize; user-select: none; background: #1a1a1a;
}
.case-ba__before, .case-ba__after { position: absolute; inset: 0; }
.case-ba__before img, .case-ba__after img {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
/* 左半分＝Before（上に重ねてクリップ）／右半分＝After（下の全面レイヤー）。
   ラベル（左 Before・右 After）と一致させる。 */
.case-ba__before { clip-path: inset(0 50% 0 0); z-index: 2; }
.case-ba__divider {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 2px; background: rgba(183,148,100,0.85); z-index: 3;
}
.case-ba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: rgba(183,148,100,0.9);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: ew-resize;
}
.case-ba__label {
  position: absolute; top: 12px; background: rgba(0,0,0,0.45);
  color: #fff; font-size: 0.75rem; letter-spacing: 0.1em; padding: 4px 10px; z-index: 3;
}
.case-ba__label--before { left: 12px; }
.case-ba__label--after { right: 12px; }
.case-detail-panel {
  flex: 1; padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--ak-line);
}
.case-detail-ttl {
  font-size: 1.125rem; font-weight: 500; font-family: var(--ak-serif);
  margin: 0 0 20px; color: var(--ak-ink);
}
.case-detail-row { border-bottom: 1px dashed var(--ak-line2); padding: 10px 0; }
.case-detail-row:first-of-type { padding-top: 0; }
.case-detail-dt { font-size: 0.8125rem; color: var(--ak-red); font-weight: 500; margin: 0 0 4px; }
.case-detail-dd { font-size: 0.875rem; color: var(--ak-ink); line-height: 1.7; margin: 0; }
.case-detail-sub { font-size: 0.75rem; color: var(--ak-sub); display: block; margin-top: 2px; }
.case-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.case-nav__btn {
  width: 48px; height: 48px; border: 1px solid var(--ak-line2); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--ak-sub); transition: background 0.2s;
}
.case-nav__btn:hover { background: var(--ak-card); }
.case-nav__count { font-size: 0.875rem; color: var(--ak-sub); min-width: 48px; text-align: center; }

/* ============================ 料金テーブル ============================ */
.sub-table { width: 100%; border-collapse: collapse; font-family: var(--ak-serif); background: #fff; }
.sub-table th, .sub-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--ak-line); font-size: 0.95rem; }
.sub-table thead th { background: var(--ak-ink); color: #fff; font-weight: 500; letter-spacing: 0.04em; }
.sub-table tbody th { background: var(--ak-beige); color: var(--ak-ink); font-weight: 500; text-align: left; }
.sub-table tbody tr:nth-child(even) td { background: #faf7f2; }
.sub-table .is-price { color: var(--ak-red); font-weight: 600; }
.sub-note { list-style: none; margin: 22px 0 0; padding: 0; }
.sub-note li {
  font-family: var(--ak-serif); font-size: 0.875rem; color: var(--ak-sub);
  line-height: 1.8; padding-left: 1.2em; position: relative;
}
.sub-note li::before { content: "※"; position: absolute; left: 0; color: var(--ak-gold); }
.sub-note a { color: var(--ak-red); }

/* ============================ 縦タイムライン（施術の流れ） ============================ */
.sub-timeline { position: relative; margin-block: 0; padding: 0; }
.sub-timeline::before {
  content: ""; position: absolute; left: 7px; top: 7px; bottom: 7px;
  width: 2px; background: var(--ak-line2);
}
.sub-tl-item { position: relative; padding: 0 0 clamp(28px, 4vw, 44px) clamp(36px, 5vw, 52px); }
.sub-tl-item:last-child { padding-bottom: 0; }
.sub-tl-item::before {
  content: ""; position: absolute; left: 0; top: 8px; box-sizing: border-box;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ak-red);
}
.sub-tl-item__step {
  font-family: var(--ak-en); font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1;
  letter-spacing: 0.06em; color: var(--ak-red); display: block; margin-bottom: 16px;
  white-space: nowrap;
}
.sub-tl-item__ttl {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1.125rem;
  letter-spacing: 0.08em; color: var(--ak-ink); margin: 0 0 0.5em;
}
.sub-tl-item__body { font-family: var(--ak-serif); font-size: 0.95rem; line-height: 2; color: var(--ak-ink); }
.sub-tl-item__body ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.sub-tl-item__body li::marker { color: var(--ak-red); }

/* ---- ダウンタイム：横並び（PC 4列 / モバイル 2×2） ---- */
.sub-dt-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 4vw, 44px);
}
.sub-dt-item {
  background: #fff; border: 1px solid var(--ak-line); border-radius: 8px;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 20px);
  border-top: 3px solid var(--ak-red);
  overflow: visible;
}
.sub-dt-item__step {
  font-family: var(--ak-en); font-style: italic;
  font-size: clamp(1.625rem, 3.4vw, 2.5rem); line-height: 1;
  letter-spacing: 0.04em; color: var(--ak-red); display: block;
  margin-bottom: 20px; white-space: nowrap;
}
.sub-dt-item__ttl {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em;
  color: var(--ak-ink); margin: 0 0 0.7em; padding-bottom: 0.6em; border-bottom: 1px solid var(--ak-line);
}
.sub-dt-item__list { margin: 0; padding-left: 1.1em; list-style: disc; }
.sub-dt-item__list li { font-family: var(--ak-serif); font-size: 0.875rem; line-height: 1.85; color: var(--ak-ink); }
.sub-dt-item__list li::marker { color: var(--ak-red); }
.sub-tl-item__body p { margin: 0 0 0.8em; }
.sub-tl-item__body p:last-child { margin-bottom: 0; }

/* ============================ 注意・アフターケア（カード） ============================ */
.sub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
.sub-cards--3 { grid-template-columns: repeat(3, 1fr); }
/* 脱毛の料金表：部位別表とセット価格表で列幅を揃える（固定レイアウト） */
.sub-table--epi { table-layout: fixed; }
.sub-table--epi th:nth-child(1), .sub-table--epi td:nth-child(1) { width: 44%; }
.sub-table--epi th:nth-child(2), .sub-table--epi td:nth-child(2) { width: 28%; }
.sub-table--epi th:nth-child(3), .sub-table--epi td:nth-child(3) { width: 28%; }
.sub-card {
  background: #fff; border: 1px solid var(--ak-line); border-radius: 4px;
  padding: clamp(24px, 3vw, 36px);
}
.sub-card__ttl {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em; color: var(--ak-ink);
  margin: 0 0 1em; padding-bottom: 0.6em; border-bottom: 1px solid var(--ak-line2);
  display: flex; align-items: baseline; gap: 0.6em;
}
.sub-list { margin: 0; padding-left: 1.3em; list-style: disc; }
.sub-list li { font-family: var(--ak-serif); font-size: 0.95rem; line-height: 1.95; color: var(--ak-ink); }
.sub-list li::marker { color: var(--ak-red); }
.sub-emph { color: var(--ak-red); font-weight: 600; }

/* ---- アフターケア：カード（縦長）＋横に画像プレースホルダー ---- */
.sub-aftercare { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 36px); }
.aftercare-item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); align-items: stretch; }
.aftercare-item .sub-card { margin: 0; }
.aftercare-img {
  background: var(--ak-card); border: 1px dashed var(--ak-line2); border-radius: 8px;
  min-height: 240px; display: flex; align-items: center; justify-content: center;
}
.aftercare-img span {
  font-family: var(--ak-en); font-style: italic; color: var(--ak-sub);
  font-size: 1.125rem; letter-spacing: 0.12em;
}
/* 実画像を入れた場合（点線枠・背景なしで画像をフィット） */
.aftercare-img--filled { border: none; background: none; min-height: 0; padding: 0; overflow: hidden; }
.aftercare-img--filled img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: 8px; display: block; }

/* ---- 男性脱毛：顔の部位図＋カラー凡例（横並び） ---- */
.men-zones {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
  margin: clamp(24px, 4vw, 36px) auto 0; max-width: 760px;
}
.men-zones__img { margin: 0; flex: 0 1 380px; }
.men-zones__img img { width: 100%; height: auto; display: block; }
.men-zones__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.men-zones__legend li { font-family: var(--ak-serif); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.1em; }
@media screen and (max-width: 600px) {
  .men-zones__legend { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
}

/* ---- リップ：ヘルペス予防（説明＋薬・保湿剤の画像） ---- */
.lip-herpes { margin-top: clamp(20px, 3vw, 32px); }
.lip-herpes__imgs { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 18px; }
.lip-herpes__imgs figure { margin: 0; }
.lip-herpes__imgs img { width: auto; max-width: 220px; max-height: 130px; height: auto; display: block; border-radius: 6px; border: 1px solid var(--ak-line); }
@media screen and (max-width: 600px) { .lip-herpes__imgs img { max-width: 45%; } }
/* モバイル：ヘルペス予防の画像2枚を横並びにする（縦積み防止） */
@media screen and (max-width: 767px) {
  .lip-herpes__imgs { flex-wrap: nowrap; }
  .lip-herpes__imgs figure { flex: 1 1 0; min-width: 0; }
  .lip-herpes__imgs img { max-width: 100%; }
}

/* ---- リップ技法（イラスト＋説明の横並びリスト） ---- */
.lip-tech { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); max-width: 820px; margin-inline: auto; }
.lip-tech__item {
  display: grid; grid-template-columns: 150px 1fr; gap: clamp(18px, 3vw, 36px);
  align-items: center; background: #fff; border: 1px solid var(--ak-line);
  border-radius: 12px; padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 30px);
}
.lip-tech__img { width: 100%; max-width: 150px; height: auto; display: block; }
.lip-tech__ttl {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em;
  color: var(--ak-ink); margin: 0 0 0.5em; display: flex; align-items: baseline; gap: 0.5em;
}
.lip-tech__no { font-family: var(--ak-en); font-style: italic; font-size: 1.5rem; color: var(--ak-red); line-height: 1; }
.lip-tech__txt { font-family: var(--ak-serif); font-size: 0.9375rem; line-height: 1.9; color: var(--ak-ink); margin: 0; }
@media screen and (max-width: 600px) {
  .lip-tech__item { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .lip-tech__img { margin-inline: auto; }
  .lip-tech__ttl { justify-content: center; }
}

/* ============================ FAQ（details アコーディオン） ============================ */
.sub-faq { border-top: 1px solid var(--ak-line); }
.sub-faq__item { border-bottom: 1px solid var(--ak-line); }
.sub-faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 44px; position: relative;
  font-family: var(--ak-serif); font-size: 1.0625rem; letter-spacing: 0.06em; color: var(--ak-ink);
}
.sub-faq__item summary::-webkit-details-marker { display: none; }
.sub-faq__item summary::before {
  content: "Q"; position: absolute; left: 8px; top: 20px;
  font-family: var(--ak-en); font-style: italic; font-size: 1.25rem; color: var(--ak-red);
}
.sub-faq__item summary::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; border-right: 1px solid var(--ak-sub); border-bottom: 1px solid var(--ak-sub);
  transform: rotate(45deg); transition: transform 0.25s;
}
.sub-faq__item[open] summary::after { transform: rotate(-135deg); }
.sub-faq__a {
  padding: 0 44px 24px 44px; position: relative;
  font-family: var(--ak-serif); font-size: 0.95rem; line-height: 2; color: var(--ak-ink);
}
.sub-faq__a::before {
  content: "A"; position: absolute; left: 8px; top: -2px;
  font-family: var(--ak-en); font-style: italic; font-size: 1.25rem; color: var(--ak-red);
}

/* ============================ CTA / その他のメニュー ============================ */
.sub-cta { text-align: center; }
.sub-cta__lead {
  font-family: var(--ak-serif); font-size: 1rem; line-height: 2.1; color: var(--ak-ink);
  max-width: 38em; margin: 0 auto clamp(28px, 4vw, 44px);
}
.sub-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sub-link-btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ak-serif); font-size: 1rem; letter-spacing: 0.04em;
  color: var(--ak-ink); text-decoration: none;
  border: 1px solid var(--ak-red); background: #fff;
  padding: 15px 36px; border-radius: 999px;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.sub-link-btn::after {
  content: ""; width: 26px; height: 1px; background: var(--ak-red); transition: width 0.25s, background 0.25s;
}
.sub-link-btn:hover { background: var(--ak-red); color: #fff; box-shadow: 0 6px 16px rgba(155, 0, 13, 0.18); }
.sub-link-btn:hover::after { background: #fff; width: 36px; }

/* Reservation本文：PCは1行、モバイルのみ「お待ちしております。」を改行 */
.cta-sp-break { display: inline; }
@media screen and (max-width: 767px) { .cta-sp-break { display: block; } }

/* その他のメニュー：モバイルは「赤四角＋メニュー名」の左揃えリストに */
@media screen and (max-width: 767px) {
  .sub-links--menu { flex-direction: column; align-items: stretch; gap: 0; width: min(360px, 100%); margin-inline: auto; }
  .sub-links--menu .sub-link-btn {
    justify-content: flex-start; gap: 0;
    background: transparent; border: none; border-bottom: 1px solid var(--ak-line); border-radius: 0;
    padding: 16px 6px 16px 30px; position: relative;
  }
  .sub-links--menu .sub-link-btn::after { display: none; }
  .sub-links--menu .sub-link-btn::before {
    content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; background: var(--ak-red);
  }
  .sub-links--menu .sub-link-btn:hover { background: var(--ak-beige); color: var(--ak-ink); box-shadow: none; }
}

/* ---- 医師紹介：写真プレースホルダー＋署名 ---- */
.doctor-photo {
  aspect-ratio: 3 / 4; background: var(--ak-card); border: 1px dashed var(--ak-line2);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.doctor-photo span { font-family: var(--ak-en); font-style: italic; color: var(--ak-sub); font-size: 1.125rem; letter-spacing: 0.12em; }
.doctor-sign { margin: 2em 0 0; text-align: right; font-family: var(--ak-serif); }
.doctor-sign__role { display: block; font-size: 0.875rem; color: var(--ak-sub); letter-spacing: 0.08em; margin-bottom: 0.3em; }
.doctor-sign__name { font-size: 1.375rem; font-weight: 600; color: var(--ak-ink); letter-spacing: 0.2em; }

/* ---- 選ばれる理由：縦・千鳥レイアウト（画像を各項目に組み込む） ---- */
.reason-list { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); }
.reason-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.reason-row:nth-child(even) { direction: rtl; }
.reason-row:nth-child(even) > * { direction: ltr; }
.reason-row__media { margin: 0; }
.reason-row__media img {
  width: 100%; height: 100%; max-height: 420px; object-fit: cover;
  border-radius: 10px; display: block; aspect-ratio: 4 / 3;
}
.reason-row__numbox {
  aspect-ratio: 4 / 3; background: var(--ak-beige); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.reason-row__numbox span {
  font-family: var(--ak-en); font-style: italic; line-height: 1;
  font-size: clamp(4.5rem, 11vw, 8rem); color: var(--ak-red); opacity: 0.55;
}
.reason-row__no {
  font-family: var(--ak-en); font-style: italic; color: var(--ak-red);
  font-size: 1rem; letter-spacing: 0.1em; display: block; margin-bottom: 0.5em;
}
.reason-row__num { font-size: 5rem; line-height: 1; }  /* 番号（PC・モバイル共通で大きく） */
.reason-row__ttl {
  font-family: var(--ak-serif); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem); letter-spacing: 0.06em;
  color: var(--ak-ink); margin: 0 0 0.8em; padding-bottom: 0.55em;
  border-bottom: 1px solid var(--ak-line2);
}
.reason-row__txt { font-family: var(--ak-serif); font-size: 1rem; line-height: 2; color: var(--ak-ink); margin: 0; }
.reason-row__media img.is-bright { filter: brightness(1.12) saturate(1.03); }
@media screen and (max-width: 767px) {
  .reason-row { grid-template-columns: 1fr; gap: 16px; }
  .reason-row:nth-child(even) { direction: ltr; }
  .reason-row__media img, .reason-row__numbox { aspect-ratio: 16 / 10; max-height: none; }
  /* Point → タイトル → 画像 → 本文 の順に並べ替え（bodyを解体しorderで配置） */
  .reason-row__body { display: contents; }
  .reason-row__no { order: 1; }
  .reason-row__ttl { order: 2; }
  .reason-row__media { order: 3; }
  .reason-row__txt { order: 4; }
  .reason-list { gap: 56px; }   /* 4つのポイント間を少し広げる */
}

/* ============================ 医療脱毛：画像配置（最小追記） ============================ */
/* About：リード文＋画像の2カラム */
.epi-about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.epi-about__media { margin: 0; }
.epi-about__media img { width: 100%; height: auto; display: block; border-radius: 10px; }
/* 機器特長カード：上部に説明画像 */
.sub-card__img { width: 100%; height: auto; display: block; border-radius: 6px; margin: 0 0 1.1em; border: 1px solid var(--ak-line2); }
/* フロー：タイムライン項目に画像 */
.sub-tl-item__img { width: 100%; max-width: 280px; height: auto; display: block; border-radius: 8px; margin: 0.9em 0 0; }

/* ============================ レスポンシブ ============================ */
@media screen and (max-width: 900px) {
  .sub-recommend__list { grid-template-columns: 1fr; }
  .sub-cards { grid-template-columns: 1fr; }
  .aftercare-item { grid-template-columns: 1fr; }
  .epi-about { grid-template-columns: 1fr; }
  .epi-about__media { order: -1; max-width: 480px; margin-inline: auto; }
}
@media screen and (max-width: 767px) {
  .sub-hero__inner { grid-template-columns: 1fr; padding-top: clamp(72px, 21vw, 120px); }
  .sub-hero__media { order: 2; }
  .sub-hero__media::before { inset: 12px -12px -12px 12px; }
  .sub-hero__body { order: 1; }
  .case-slider-wrap { flex-direction: column; }
  .case-ba { flex: none; min-height: 64vw; }
  .case-detail-panel { border-left: none; border-top: 1px solid var(--ak-line); }
  .tech-item { grid-template-columns: 1fr; gap: 16px; }
  .tech-item:nth-child(even) { direction: ltr; }
  /* モバイル：番号→タイトル→画像→本文 の順に並べ替え。
     visual/body を display:contents で解体し、tech-item直下の4要素を order で並べる。 */
  .tech-item__visual, .tech-item__body { display: contents; }
  .tech-item__body > * { order: 4; }   /* 本文・リスト等、body内のすべてを既定で画像の後ろへ */
  .tech-item__num { font-size: clamp(3rem, 14vw, 5rem); position: static; order: 1; }
  .tech-item__ttl { order: 2; }        /* タイトルだけ画像の前に */
  .tech-item__imgwrap { order: 3; }
  .tech-list { gap: 56px; }   /* 各グループ（タイトル単位）の間隔を広げる */
  .sub-dt-grid { grid-template-columns: 1fr 1fr; }
  /* 料金表（全MENUページ共通）：価格 XXX,XXX円 は必ず1行。ヘッダーも中途半端な
     改行を禁止（モニター価格のみ本文側 <br class="sp-br"> で「モニター/価格」に）。
     セル余白を詰めて価格が収まる幅を確保。 */
  .sub-table th, .sub-table td { padding: 10px 8px; }
  .sub-table .is-price { white-space: nowrap; }
  .sub-table thead th { white-space: nowrap; }
  /* アイライン eldesign表：目安(約Xmm)が16%幅で折り返すため、目安列を広げて1行に。 */
  .sub-table--eldesign th:nth-child(2), .sub-table--eldesign td:nth-child(2) { width: 24%; }
  .sub-table--eldesign th:nth-child(3), .sub-table--eldesign td:nth-child(3) { width: 50%; }
  /* 美白ページ Caution：（DIC）リストと区切り線(.sub-note__inline の上罫線)の間に1行分余白を足す */
  .sub-page--whitening .sub-note__inline { margin-top: 2.6em; }
}

/* ============================ 美白内服薬（薬剤カード） ============================ */
.sub-cards--2 { grid-template-columns: repeat(2, 1fr); }
.sub-card__sub {
  font-family: var(--ak-serif); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--ak-red); margin: 1.4em 0 0.5em;
}
.sub-card .sub-lead-p { margin-top: 0; }
.sub-card p { font-family: var(--ak-serif); font-size: 0.95rem; line-height: 1.9; color: var(--ak-ink); margin: 0; }
.sub-note__inline {
  font-family: var(--ak-serif); font-size: 0.875rem; line-height: 1.85; color: var(--ak-sub);
  margin: 1.2em 0 0; padding-top: 1em; border-top: 1px solid var(--ak-line2);
}
@media (max-width: 768px) {
  .sub-cards--2 { grid-template-columns: 1fr; }
}

/* ============================ ダーマペン専用（最小限の追加） ============================ */
/* 効果：3ステップ（画像＋テキスト） */
.dp-effect {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 32px); margin-top: clamp(32px, 5vw, 56px);
}
.dp-effect__item { text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.dp-effect__img { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto 1em; border-radius: 8px; }
.dp-effect__txt {
  font-family: var(--ak-serif); font-size: 0.95rem; line-height: 1.85; color: var(--ak-ink); margin: 0; min-height: 3.7em;
}

/* お悩みアイコン：横並びグリッド */
.dp-trouble {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: clamp(10px, 1.6vw, 18px); margin-top: clamp(24px, 4vw, 40px);
}
.dp-trouble__item { margin: 0; }
.dp-trouble__item img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* 症例写真 */
.dp-case { margin: 0; }
.dp-case img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--ak-line2); }

/* ダーマペン4 メニュー：画像（小）左＋説明右 */
.dp-menu-intro { display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); max-width: 720px; margin: 0 auto clamp(20px, 3vw, 32px); }
.dp-menu-intro__img { flex: 0 0 auto; margin: 0; }
.dp-menu-intro__img img { width: auto; max-width: 150px; max-height: 300px; height: auto; display: block; }
.dp-menu-intro__txt { font-family: var(--ak-serif); font-size: 1rem; line-height: 2; color: var(--ak-ink); margin: 0; }
@media (max-width: 600px) { .dp-menu-intro { flex-direction: column; text-align: center; } }

/* 薬液オプション：画像の高さを揃える */
.dp-options .sub-card__img { height: 200px; object-fit: contain; background: #fff; }

/* 薬液オプション：適応・成分・効果 */
.dp-spec { margin: 1.1em 0 0; font-family: var(--ak-serif); }
.dp-spec dt { font-size: 0.8125rem; color: var(--ak-red); font-weight: 600; letter-spacing: 0.08em; margin-top: 0.8em; }
.dp-spec dd { font-size: 0.9rem; line-height: 1.8; color: var(--ak-ink); margin: 0.15em 0 0; }

/* カード内の補助テキスト */
.sub-card__tags {
  font-family: var(--ak-serif); font-size: 0.875rem; color: var(--ak-red);
  font-weight: 500; margin: 0 0 0.9em !important; line-height: 1.7;
}
.sub-card__price {
  font-family: var(--ak-serif); font-size: 0.9rem; line-height: 1.7; color: var(--ak-ink);
  margin: 1.1em 0 0 !important; padding-top: 0.9em; border-top: 1px dashed var(--ak-line2);
}
.sub-card__price .is-price {
  display: inline-block; margin-top: 0.3em; font-size: 1.25rem; font-weight: 600; color: var(--ak-red);
}
.sub-card__note {
  font-family: var(--ak-serif); font-size: 0.8125rem; line-height: 1.7; color: var(--ak-sub);
  margin: 0.9em 0 0 !important;
}

@media (max-width: 768px) {
  .dp-effect { grid-template-columns: 1fr; }
  .dp-trouble { grid-template-columns: repeat(4, 1fr); }
}

/* 美白内服薬：薬剤名直下の画像 */
.wh-drug-img {
  margin: 14px 0 18px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.wh-drug-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* re-Beau2：セクション内 中見出し */
.rb-midhead {
  font-family: var(--ak-serif); font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem); letter-spacing: 0.08em;
  color: var(--ak-ink); text-align: center;
  margin: clamp(32px, 4.5vw, 52px) 0 clamp(18px, 2.5vw, 28px);
  padding-bottom: 0.7em; position: relative;
}
.rb-midhead::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 40px; height: 2px; background: var(--ak-red);
}

/* ============================ アーティスト紹介（doctorページ） ============================ */
.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 44px); }
.staff-card { text-align: left; }
.staff-card__img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 6px; display: block; border: 1px solid var(--ak-line);
}
.staff-card__role {
  font-family: var(--ak-serif); font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--ak-sub); text-align: center; margin: 1.1em 0 0.3em;
}
.staff-card__name {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.1em;
  color: var(--ak-ink); text-align: center; margin: 0 0 1em;
}
.staff-card__skill-label {
  font-family: var(--ak-serif); font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--ak-ink); margin: 0 0 0.2em; padding-top: 0.9em; border-top: 1px solid var(--ak-line2);
}
.staff-card__skill {
  font-family: var(--ak-serif); font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--ak-red); margin: 0 0 1em;
}
.staff-card__msg {
  font-family: var(--ak-serif); font-size: 0.92rem; line-height: 1.9; color: var(--ak-ink); margin: 0;
}
@media screen and (max-width: 900px) {
  .staff-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: clamp(32px, 8vw, 48px); }
}

/* ============================ ゼオスキン ============================ */
/* アドバイザー：2名の写真 */
.zo-adviser {
  display: flex; justify-content: center; gap: clamp(20px, 4vw, 48px);
  margin: clamp(20px, 3vw, 32px) 0;
}
.zo-adviser__item { margin: 0; max-width: 200px; width: 100%; }
.zo-adviser__item img {
  width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--ak-line);
}
.zo-adviser__item figcaption {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.08em;
  color: var(--ak-ink); text-align: center; margin-top: 0.7em;
}
.sub-lead-p.zo-adviser__msg { text-align: center; max-width: 720px; margin-inline: auto; }
.sub-lead-p.zo-adviser__intro {
  text-align: center; font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem); letter-spacing: 0.06em; color: var(--ak-ink);
}

/* 主な配合成分：小アイコン＋見出し＋本文 */
.zo-ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.zo-ing__head { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 20px); margin-bottom: 0.9em; }
.zo-ing__icon { width: clamp(72px, 9vw, 96px); height: clamp(72px, 9vw, 96px); border-radius: 50%; object-fit: cover; flex: none; }
.zo-ing__ttl { font-family: var(--ak-serif); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: 0.06em; color: var(--ak-ink); margin: 0; }
.zo-ing__en { font-family: var(--ak-serif); font-style: italic; font-size: 0.85rem; color: var(--ak-sub); }
.zo-ing__txt { font-family: var(--ak-serif); font-size: 0.95rem; line-height: 1.9; color: var(--ak-ink); margin: 0; }

/* 取扱製品：画像サイズ統一・枠なし */
.zo-products .sub-card__img { height: clamp(150px, 20vw, 200px); object-fit: contain; border: none; background: #fff; }

/* VOICE：体験談 */
.voice-card { background: #fff; border: 1px solid var(--ak-line); border-radius: 6px; padding: clamp(24px, 4vw, 44px); }
.voice-card__catch {
  font-family: var(--ak-serif); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.7; letter-spacing: 0.04em; color: var(--ak-red); margin: 0 0 1.2em;
  padding-bottom: 0.8em; border-bottom: 1px solid var(--ak-line2);
}
.voice-card__txt { font-family: var(--ak-serif); font-size: 0.95rem; line-height: 1.95; color: var(--ak-ink); margin: 0 0 1.2em; }
.voice-card__sign { font-family: var(--ak-serif); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ak-ink); text-align: right; margin: 0; }
.voice-card__note { font-family: var(--ak-serif); font-size: 0.8rem; color: var(--ak-sub); text-align: right; margin: 0.4em 0 0; }
.voice-card--media { display: flex; gap: clamp(20px, 3vw, 36px); align-items: center; }
.voice-card__photo { flex: 0 0 38%; max-width: 38%; }
.voice-card__photo img { width: 100%; height: auto; border-radius: 6px; display: block; }
.voice-card__body { flex: 1 1 0; min-width: 0; }
.voice-card__body .voice-card__txt:last-child { margin-bottom: 0; }
.voice-card__sign--top { text-align: left; margin: 0 0 1.2em; color: var(--ak-red); font-weight: 600; }
.zo-firstuse { margin-top: clamp(20px, 3vw, 32px); }
@media screen and (max-width: 767px) {
  .voice-card--media { flex-direction: column; }
  .voice-card__photo { flex-basis: auto; max-width: 100%; }
  .zo-ing-grid { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 36px); }
  .zo-adviser { flex-direction: row; align-items: center; }
  /* Program：コース名を太字やや大きめ＋英字を次行へ（.sub-card__ttl は flex なので wrap で折る） */
  .zo-course-ttl { flex-wrap: wrap; }
  .zo-course-jp { font-weight: 700; font-size: 1.12em; }
  .zo-course-en { flex-basis: 100%; }
  /* 「初めてご使用になる方へ」カードを2コースから少し離す */
  .zo-firstuse { margin-top: 40px; }
}

/* アイライン：ラインの太さ表 */
.sub-table--eldesign { table-layout: fixed; }
.sub-table--eldesign th:nth-child(1), .sub-table--eldesign td:nth-child(1) { width: 26%; }
.sub-table--eldesign th:nth-child(2), .sub-table--eldesign td:nth-child(2) { width: 16%; }
.sub-table--eldesign th:nth-child(3), .sub-table--eldesign td:nth-child(3) { width: 58%; text-align: left; }
.sub-table--eldesign tbody th,
.sub-table--eldesign tbody tr:nth-child(even) td { background: #fff; }

/* 料金内の別枠（パッチテスト等） */
.price-aside {
  margin-top: clamp(20px, 3vw, 32px);
  background: #fff; border: 1px solid var(--ak-line2); border-left: 3px solid var(--ak-red);
  border-radius: 4px; padding: clamp(20px, 3vw, 30px);
}
.price-aside__ttl {
  font-family: var(--ak-serif); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em;
  color: var(--ak-ink); margin: 0 0 0.6em;
}
.price-aside__price {
  font-family: var(--ak-serif); font-size: 1rem; color: var(--ak-ink); margin: 0 0 0.8em;
}
.price-aside__price .is-price { font-size: 1.2rem; }
.price-aside__txt { font-family: var(--ak-serif); font-size: 0.95rem; line-height: 1.9; color: var(--ak-ink); margin: 0 0 0.6em; }
.price-aside__note { font-family: var(--ak-serif); font-size: 0.82rem; color: var(--ak-sub); margin: 0; }

/* アイライン：太さ表のセル内画像 */
.el-width-img {
  display: block; width: 100%; max-width: 120px; height: auto;
  margin: 0.4em auto 0; border-radius: 4px;
}

/* アイライン：デザインの種類カード画像（枠なし） */
.el-design-img { border: none; background: #fff; }

/* ============================ お知らせ（一覧・記事） ============================
 * サブページ体系（.sub-section / .sub-head / CSS変数）に揃える。 */
.news-archive .sub-head,
.news-single .sub-head { margin-bottom: clamp(28px, 4vw, 44px); }

/* ---- 一覧：日付＋タイトルの行リスト ---- */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ak-line);
}
.news-list__item { border-bottom: 1px solid var(--ak-line); }
.news-list__link {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 28px);
  padding: clamp(16px, 2.4vw, 22px) 4px;
  text-decoration: none;
  color: var(--ak-ink);
  transition: color .25s, background .25s;
}
.news-list__link:hover { color: var(--ak-red); background: rgba(255, 255, 255, .45); }
.news-list__date {
  flex-shrink: 0;
  font-family: var(--ak-en);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--ak-red);
  min-width: 6.2em;
}
.news-list__title {
  font-family: var(--ak-serif);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.7;
}
.news-empty { font-family: var(--ak-serif); color: var(--ak-sub); text-align: center; }

/* ---- ページネーション ----
 * SWELL の [class*=page-numbers] は ul/各ボタン共通で box-shadow（枠線風）を付け、
 * :hover と .current で背景を紺色(--color_main)にする。ul 自体も hover で紺色に
 * なるため、背景・box-shadow をすべて打ち消してミニマルにする（現在地のみ赤）。 */
.news-pager { margin-top: clamp(32px, 5vw, 52px); }
.news-pager .page-numbers,
.news-pager .page-numbers:hover {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 16px);
  background: none;
  box-shadow: none;
}
.news-pager .page-numbers > li { margin: 0; }
.news-pager .page-numbers a,
.news-pager .page-numbers span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  margin: 0;
  padding: 0 .5em;
  font-family: var(--ak-en);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ak-ink);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  transition: color .2s, background-color .2s;
}
.news-pager .page-numbers a:hover {
  background: none;
  color: var(--ak-red);
  box-shadow: none;
}
/* 現在地だけ赤。SWELL の紺色 .current を上書き */
.news-pager .page-numbers .current {
  background: var(--ak-red);
  color: #fff;
  box-shadow: none;
}

/* ---- 記事本文 ---- */
.news-article__date {
  display: block;
  font-family: var(--ak-en);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--ak-red);
}
.news-article__title {
  font-family: var(--ak-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.6;
  color: var(--ak-ink);
  margin: .35em 0 clamp(24px, 4vw, 40px);
  padding-bottom: clamp(16px, 2.4vw, 24px);
  border-bottom: 1px solid var(--ak-line);
}
.news-article__body {
  font-family: var(--ak-serif);
  color: var(--ak-ink);
  line-height: 1.9;
  font-size: clamp(.95rem, 1.6vw, 1.02rem);
}
.news-article__body p { margin: 0 0 1.2em; }
.news-article__body a { color: var(--ak-red); text-decoration: underline; }
.news-article__body b,
.news-article__body strong { font-weight: 600; }
.news-article__body figure,
.news-article__body .news-figure { margin: clamp(20px, 4vw, 32px) 0; text-align: center; }
.news-article__body img { max-width: 100%; height: auto; border-radius: 3px; }

/* ---- 戻るボタン ---- */
.news-single__back { margin-top: clamp(36px, 6vw, 60px); text-align: center; }
.news-back-btn {
  display: inline-block;
  font-family: var(--ak-serif);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--ak-ink);
  text-decoration: none;
  padding: 14px 40px;
  border: 1px solid var(--ak-line2);
  border-radius: 2px;
  transition: .25s;
}
.news-back-btn:hover { background: var(--ak-red); color: #fff; border-color: var(--ak-red); }

@media (max-width: 600px) {
  .news-list__link { flex-direction: column; gap: 4px; }
  .news-list__date { min-width: 0; }
}

/* ============================ アピアランスケア ============================ */
.appc-figure { margin: 0 0 1.6em; }
.appc-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.appc-figure--narrow { max-width: 460px; margin-inline: auto; }
.appc-duo { display: flex; gap: 12px; margin: 1.6em 0 0.6em; }
.appc-duo img { width: 50%; height: auto; border-radius: 8px; display: block; }
.appc-intro { max-width: 860px; margin-inline: auto; border: 1px solid var(--ak-red); border-radius: 6px; padding: clamp(28px, 5vw, 56px); background: #fff; }
.appc-intro__ttl { font-family: var(--ak-serif); font-weight: 600; color: var(--ak-red); text-align: center; font-size: clamp(1.1rem, 2.4vw, 1.4rem); letter-spacing: 0.1em; margin: 0 0 1.2em; }
.appc-intro__txt { font-family: var(--ak-serif); font-size: 1rem; line-height: 2.1; color: var(--ak-ink); margin: 0; }
.appc-intro__note { font-family: var(--ak-serif); font-size: 0.875rem; color: var(--ak-sub); margin: 1.4em 0 0; }

/* アピアランスケアへの導線リンク（眉・アイラインのおすすめ末尾） */
.appc-care-link-wrap { text-align: center; margin-top: clamp(20px, 3vw, 28px); }
.appc-care-link { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--ak-serif); font-weight: 600; font-size: 1rem; color: var(--ak-red); text-decoration: none; border-bottom: 1px solid var(--ak-red); padding-bottom: 3px; }
.appc-care-link::after { content: "›"; font-size: 1.2em; line-height: 1; }
.appc-care-link:hover { opacity: 0.75; }

/* アピアランスケア：セクション間の余白を少し詰める（このページのみ） */
.sub-page--appearance .sub-section { padding: clamp(36px, 6vw, 72px) 0; }

/* 投稿詳細：アイキャッチを本文先頭に表示（高さ上限つき・中央寄せで大きくなりすぎない） */
.news-article__eyecatch { margin: 0 auto clamp(20px, 3vw, 32px); text-align: center; }
.news-article__eyecatch img { max-width: 100%; width: auto; height: auto; max-height: 380px; display: inline-block; border-radius: 6px; }