@charset "UTF-8";
/* ==========================================================================
   menu-tsc  —  TSC新デザイン 施術メニュー共通スタイル
   Figma: TSC美容サイト / #Tab_TSC_*（タブレット768px基準）

   ★影響範囲は body.tsc-page 配下のみ。共有CSS（com.css / style.css）には
     一切触れない。既存の施術ページ・他ページには影響しない。
   ※ローカルに sass がないため .scss / .css は同一内容（ネストなし）で維持
   ========================================================================== */

body.tsc-page {
  --tsc-design-w:     768;      /* Figmaのフレーム幅（単位なし・計算用） */
  --tsc-content-w:    692;      /* Figmaのコンテンツ幅 */
  --tsc-gutter-ratio: 4.9479%;  /* 38 / 768 */

  /* 寸法の基準単位。Figma(768px)を原寸1:1とする。
     px直書きをやめて calc(N * var(--tsc-u)) で書くことで、1変数で全体が追随する。 */
  --tsc-u: 1px;

  --tsc-text:         #413d35;
  --tsc-accent:       #a89d83;
  --tsc-primary-light: #b2967b;   /* Figma変数 primarylight。症例ラベル等 */
  --tsc-accent-dark:  #987655;
  --tsc-border:       #e4dfda;
  --tsc-muted:        #b6afac;
  --tsc-badge-a:      #7d7d7d;
  --tsc-bg-head:      #fffdfa;
  --tsc-bg-faq:       #f2eee7;
  --tsc-bg-sub:       #f5f5f5;
  --tsc-bg-photo:     #ebe9e8;
  --tsc-bg-hero:      #eae6e6;
  --tsc-label:        #333333;

  --tsc-mincho:   "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --tsc-gothic:   "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --tsc-serif-en: "Playfair Display", "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   固定ヘッダーの回避
   com.css で header は position:fixed / height:var(--pcHeaderHeight)。
   main に上余白が入るのは body.blog / body.contact だけで、他のページは
   KV(#mainvisual) が高さを稼いでいる。新デザインは KV を持たないため
   ここで自前に確保する。※ .tsc-page 限定なので他ページには影響しない。
   -------------------------------------------------------------------------- */
body.tsc-page main { padding-top: var(--pcHeaderHeight, 100px); }

/* --------------------------------------------------------------------------
   ヘッダー
   com.js は #mainvisual の高さを基準に header へ .on を付けるが（com.js:99-147）、
   新デザインは KV を持たないため .on が永久に付かず、ロゴが白抜き
   （com.css:585 の filter: brightness(0) invert(1)）のまま白背景に溶けてしまう。
   ロゴ・リンク色・ハンバーガーは body に no_mainvisual を付けて既存の仕組みに乗せ
   （single-menu-tsc.php）、背景色だけは no_mainvisual では付かないのでここで足す。
   -------------------------------------------------------------------------- */
body.tsc-page header { background-color: var(--headerBgColor); }

/* --------------------------------------------------------------------------
   SP下部の固定CTA
   com.js:139-147 も #mainvisual の高さを見ているため、KVを持たない新デザインでは
   #side_navigation が一度も .show にならず、SPでCV導線が丸ごと消えていた。
   com.js が触らない body 側のクラスで出し分ける（JSは single-menu-tsc.php）。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 812px) {
  body.tsc-page.tsc-scrolled #side_navigation {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

/* --------------------------------------------------------------------------
   フレーム
   画面幅にかかわらず 768px 上限・中央寄せ、Figma原寸のまま拡大しない
   （開発シートの「最大コンテンツ幅768px」）。
   ※以前はタブレット幅(768〜1366px)で 100% に開放して比例拡大していたが、
     デザイン側のレビューで「上限768pxに固定」と決まったため廃止した。
     戻す場合は --tsc-u を画面幅連動にすること（px直書きに戻さない）。
   -------------------------------------------------------------------------- */
body.tsc-page .tsc-frame {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background: #fff;
}

/* ---------- パンくず (Layout/Breadcrumb 768x48) ----------
   ヘッダー直下に20pxの透明な余白、その下に高さ28pxの白帯という構造。
   帯の中は左右20pxのインデントで、文字は本文と同じ #413d35。 */
.tsc-breadcrumb {
  padding-top: calc(20 * var(--tsc-u));
  font-family: "Noto Sans JP", var(--tsc-gothic);
  font-size: calc(12 * var(--tsc-u));
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--tsc-text);
}
.tsc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: calc(5 * var(--tsc-u)) calc(20 * var(--tsc-u));
  background: #fff;
}
.tsc-breadcrumb a { color: inherit; text-decoration: none; }
.tsc-breadcrumb a:hover { text-decoration: underline; }
.tsc-breadcrumb li + li::before { content: ">"; margin: 0 .5em; }

/* ---------- ページヒーロー (Section/PageHero 768x140) ----------
   英字は「日本語に重ねた白文字」ではなく、帯の下辺に沈めて見切れさせる淡い装飾。
   日本語のインク下端(84px)と英字のインク上端(93px)は重ならない。 */
.tsc-hero {
  position: relative;
  height: calc(140 * var(--tsc-u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(104.227deg, rgb(244, 244, 241) 1.455%, rgb(234, 232, 231) 100.39%);
  overflow: hidden;   /* 英字を帯の下辺で切るために必須 */
}
.tsc-hero__en {
  position: absolute;
  left: 50%;
  top: calc(93 * var(--tsc-u));
  transform: translateX(-50%);
  font-family: var(--tsc-serif-en);
  font-weight: 500;
  font-size: calc(60 * var(--tsc-u));
  line-height: 1;
  letter-spacing: .12em;
  /* 白ではなく半透明グレーの横グラデ。背景のグラデに乗せて出す */
  background-image: linear-gradient(to right,
      rgba(221, 221, 221, .4) 0%,
      rgba(223, 223, 223, .4) 52.455%,
      rgba(192, 192, 192, .4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.tsc-hero__ja {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 calc(20 * var(--tsc-u));
  font-family: var(--tsc-mincho);
  font-weight: 600;   /* YuMincho Demibold */
  font-size: calc(36 * var(--tsc-u));
  line-height: 1.1;
  letter-spacing: .12em;
  color: var(--tsc-text);
  text-align: center;
}

/* ---------- コンテンツ ---------- */
.tsc-contents {
  padding: 0 var(--tsc-gutter-ratio) calc(80 * var(--tsc-u));
  font-family: var(--tsc-gothic);
  color: var(--tsc-text);
}

/* ---------- 見出し (Title/H3  pt72 / pb40、下線は gap12) ---------- */
.tsc-heading { padding: calc(72 * var(--tsc-u)) 0 calc(40 * var(--tsc-u)); }
.tsc-heading__text {
  margin: 0;
  font-family: var(--tsc-mincho);
  font-weight: 500;
  font-size: calc(24 * var(--tsc-u));
  line-height: 1.45;
  letter-spacing: .12em;
  color: var(--tsc-text);
}
.tsc-heading__line {
  position: relative;
  margin-top: calc(12 * var(--tsc-u));
  height: calc(2 * var(--tsc-u));
  width: 99.42%;            /* 688 / 692 */
}
.tsc-heading__line::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(40 * var(--tsc-u)); height: calc(2 * var(--tsc-u)); background: var(--tsc-accent);
}
.tsc-heading__line::after {
  content: ""; position: absolute; left: 0; top: calc(1 * var(--tsc-u));
  width: 100%; height: calc(1 * var(--tsc-u)); background: var(--tsc-accent); opacity: .3;
}

/* ---------- 小見出し (Title/H3Sub h49 : 縦棒4x21 + 全幅1px下線) ---------- */
.tsc-subheading { margin: 0 0 calc(30 * var(--tsc-u)); }
/* 小見出し。以前は display:flex で帯と文字を横並びにしていたが、
   フレックスだと文字が折り返さず右へはみ出すことがあった（2026-09-08）。
   帯は absolute に置き、本体は通常のブロックにして素直に折り返させる。 */
.tsc-subheading__text {
  position: relative;
  padding-left: calc(14 * var(--tsc-u));
  margin: 0;
  font-family: var(--tsc-mincho);
  font-weight: 500;
  font-size: calc(20 * var(--tsc-u));
  line-height: 2.4;
  letter-spacing: .04em;
  color: var(--tsc-text);
}
.tsc-subheading__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(4 * var(--tsc-u));
  height: calc(21 * var(--tsc-u));
  background: var(--tsc-accent);
}
/* 下線。span のままだとインライン要素なので幅0・height無効で消える。
   2026-09-08 に .tsc-subheading の display:flex を外したときに巻き込まれていた。 */
.tsc-subheading__line { display: block; width: 100%; height: calc(1 * var(--tsc-u)); background: var(--tsc-accent); }

/* ---------- 本文 ---------- */
.tsc-body { display: flex; flex-direction: column; gap: calc(10 * var(--tsc-u)); }
.tsc-body p {
  margin: 0;
  font-size: calc(18 * var(--tsc-u));
  line-height: 2;
  letter-spacing: .04em;
}
.tsc-body strong { font-weight: 600; }

/* ※注記 — 本文と同じ濃さ。薄いグレーではない */
.tsc-note {
  margin: 0;
  font-size: calc(12 * var(--tsc-u));
  line-height: 2;
  letter-spacing: .04em;
  color: var(--tsc-text);
}

/* ---------- 図版 ---------- */
.tsc-figure { position: relative; margin: calc(20 * var(--tsc-u)) 0 0; }
.tsc-figure img { display: block; width: 100%; height: auto; }
.tsc-figure--flush { margin-top: 0; }

/* 図解の上に重ねる矢印SVG群（到達深度を示す図の主題） */
.tsc-figure__overlay { position: absolute; inset: 0; pointer-events: none; }
.tsc-figure__overlay span { position: absolute; display: block; }
.tsc-figure__overlay img { position: absolute; inset: 0; width: 100%; height: 100%; }


/* 複合図版：図が横並び + 中央に矢印 + 各図の下にラベルチップ */
.tsc-figure__cols {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(80 * var(--tsc-u));
  padding-top: calc(60 * var(--tsc-u));
}
.tsc-figure__col { flex: 0 1 auto; min-width: 0; }
.tsc-figure__box { position: relative; }
.tsc-figure__box > img { display: block; width: 100%; height: auto; }
.tsc-figure__box .tsc-figure__ov { position: absolute; }
.tsc-figure__cap {
  margin: calc(10 * var(--tsc-u)) 0 0;
  padding: calc(8 * var(--tsc-u)) calc(8 * var(--tsc-u)) calc(8 * var(--tsc-u)) calc(15 * var(--tsc-u));
  border-radius: calc(3 * var(--tsc-u));
  background: #fff3f5;
  color: #df8293;
  font-family: var(--tsc-gothic);
  font-weight: 600;
  font-size: calc(14 * var(--tsc-u));
  line-height: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
  text-align: center;
}
.tsc-figure__sep { flex: 0 0 auto; align-self: center; }
.tsc-figure__sep img { display: block; width: 100%; height: auto; }

/* 仕組み図：ベージュの帯 + 図 + コマ間の矢印
   帯の「▼」はFigmaでは文字ではなくポリゴン。CSSの三角形で再現する。 */
.tsc-mech { padding-top: calc(30 * var(--tsc-u)); background: #fff; }
.tsc-mech__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--tsc-u));
  margin: 0;
  padding: calc(10 * var(--tsc-u)) 0;
  border-radius: calc(3 * var(--tsc-u));
  background: #fcf8f3;
  font-family: var(--tsc-mincho);
  font-weight: 500;
  font-size: calc(17 * var(--tsc-u));
  line-height: calc(18 * var(--tsc-u));
  letter-spacing: .04em;
  color: var(--tsc-text);
  text-align: center;
}
.tsc-mech__bar::before,
.tsc-mech__bar::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left:  calc(6.06 * var(--tsc-u)) solid transparent;
  border-right: calc(6.06 * var(--tsc-u)) solid transparent;
  border-top:   calc(9 * var(--tsc-u)) solid #a89e8b;
}
.tsc-mech__body {
  margin: calc(30 * var(--tsc-u)) auto 0;
}

/* 汎用キャンバス型図版：パネル横並び + パネル内は絶対配置 */
.tsc-figure__panels { display: flex; justify-content: center; }
.tsc-figure__panel { flex: 0 1 auto; min-width: 0; }
.tsc-figure__canvas { position: relative; width: 100%; height: 0; }
.tsc-figure__canvas > img { position: absolute; display: block; }
.tsc-figure__label {
  position: absolute;
  font-family: var(--tsc-gothic);
  font-size: calc(12 * var(--tsc-u));
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--tsc-text);
  white-space: nowrap;
}
.tsc-figure__label--boxed {
  padding: calc(4 * var(--tsc-u)) calc(8 * var(--tsc-u));
  border: calc(2 * var(--tsc-u)) solid #afafaf;
  border-radius: calc(4 * var(--tsc-u));
  background: #fff;
  color: #afafaf;
}
.tsc-figure__badge {
  margin: 0 auto calc(16 * var(--tsc-u));
  padding: calc(8 * var(--tsc-u)) calc(20 * var(--tsc-u));
  width: fit-content;
  border-radius: calc(20 * var(--tsc-u));
  background: #5dc9f1;
  color: #fff;
  font-family: var(--tsc-gothic);
  font-weight: 600;
  font-size: calc(18 * var(--tsc-u));
  letter-spacing: .04em;
  text-align: center;
}
.tsc-figure__ptitle {
  margin: 0 0 calc(4 * var(--tsc-u));
  font-family: var(--tsc-mincho);
  font-weight: 600;
  font-size: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
  text-align: center;
}
.tsc-figure__psub {
  margin: 0 0 calc(8 * var(--tsc-u));
  font-family: var(--tsc-gothic);
  font-size: calc(12 * var(--tsc-u));
  line-height: 1.5;
  color: var(--tsc-muted);
  text-align: center;
}

/* ---------- スペック表 (Table  Head200 + Cell493) ---------- */
.tsc-spec {
  width: 100%;
  margin-top: calc(20 * var(--tsc-u));
  border-collapse: collapse;
  font-family: var(--tsc-mincho);
  font-size: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
  table-layout: fixed;
}
.tsc-spec th,
.tsc-spec td {
  border: calc(1 * var(--tsc-u)) solid var(--tsc-border);
  vertical-align: middle;
  line-height: 1.5;
}
.tsc-spec th {
  width: 28.9%;                 /* 200 / 692 */
  padding: calc(10 * var(--tsc-u));
  background: var(--tsc-bg-head);
  font-weight: 500;
  text-align: center;
}
.tsc-spec td { padding: calc(10 * var(--tsc-u)) calc(15 * var(--tsc-u)); text-align: left; }

/* 料金表：段階価格 */
.tsc-price__table { margin-bottom: calc(40 * var(--tsc-u)); }
.tsc-price__table thead th {
  background: var(--tsc-muted);
  color: #fff;
  font-weight: 500;
  text-align: center;
  width: auto;
}
/* 部位列は左揃え（既定の中央揃えを打ち消す） */
.tsc-price__table tbody th { text-align: left; width: 43.5%; }
.tsc-price__table tbody td { text-align: center; }
/* 段階価格：ラベルと金額を2列で組み、ブロックごと中央に置く */
.tsc-price__tiers {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: calc(4 * var(--tsc-u)) calc(24 * var(--tsc-u));
  justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.tsc-price__tiers li { display: contents; }
.tsc-price__tiers li span:first-child { text-align: left; font-size: calc(14 * var(--tsc-u)); }
.tsc-price__tiers li span:last-child  { text-align: right; }
/* 料金表の小見出しの下に置く注記
   以前は小見出しと同じ行に right 寄せしていたが、小見出しが折り返すと
   注記と重なって読めなくなっていた（2026-09-08 吉田さん指摘・ボトックス/コアトックス）。
   常に小見出しの下に出す。padding-left は .tsc-subheading__text::before の
   帯(4u) + gap(10u) 分で、小見出しの文字の頭に揃えている。 */
.tsc-subheading__note {
  margin: calc(-6 * var(--tsc-u)) 0 calc(6 * var(--tsc-u));
  padding-left: calc(14 * var(--tsc-u));
  font-family: var(--tsc-gothic);
  font-weight: 400;
  font-size: calc(12 * var(--tsc-u));
  letter-spacing: .04em;
  color: var(--tsc-text);
}

/* ---------- 期待できる治療効果 (Benefits) ---------- */
.tsc-benefits__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 * var(--tsc-u));
  margin: 0;
  padding: calc(40 * var(--tsc-u)) 0 0;
  list-style: none;
}
.tsc-benefits__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--tsc-u));
}
.tsc-benefits__figure { position: relative; width: calc(192 * var(--tsc-u)); max-width: 100%; }
.tsc-benefits__figure--narrow { width: calc(160 * var(--tsc-u)); }
.tsc-benefits__img {
  display: block;
  width: 100%;
  aspect-ratio: 192 / 196;
  object-fit: cover;
}
.tsc-benefits__figure--narrow .tsc-benefits__img { aspect-ratio: 160 / 196; }
/* デザインチームがキャプション込みで書き出した1枚絵。コマごとに実寸が違うので
   --tsc-bw（Figma実寸px）を各要素のインラインstyleで受け取る。 */
.tsc-benefits__figure--auto { width: calc(var(--tsc-bw, 192) * var(--tsc-u)); }
.tsc-benefits__cap {
  margin: 0;
  padding: calc(2 * var(--tsc-u)) calc(9 * var(--tsc-u));
  font-family: var(--tsc-gothic);
  font-weight: 600;
  font-size: calc(13 * var(--tsc-u));
  line-height: 1.55;
  letter-spacing: .08em;
  color: var(--tsc-accent-dark);
  text-align: center;
  white-space: nowrap;
}
.tsc-benefits .tsc-note { margin-top: calc(20 * var(--tsc-u)); }

/* ---------- 症例 (Case) ---------- */
/* 症例の年代ラベル（Figma Section/Case 内）。中見出しとは別物で、
   金色バーではなく 10x1px の短い罫。書体は Noto Serif JP、色は primarylight。 */
.tsc-caselabel {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--tsc-u));
  margin: 0 0 calc(5 * var(--tsc-u));
  padding-left: calc(5 * var(--tsc-u));
  font-family: "Noto Serif JP", var(--tsc-mincho);
  font-weight: 500;
  font-size: calc(18 * var(--tsc-u));
  line-height: normal;
  letter-spacing: .04em;
  color: var(--tsc-primary-light);
}
.tsc-caselabel::before {
  content: "";
  flex: 0 0 auto;
  width: calc(10 * var(--tsc-u));
  height: 1px;
  background: var(--tsc-primary-light);
}

.tsc-case__rows { display: flex; flex-direction: column; gap: calc(30 * var(--tsc-u)); margin-top: calc(20 * var(--tsc-u)); }
.tsc-case__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--tsc-u));
}
.tsc-case__photo {
  position: relative;
  flex: 0 1 calc(304 * var(--tsc-u));
  aspect-ratio: 304 / 245;
  overflow: hidden;
  background: var(--tsc-bg-photo);
}
.tsc-case__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tsc-case__arrow {
  flex: 0 0 calc(28 * var(--tsc-u));
  width: calc(28 * var(--tsc-u));
  height: calc(64 * var(--tsc-u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsc-case__arrow img { width: calc(64 * var(--tsc-u)); height: calc(28 * var(--tsc-u)); transform: rotate(90deg); }
.tsc-case__label {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(90 * var(--tsc-u));
  padding: calc(4 * var(--tsc-u)) calc(8 * var(--tsc-u)) calc(5 * var(--tsc-u));
  background: var(--tsc-label);
  color: #fff;
  font-family: var(--tsc-serif-en);
  font-weight: 500;
  font-size: calc(13 * var(--tsc-u));
  line-height: 1;
  letter-spacing: .08em;
}
.tsc-case__label--after { width: auto; background: var(--tsc-accent-dark); }

/* 症例：1行ぶんを書き出し画像で置く場合 */
.tsc-case__figrow img { display: block; width: 100%; height: auto; }
.tsc-case__figrow .tsc-note { margin-top: calc(6 * var(--tsc-u)); }

/* ---------- 定義リスト (Difference のカートリッジ表) ---------- */
.tsc-deflist {
  width: 100%;
  margin-top: 0;
  border-collapse: collapse;
  font-family: var(--tsc-mincho);
  font-size: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
}
.tsc-deflist th,
.tsc-deflist td {
  padding: calc(10 * var(--tsc-u)) 0;
  background: var(--tsc-bg-sub);
  border-bottom: calc(1 * var(--tsc-u)) dashed var(--tsc-muted);
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
}
.tsc-deflist th {
  width: 1%;
  padding-left: calc(15 * var(--tsc-u));
  padding-right: calc(20 * var(--tsc-u));
  font-weight: 500;
  white-space: nowrap;
  color: var(--tsc-accent);
}
.tsc-deflist td { padding-right: calc(15 * var(--tsc-u)); }
.tsc-deflist tr:first-child th,
.tsc-deflist tr:first-child td { padding-top: calc(15 * var(--tsc-u)); }
.tsc-deflist tr:last-child th,
.tsc-deflist tr:last-child td { padding-bottom: calc(15 * var(--tsc-u)); border-bottom: none; }

/* 効果リスト（枠線ボックス + アイコン） */
.tsc-points {
  margin: calc(24 * var(--tsc-u)) 0 calc(32 * var(--tsc-u));
  padding: calc(8 * var(--tsc-u)) calc(24 * var(--tsc-u));
  list-style: none;
  border: 1px solid var(--tsc-border);
  border-radius: calc(6 * var(--tsc-u));
}
.tsc-points__item {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  gap: calc(16 * var(--tsc-u));
  padding: calc(16 * var(--tsc-u)) 0;
  border-bottom: 1px solid var(--tsc-border);
}
.tsc-points__item:last-child { border-bottom: none; }
.tsc-points__icon { flex: 0 0 auto; width: calc(28 * var(--tsc-u)); height: auto; }
.tsc-points__text {
  flex: 1 1 auto;
  text-align: left;
  margin: 0;
  font-size: calc(16 * var(--tsc-u));
  line-height: 1.75;
  letter-spacing: .04em;
}
.tsc-points__text strong { font-weight: 600; }

/* 経過タイムライン */
.tsc-timeline__block { margin-bottom: calc(48 * var(--tsc-u)); }
.tsc-timeline__block:last-child { margin-bottom: 0; }
.tsc-timeline__lines { margin: 0 0 calc(20 * var(--tsc-u)); padding: 0; list-style: none; }
/* データ側の文字列に「・」が含まれているので、CSSでは付けない */
.tsc-timeline__lines li {
  font-size: calc(16 * var(--tsc-u));
  line-height: 1.9;
  letter-spacing: .04em;
}
.tsc-timeline__figrow img { display: block; width: 100%; height: auto; }
.tsc-timeline__figrow--single { width: 30.06%; }   /* 208 / 692 */
.tsc-timeline__figrow--pair   { width: 63.01%; }   /* (208*2 + 矢印20) / 692 */
.tsc-timeline__photos { display: flex; align-items: center; gap: calc(20 * var(--tsc-u)); }
.tsc-timeline__photo { position: relative; flex: 0 1 calc(208 * var(--tsc-u)); }
.tsc-timeline__photo img { display: block; width: 100%; height: auto; }
.tsc-timeline__label {
  position: absolute; left: 0; top: 0;
  padding: calc(4 * var(--tsc-u)) calc(10 * var(--tsc-u));
  background: var(--tsc-accent-dark);
  color: #fff;
  font-family: var(--tsc-gothic);
  font-size: calc(13 * var(--tsc-u));
  letter-spacing: .04em;
}
.tsc-timeline__arrow { flex: 0 0 auto; width: calc(20 * var(--tsc-u)); }
.tsc-timeline__arrow img { display: block; width: 100%; height: auto; }

/* ---------- FAQ ---------- */
.tsc-faq { display: flex; flex-direction: column; gap: calc(40 * var(--tsc-u)); margin: 0; padding: 0; list-style: none; }
.tsc-faq__q,
.tsc-faq__a { display: flex; gap: calc(20 * var(--tsc-u)); padding: calc(20 * var(--tsc-u)); }
.tsc-faq__q { background: var(--tsc-bg-faq); align-items: center; }
.tsc-faq__a { background: #fff; align-items: flex-start; }
.tsc-faq__badge {
  flex: 0 0 calc(42 * var(--tsc-u));
  width: calc(42 * var(--tsc-u)); height: calc(42 * var(--tsc-u));
  border-radius: calc(60 * var(--tsc-u));
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif JP", var(--tsc-mincho);
  font-weight: 500;
  font-size: calc(18 * var(--tsc-u));
  letter-spacing: .04em;
  color: #fff;
}
.tsc-faq__badge--q { background: var(--tsc-accent); }
.tsc-faq__badge--a { background: var(--tsc-badge-a); }
.tsc-faq__text {
  flex: 1;
  margin: 0;
  font-size: calc(18 * var(--tsc-u));
  line-height: 2;
  letter-spacing: .04em;
}
.tsc-faq__q .tsc-faq__text { font-weight: 600; }
.tsc-faq__a .tsc-faq__text { line-height: 1.8; }

/* ---------- 禁忌事項 (NG) ---------- */
.tsc-ng__lead { margin: 0 0 calc(56 * var(--tsc-u)); font-size: calc(18 * var(--tsc-u)); line-height: 2; letter-spacing: .04em; }
.tsc-ng__list { margin: 0; padding: 0; list-style: none; counter-reset: tscng; display: flex; flex-direction: column; gap: calc(8 * var(--tsc-u)); }
.tsc-ng__list li {
  display: flex;
  gap: calc(8 * var(--tsc-u));
  font-size: calc(18 * var(--tsc-u));
  line-height: 2;
  letter-spacing: .04em;
}
.tsc-ng__list li::before {
  counter-increment: tscng;
  content: counter(tscng) ".";
  flex: 0 0 auto;
  font-family: var(--tsc-gothic);
  white-space: nowrap;
}

/* 【重要】等の強調ラベル（Figma: #b93f56） */
.tsc-mark { color: #b93f56; font-weight: 600; }

/* ---------- 注意事項 (Notice) ---------- */
.tsc-notice__lead { margin: 0 0 calc(40 * var(--tsc-u)); font-size: calc(18 * var(--tsc-u)); line-height: 2; letter-spacing: .04em; }
.tsc-notice__list { display: flex; flex-direction: column; gap: calc(30 * var(--tsc-u)); margin: 0; padding: 0; list-style: none; }
.tsc-notice__item { display: flex; flex-direction: column; gap: calc(10 * var(--tsc-u)); }
.tsc-notice__title {
  align-self: flex-start;
  margin: 0;
  padding: calc(8 * var(--tsc-u)) calc(15 * var(--tsc-u));
  background: var(--tsc-muted);
  font-family: var(--tsc-mincho);
  font-weight: 600;
  font-size: calc(18 * var(--tsc-u));
  letter-spacing: .04em;
  color: #fff;
}
.tsc-notice__title--risk { background: var(--tsc-accent); }   /* Figma: #a89d83 */
/* ラベル帯に重なる丸バッジ（重要 など） */
.tsc-notice__title { position: relative; }
/* バッジがある行はラベル文字が隠れないよう右に余白を足す */
.tsc-notice__title:has(.tsc-badge) { padding-right: calc(38 * var(--tsc-u)); }
.tsc-badge {
  position: absolute;
  right: calc(-20 * var(--tsc-u));
  top: calc(-20 * var(--tsc-u));
  display: flex; align-items: center; justify-content: center;
  width: calc(44 * var(--tsc-u)); height: calc(44 * var(--tsc-u));
  border-radius: 50%;
  background: #b93f56;
  color: #fff;
  font-family: var(--tsc-gothic);
  font-weight: 600;
  font-size: calc(13 * var(--tsc-u));
  letter-spacing: .02em;
  line-height: 1;
}
/* 本文の下に付く小さめの注釈 */
.tsc-notice__sub {
  margin: calc(4 * var(--tsc-u)) 0 0;
  font-size: calc(12 * var(--tsc-u));
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--tsc-text);
}
/* 症例の行ラベル（額・エラ など） */
.tsc-case__rowlabel {
  margin: 0 0 calc(8 * var(--tsc-u));
  font-family: var(--tsc-mincho);
  font-weight: 600;
  font-size: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
}
.tsc-ng__list--plain { counter-reset: none; }
.tsc-ng__list--plain li::before { content: none; }

.tsc-notice__desc { margin: 0; font-size: calc(18 * var(--tsc-u)); line-height: 2; letter-spacing: .04em; }

/* ==========================================================================
   SP (〜767px)
   Figma の SPフレームは未取得。768px設計を縮めた暫定対応。
   ========================================================================== */
@media screen and (max-width: 767px) {
  body.tsc-page { --tsc-gutter-ratio: 5.3333%; }   /* 20 / 375 */

  /* 英字は帯の下辺で切る意匠。PC(帯140/英字60/top93)と同じ見え方になるよう、
     帯の高さ110pxに対して英字34px・top76pxにする（cap分は見えて、descenderが切れる）。
     日本語は長いタイトル（ウルトラフォーマーMPT（HIFU））が375px幅で1行に収まる20pxを維持。 */
  .tsc-hero { height: 110px; }
  .tsc-hero__en { font-size: 34px; top: 76px; }
  .tsc-hero__ja { font-size: 20px; }

  .tsc-heading { padding: 48px 0 28px; }
  .tsc-heading__text { font-size: 20px; }
  .tsc-subheading__text { font-size: 17px; }

  .tsc-body p,
  .tsc-faq__text,
  .tsc-ng__list li,
  .tsc-ng__lead,
  .tsc-notice__lead,
  .tsc-notice__desc { font-size: 15px; }

  .tsc-ng__lead { margin-bottom: 32px; }
  .tsc-notice__lead { margin-bottom: 24px; }

  .tsc-spec { font-size: 14px; }
  .tsc-spec th { width: 30%; padding: 8px; }
  .tsc-spec td { padding: 8px 10px; }

  .tsc-benefits__list { padding-top: 24px; gap: 16px 8px; }
  .tsc-benefits__figure { width: 140px; }
  .tsc-benefits__figure--narrow { width: 118px; }
  /* 375px幅で2コマ並ぶ倍率。210px → 143px（143*2 + gap8 = 294 ≤ 335） */
  .tsc-benefits__figure--auto { width: calc(var(--tsc-bw, 192) * .68px); }
  .tsc-benefits__cap { font-size: 12px; white-space: normal; }

  .tsc-case__rows { gap: 24px; }
  .tsc-case__arrow { flex-basis: 18px; width: 18px; height: 40px; }
  .tsc-case__arrow img { width: 40px; height: 18px; }
  .tsc-case__label { width: 70px; font-size: 11px; }

  .tsc-deflist { font-size: 14px; }
  .tsc-deflist th { padding-right: 12px; }

  .tsc-faq { gap: 24px; }
  .tsc-faq__q, .tsc-faq__a { padding: 14px; gap: 12px; }
  .tsc-faq__badge { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }

  .tsc-notice__title { font-size: 15px; padding: 6px 12px; }
}

/* ==========================================================================
   ヘッダー余白の切替はサイト共通のブレークポイント（812px）に合わせる。
   com.css で header の高さが --pcHeaderHeight → --spHeaderHeight に変わるため。
   ========================================================================== */
@media screen and (max-width: 812px) {
  body.tsc-page main { padding-top: var(--spHeaderHeight, 70px); }
}

/* ==========================================================================
   タブレット（iPad等）
   meta.php は iPhone/iPod/Android-Mobile 以外のUAに viewport=1280 を書き込むため、
   iPadでは1280pxの器の中に768px設計が置かれ、左右が大きく余って小さく見える。
   タッチ端末のときだけ基準単位を画面幅連動にして、設計全体を等倍で引き伸ばす。
   px直書きをしていないので --tsc-u を差し替えるだけで全要素が追随する。

   PCブラウザ（hover可能なポインタ）は先方指示どおり768px原寸・中央寄せのまま。
   デザインレビューはPCで行われるため、そこの見え方は変えない。
   ========================================================================== */
@media screen and (min-width: 768px) and (hover: none) and (pointer: coarse) {
  body.tsc-page { --tsc-u: calc(100vw / 768); }
  body.tsc-page .tsc-frame { max-width: none; }
}

/* --------------------------------------------------------------
   比較表（機器・薬剤の違い）
   Figma実測: ヒアルロン酸溶解 36:9485
     行ラベル列 120px / セル高 66px / 罫線 #e2f7ff
     見出しセル 1列目 #dbf4fe・2列目 #dbedfe（枠 #f8fdff）
     本体セル   1列目 #f8fdff・2列目 #f8fbff
     文字 Noto Serif JP Medium 16px / tracking .04em / 中央揃え
   このセクションだけ寒色。ページ全体の暖色とは別系統なのが原本の意図。
   -------------------------------------------------------------- */
.tsc-comparison__scroll {
  overflow-x: auto;              /* 幅が足りない端末では表だけ横スクロールさせる */
  -webkit-overflow-scrolling: touch;
}
.tsc-comparison__table {
  width: 100%;
  /* 列数ぶんの最低幅。Figma は「ラベル140 + 1列あたり170」で設計されている。
     520px 固定にしていたころは、6列の薬剤比較表が1セル2〜4文字で折り返して読めなかった。
     --tsc-cmp-cols は _render.php がデータの列数から与える。 */
  min-width: calc(140px + var(--tsc-cmp-cols, 3) * 170px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.tsc-comparison__table th,
.tsc-comparison__table td {
  height: 66px;
  padding: 10px 15px;
  border: 1px solid #e2f7ff;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04em;
  color: #413d35;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}
/* 行ラベル列 */
.tsc-comparison__table tbody th,
.tsc-comparison__corner {
  width: 17.34%;                 /* 120 / 692 */
  background: #fff;
}
.tsc-comparison__corner { border-color: transparent; }
/* 見出し行 */
.tsc-comparison__col { border-color: #f8fdff; }
.tsc-comparison__col.tsc-comparison__col--1 { background: #dbf4fe; }
.tsc-comparison__col.tsc-comparison__col--2 { background: #dbedfe; }
/* 本体セル */
.tsc-comparison__table td.tsc-comparison__col--1 { background: #f8fdff; }
.tsc-comparison__table td.tsc-comparison__col--2 { background: #f8fbff; }

.tsc-comparison__note {
  margin-top: 16px;
  font-family: "Hiragino Sans", sans-serif;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .08em;
  color: #b6afac;
}

/* 料金表の注記。小見出しが無いページでは表の下に置く */
.tsc-price__note {
  margin-top: 16px;
  font-family: "Hiragino Sans", sans-serif;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .08em;
  color: #b6afac;
}
.tsc-price__note + .tsc-price__note { margin-top: 4px; }

/* BTLセルトーンの効果イラストは4コマ。Figmaは幅440の2列2段だが、
   共通CSSのままだと3+1に割れて最後の1つが取り残される */
body.btl-cellutone .tsc-benefits__list {
  max-width: calc(440 * var(--tsc-u));
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------
   薬剤・機器の個別紹介（solutions）
   Figma実測: 脂肪溶解注射 36:9802 / 医療脱毛 36:14166
   「小見出し＋本文＋写真＋（成分カード｜チェックリスト｜料金表）」の複合。
   脂肪溶解注射はページの主要部がこの節なので、崩れると内容がほぼ消える。
   -------------------------------------------------------------- */
.tsc-solutions__block { margin-bottom: calc(40 * var(--tsc-u)); }
.tsc-solutions__block:last-child { margin-bottom: 0; }
.tsc-solutions__image { margin: calc(10 * var(--tsc-u)) 0 0; }
.tsc-solutions__image img { display: block; width: 100%; height: auto; background: #f3f3f3; }

.tsc-solutions__group { padding-top: calc(20 * var(--tsc-u)); }
.tsc-solutions__label {
  display: flex; align-items: center; gap: calc(5 * var(--tsc-u));
  margin: 0 0 calc(10 * var(--tsc-u));
  font-family: var(--tsc-mincho); font-weight: 500;
  font-size: calc(18 * var(--tsc-u)); letter-spacing: .04em; color: var(--tsc-text);
}
.tsc-solutions__label img { flex: 0 0 auto; margin: 0; width: calc(22 * var(--tsc-u)); height: auto; }
/* 料金グループだけラベル行の右端に注記が入る（Figma 36:9850 justify-between） */
.tsc-solutions__labelnote {
  margin-left: auto; font-family: var(--tsc-gothic); font-style: normal;
  font-size: calc(11 * var(--tsc-u)); letter-spacing: .04em;
}

/* 成分カード。名前チップはカード上辺に密着（下だけ角丸） */
.tsc-solutions__cards { display: flex; flex-wrap: wrap; gap: calc(10 * var(--tsc-u)); margin: 0; padding: 0; list-style: none; }
.tsc-solutions__card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(10 * var(--tsc-u));
  width: 46.24%;
  min-height: calc(160 * var(--tsc-u));
  padding: 0 calc(15 * var(--tsc-u)) calc(10 * var(--tsc-u));
  background: #fff; border: 1px solid #f2eee7;
}
.tsc-solutions__card-name {
  align-self: center; margin-top: 0;
  padding: calc(4 * var(--tsc-u)) calc(10 * var(--tsc-u));
  background: #f2eee7; border-radius: 0 0 calc(10 * var(--tsc-u)) calc(10 * var(--tsc-u));
  font-family: var(--tsc-mincho); font-size: calc(16 * var(--tsc-u)); letter-spacing: .04em;
}
.tsc-solutions__card-role {
  margin: 0; font-family: var(--tsc-mincho);
  font-size: calc(16 * var(--tsc-u)); letter-spacing: .04em; color: #987655;
}
.tsc-solutions__card-desc {
  margin: 0; font-family: var(--tsc-mincho);
  font-size: calc(14 * var(--tsc-u)); letter-spacing: .04em; line-height: 1.6;
}

.tsc-solutions__checks { margin: 0; padding: 0; list-style: none; }
.tsc-solutions__checks li {
  display: flex; align-items: center; gap: calc(10 * var(--tsc-u));
  padding: calc(10 * var(--tsc-u)) 0 calc(10 * var(--tsc-u)) calc(10 * var(--tsc-u));
  border-bottom: 1px solid #f2eee7;
  font-family: var(--tsc-mincho); font-size: calc(16 * var(--tsc-u)); letter-spacing: .04em;
}
.tsc-solutions__checks li img { flex: 0 0 auto; margin: 0; width: calc(15 * var(--tsc-u)); height: auto; }

.tsc-solutions__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tsc-solutions__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tsc-solutions__table th,
.tsc-solutions__table td {
  padding: calc(10 * var(--tsc-u));
  font-family: var(--tsc-mincho); letter-spacing: .04em; text-align: center; vertical-align: middle;
}
.tsc-solutions__table thead th {
  padding: calc(6 * var(--tsc-u)) calc(10 * var(--tsc-u));
  background: #b6afac; color: #fff; font-size: calc(15 * var(--tsc-u));
  border-left: 1px solid #fff;
}
.tsc-solutions__table thead th:first-child { border-left: none; }
.tsc-solutions__table tbody th {
  width: 31.07%; height: calc(50 * var(--tsc-u));
  background: #f2eee7; font-size: calc(16 * var(--tsc-u));
  border: 1px solid #e4dfda; border-top: none;
}
.tsc-solutions__table tbody td {
  height: calc(50 * var(--tsc-u));
  background: #fff; font-size: calc(16 * var(--tsc-u));
  border: 1px solid #e4dfda; border-top: none;
}
@media screen and (max-width: 812px) {
  .tsc-solutions__card { width: 100%; }
}

/* ---------- メニュー一覧（点滴ページ冒頭のアンカーリンク） ---------- */
.tsc-menulist { padding-top: calc(20 * var(--tsc-u)); }
.tsc-menulist__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--tsc-u));
  margin: 0;
  padding: calc(4 * var(--tsc-u)) 0;
  background: var(--tsc-accent);
  color: #fff;
  font-family: var(--tsc-mincho);
  font-size: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
  text-align: center;
}
/* 帯の左右の小さな下向き三角。画像を足さずに clip-path で描く */
.tsc-menulist__bar::before,
.tsc-menulist__bar::after {
  content: "";
  flex: 0 0 auto;
  width: calc(12 * var(--tsc-u));
  height: calc(8 * var(--tsc-u));
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tsc-menulist__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--tsc-u)) calc(40 * var(--tsc-u));
  margin: calc(10 * var(--tsc-u)) 0 0;
  padding: 0;
  list-style: none;
}
.tsc-menulist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--tsc-u));
  padding: 0 calc(5 * var(--tsc-u)) calc(8 * var(--tsc-u)) calc(4 * var(--tsc-u));
  border-bottom: calc(1 * var(--tsc-u)) solid var(--tsc-accent);
  color: var(--tsc-text);
  text-decoration: none;
}
.tsc-menulist__body { display: flex; flex-direction: column; gap: calc(5 * var(--tsc-u)); min-width: 0; }
.tsc-menulist__title {
  font-family: var(--tsc-mincho);
  font-size: calc(18 * var(--tsc-u));
  letter-spacing: .04em;
}
.tsc-menulist__tags { display: flex; flex-wrap: wrap; gap: calc(5 * var(--tsc-u)); }
.tsc-menulist__tag {
  padding: calc(2 * var(--tsc-u)) calc(10 * var(--tsc-u));
  border: calc(1 * var(--tsc-u)) solid var(--tsc-accent);
  border-radius: calc(18 * var(--tsc-u));
  color: var(--tsc-accent);
  font-family: var(--tsc-mincho);
  font-size: calc(13 * var(--tsc-u));
  line-height: calc(20 * var(--tsc-u));
  letter-spacing: .02em;
  white-space: nowrap;
}
.tsc-menulist__chevron { flex: 0 0 auto; width: calc(7 * var(--tsc-u)); height: calc(12 * var(--tsc-u)); }

/* ---------- 点滴ページ：メニュー1件分 ---------- */
.tsc-menu .tsc-subheading { margin-top: calc(40 * var(--tsc-u)); }

/* アイコン付きの小ラベル（期待できる効果 / 施術概要） */
.tsc-menu__label {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--tsc-u));
  margin: calc(20 * var(--tsc-u)) 0 calc(10 * var(--tsc-u));
  color: var(--tsc-text);
  font-family: var(--tsc-mincho);
  font-size: calc(18 * var(--tsc-u));
  line-height: 1.6;
  letter-spacing: .04em;
}
.tsc-menu__label img {
  /* margin を明示的に 0 で潰す。共有CSS側にアイコンへ届く auto マージンがあり、
     flex アイテムだと auto が余白を全部吸ってアイコンが中央、文字が右端に飛ぶ。 */
  flex: 0 0 auto; margin: 0;
  width: calc(22 * var(--tsc-u)); height: calc(22 * var(--tsc-u));
}

/* 期待できる効果のチェックリスト。チェック印は SVG を mask にしてアクセント色で塗る */
.tsc-menu__checks { margin: 0; padding: 0; list-style: none; }
.tsc-menu__checks li {
  position: relative;
  padding: 0 0 calc(10 * var(--tsc-u)) calc(35 * var(--tsc-u));
  border-bottom: calc(1 * var(--tsc-u)) solid #f2eee7;
  color: var(--tsc-text);
  font-family: var(--tsc-mincho);
  font-size: calc(16 * var(--tsc-u));
  letter-spacing: .04em;
}
.tsc-menu__checks li + li { margin-top: calc(10 * var(--tsc-u)); }
.tsc-menu__checks li::before {
  content: "";
  position: absolute;
  left: calc(10 * var(--tsc-u));
  top: calc(6 * var(--tsc-u));
  width: calc(15 * var(--tsc-u));
  height: calc(11 * var(--tsc-u));
  background: var(--tsc-accent);
  -webkit-mask: url("/images/service/tsc/drip/icon-check.svg") no-repeat center / contain;
          mask: url("/images/service/tsc/drip/icon-check.svg") no-repeat center / contain;
}

/* 料金表の列見出しに載せる OFF バッジ。
   Figma ではセルの外側に浮いているが、列数がメニューごとに 4〜5 列と変わるので
   th の中に入れて上へ逃がす。列幅に依存させないための措置。 */
.tsc-menu__price { margin-top: calc(24 * var(--tsc-u)); }
.tsc-menu__price thead th { position: relative; overflow: visible; }
.tsc-menu__off {
  position: absolute;
  left: 50%;
  top: calc(-13 * var(--tsc-u));
  transform: translateX(-50%);
  padding: calc(1 * var(--tsc-u)) calc(10 * var(--tsc-u)) calc(2 * var(--tsc-u));
  border-radius: calc(10 * var(--tsc-u));
  background: #948b87;
  color: #fff;
  font-family: var(--tsc-mincho);
  font-size: calc(12 * var(--tsc-u));
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* メニュー名の列。既存 .tsc-price__table の 43.5% を打ち消す */
.tsc-menu__price tbody th,
.tsc-menu__price thead th:first-child { width: 32.5%; }

@media screen and (max-width: 812px) {
  .tsc-menulist__grid { grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--tsc-u)); }
}

/* ---------- 見出しの無い継続セクションで、ブロックが余白ゼロでくっつくのを防ぐ ----------
   Figma は「1つのセクションに小見出しが複数ぶら下がる」構成なので、実装では
   heading を空にした後続セクションへ分割している。その結果、セクション間の余白が
   heading のパディング頼みになり、heading が無い側で 0 になっていた。

   見た目だけの問題ではない。スキンボトックスの「その他の留意点」では
   番号リストの直後にリード文「以下の方は施術を控えた方がよい〜」が密着し、
   リストの3項目目として読めてしまっていた（意味が変わる）。 */
.tsc-ng__list + .tsc-body,
.tsc-ng__list + .tsc-ng__lead,
.tsc-body + .tsc-ng__lead,
.tsc-ng__list + .tsc-notice__list { margin-top: calc(24 * var(--tsc-u)); }

/* 症例写真の直後に来る定義表。写真のラベルチップが表の上辺に貼り付いて見えていた */
.tsc-sec.tsc-difference > .tsc-deflist:first-child { margin-top: calc(24 * var(--tsc-u)); }


/* ---------- 料金表：スマホ幅で段階価格がセルからはみ出す不具合の修正（2026-10-13）
   max-content×2列のグリッドが td の幅を超え、金額が右端で切れていた。
   狭い画面ではラベル列を縮められるようにし、部位列も少し細くする。 */
@media screen and (max-width: 812px) {
  .tsc-price__table tbody th { width: 36%; }
  .tsc-price__table tbody td { padding-left: calc(10 * var(--tsc-u)); padding-right: calc(10 * var(--tsc-u)); }
  .tsc-price__tiers {
    grid-template-columns: minmax(0, 1fr) max-content;
    justify-content: stretch;
    column-gap: calc(8 * var(--tsc-u));
  }
  .tsc-price__tiers li span:first-child { font-size: calc(12 * var(--tsc-u)); line-height: 1.4; }
}

/* ---------- 取り扱い機器・製剤（「〇〇とは」の直後に置く）2026-10 追加 ----------
   議事録（9/28）：「プッシュではない」「見る人は見る」程度の扱い。
   機器名＋メーカー＋1〜2行の説明だけの控えめな帯にする。
   背景色はフレームの左右端まで敷く（box-shadow で伸ばし、フレームの overflow-x: clip で端を揃える）。
   写真は後日追加予定。.tsc-device__photo を入れると左に小さな写真・右に説明の2列になる。 */
body.tsc-page .tsc-frame { overflow-x: clip; }
.tsc-device {
  margin-top: calc(48 * var(--tsc-u));
  padding: calc(28 * var(--tsc-u)) 0 calc(32 * var(--tsc-u));
  background: var(--tsc-bg-faq);
  box-shadow: 0 0 0 100vmax var(--tsc-bg-faq);
  clip-path: inset(0 -100vmax);
}
.tsc-device__title {
  margin: 0 0 calc(12 * var(--tsc-u));
  font-family: var(--tsc-mincho);
  font-size: calc(15 * var(--tsc-u));
  letter-spacing: .12em;
  color: var(--tsc-accent-dark);
}
.tsc-device__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--tsc-u)); align-items: center; }
.tsc-device__item + .tsc-device__item { margin-top: calc(16 * var(--tsc-u)); padding-top: calc(16 * var(--tsc-u)); border-top: calc(1 * var(--tsc-u)) dashed var(--tsc-muted); }
.tsc-device__item:has(.tsc-device__photo) { grid-template-columns: calc(120 * var(--tsc-u)) minmax(0, 1fr); }
.tsc-device__photo { margin: 0; background: #fff; }
/* 写真のある項目と無い項目が混在するとき、文字の頭を揃える（写真が無い項目に空の枠は出さない） */
.tsc-device:has(.tsc-device__photo) .tsc-device__item:not(:has(.tsc-device__photo)) { padding-left: calc(136 * var(--tsc-u)); }
.tsc-device__photo img { display: block; width: 100%; height: auto; }
.tsc-device__name { margin: 0; font-size: calc(16 * var(--tsc-u)); font-weight: 600; letter-spacing: .06em; line-height: 1.6; }
.tsc-device__maker { margin-left: calc(10 * var(--tsc-u)); font-size: calc(12 * var(--tsc-u)); font-weight: 400; color: #8c8579; }
.tsc-device__lead { margin: calc(4 * var(--tsc-u)) 0 0; font-size: calc(14 * var(--tsc-u)); line-height: 1.8; }
@media screen and (max-width: 812px) {
  .tsc-device__item:has(.tsc-device__photo) { grid-template-columns: calc(88 * var(--tsc-u)) minmax(0, 1fr); }
  .tsc-device__maker { display: block; margin-left: 0; }
  .tsc-device:has(.tsc-device__photo) .tsc-device__item:not(:has(.tsc-device__photo)) { padding-left: calc(104 * var(--tsc-u)); }
}

/* ---------- 未承認医薬品等の明示（ページ末尾に小さく）2026-10 追加 ----------
   9/28議事録：湘南と同じく「目立たないように最低限、下の方に小さく」。
   ただしガイドライン上は読める形で載せる必要があるため、12px・十分なコントラストは確保する。 */
.tsc-unapproved {
  margin-top: calc(64 * var(--tsc-u));
  padding-top: calc(20 * var(--tsc-u));
  border-top: calc(1 * var(--tsc-u)) solid var(--tsc-border);
  color: #6b655b;
  font-size: calc(12 * var(--tsc-u));
  line-height: 1.75;
}
.tsc-unapproved__title { margin: 0 0 calc(8 * var(--tsc-u)); font-size: calc(13 * var(--tsc-u)); font-weight: 600; }
.tsc-unapproved__list { margin: 0; }
.tsc-unapproved__list dt { margin-top: calc(8 * var(--tsc-u)); font-weight: 600; }
.tsc-unapproved__list dt::before { content: "■ "; color: var(--tsc-muted); }
.tsc-unapproved__list dd { margin: 0; }
.tsc-unapproved__list a { color: inherit; text-decoration: underline; word-break: break-all; }
.tsc-device > .tsc-device__lead:last-child { margin-top: calc(14 * var(--tsc-u)); font-size: calc(12 * var(--tsc-u)); color: #8c8579; }

/* ---------- 二重埋没法「ダウンタイムの目安」：Figma（1022:1147）に合わせる 2026-10 ----------
   経過は「時期／状態」の表、症例は写真を左・「治療の背景／気になる所」を右に並べる。 */
.tsc-timeline-table { margin-top: calc(24 * var(--tsc-u)); }
.tsc-timeline-table th, .tsc-timeline-table td { text-align: center; }
.tsc-timeline-table tbody td:first-child { width: 36%; background: var(--tsc-bg-subtle, #faf9f6); }
.tsc-case-story { margin-top: calc(48 * var(--tsc-u)); display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: calc(32 * var(--tsc-u)); align-items: start; }
.tsc-case-story > .tsc-figure { width: auto; margin: 0; }
.tsc-case-story .tsc-deflist { margin: calc(8 * var(--tsc-u)) 0 0; background: none; }
.tsc-case-story .tsc-deflist, .tsc-case-story .tsc-deflist tbody, .tsc-case-story .tsc-deflist tr,
.tsc-case-story .tsc-deflist th, .tsc-case-story .tsc-deflist td { display: block; width: auto; padding: 0; border: 0; background: none; text-align: left; }
.tsc-case-story .tsc-deflist th {
  padding: calc(2 * var(--tsc-u)) 0 calc(8 * var(--tsc-u)) calc(12 * var(--tsc-u));
  border-left: calc(3 * var(--tsc-u)) solid var(--tsc-accent);
  border-bottom: calc(1 * var(--tsc-u)) solid var(--tsc-border);
  font-family: var(--tsc-mincho); font-weight: 500; font-size: calc(16 * var(--tsc-u)); color: inherit; letter-spacing: .06em;
}
.tsc-case-story .tsc-deflist td { padding: calc(12 * var(--tsc-u)) 0 calc(32 * var(--tsc-u)); line-height: 1.8; }
@media screen and (max-width: 480px) { .tsc-case-story { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 糸リフト：Figma（3303:2656／3303:2690／3303:3107）とのずれを修正 2026-10 ---------- */
/* 原因：番号・見出し・説明を左、図を右に1つずつ。図は横並び3枚の1枚画像を切り出して表示 */
.tsc-causes__table { width: 100%; border-collapse: collapse; margin-top: calc(24 * var(--tsc-u)); counter-reset: cause; }
.tsc-causes__table tr { counter-increment: cause; }
.tsc-causes__table th, .tsc-causes__table td { padding: calc(14 * var(--tsc-u)) 0; border: 0; text-align: left; vertical-align: middle; background: none; }
.tsc-causes__table th { display: block; padding-bottom: 0; font-size: calc(17 * var(--tsc-u)); font-weight: 600; }
.tsc-causes__table th::before { content: counter(cause); display: inline-grid; place-items: center; width: calc(28 * var(--tsc-u)); height: calc(28 * var(--tsc-u)); margin-right: calc(10 * var(--tsc-u)); border-radius: 50%; background: var(--tsc-accent); color: #fff; font-size: calc(14 * var(--tsc-u)); font-weight: 400; }
.tsc-causes__table tr { display: grid; grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: auto auto; column-gap: calc(24 * var(--tsc-u)); align-items: center; }
.tsc-causes__table th { grid-column: 1; grid-row: 1; align-self: end; }
.tsc-causes__table td:not(.tsc-causes__img) { grid-column: 1; grid-row: 2; align-self: start; padding-top: calc(8 * var(--tsc-u)); font-size: calc(14 * var(--tsc-u)); }
.tsc-causes__img { grid-column: 2; grid-row: 1 / span 2; }
.tsc-causes__crop { overflow: hidden; aspect-ratio: 231 / 152; }
.tsc-causes__crop img { display: block; width: 300%; max-width: none; height: auto; }
.tsc-causes__crop--2 img { margin-left: -100%; }
.tsc-causes__crop--3 img { margin-left: -200%; }
.tsc-checklist { list-style: none; padding-left: 0; }
.tsc-checklist li { position: relative; padding-left: calc(24 * var(--tsc-u)); font-weight: 600; }
.tsc-checklist li::before { content: ""; position: absolute; left: calc(2 * var(--tsc-u)); top: .55em; width: calc(10 * var(--tsc-u)); height: calc(5 * var(--tsc-u)); border-left: calc(1.5 * var(--tsc-u)) solid var(--tsc-accent); border-bottom: calc(1.5 * var(--tsc-u)) solid var(--tsc-accent); transform: rotate(-45deg); }
/* 仕組みと効果：左に「主な効果」、右に図 */
.tsc-benefit-split { display: grid; grid-template-columns: minmax(0, 1fr) 52%; column-gap: calc(24 * var(--tsc-u)); align-items: center; }
.tsc-benefit-split > .tsc-heading, .tsc-benefit-split > .tsc-body { grid-column: 1 / -1; }
.tsc-benefit-split > .tsc-figure { grid-column: 2; grid-row: 3; margin: calc(16 * var(--tsc-u)) 0 0; }
.tsc-benefit-split__list { grid-column: 1; grid-row: 3; border: 0; margin: 0; }
.tsc-benefit-split__list, .tsc-benefit-split__list tbody, .tsc-benefit-split__list tr, .tsc-benefit-split__list th, .tsc-benefit-split__list td { display: block; border: 0; padding: 0; background: none; text-align: left; width: auto; }
.tsc-benefit-split__list th { color: var(--tsc-accent-dark); font-weight: 600; font-size: calc(16 * var(--tsc-u)); margin-bottom: calc(12 * var(--tsc-u)); }
.tsc-check { position: relative; display: block; padding: calc(4 * var(--tsc-u)) 0 calc(4 * var(--tsc-u)) calc(24 * var(--tsc-u)); font-weight: 600; }
.tsc-check::before { content: ""; position: absolute; left: calc(2 * var(--tsc-u)); top: .75em; width: calc(10 * var(--tsc-u)); height: calc(5 * var(--tsc-u)); border-left: calc(1.5 * var(--tsc-u)) solid var(--tsc-accent); border-bottom: calc(1.5 * var(--tsc-u)) solid var(--tsc-accent); transform: rotate(-45deg); }
/* ダウンタイム：ラベル付きリスト（表の罫線をなくす） */
.tsc-labeled-list, .tsc-labeled-list tbody { display: block; border: 0; }
.tsc-labeled-list tr { display: flex; gap: calc(16 * var(--tsc-u)); padding: calc(4 * var(--tsc-u)) 0; }
.tsc-labeled-list th, .tsc-labeled-list td { border: 0; padding: 0; background: none; text-align: left; font-weight: 600; }
.tsc-labeled-list th { flex: none; width: 6.5em; color: var(--tsc-accent-dark); }
.tsc-labeled-list th::before { content: "・"; }
@media screen and (max-width: 480px) {
  .tsc-causes__table tr { grid-template-columns: minmax(0, 1fr) 42%; }
  .tsc-benefit-split { grid-template-columns: minmax(0, 1fr); }
  .tsc-benefit-split > .tsc-figure { grid-column: 1; grid-row: auto; }
  .tsc-benefit-split__list { grid-row: auto; }
}
/* 出典・補足は小さく（9/28打ち合わせ「追加したものは下に小さく」） */
.tsc-cite { display: block; margin-top: calc(4 * var(--tsc-u)); font-size: calc(11 * var(--tsc-u)); line-height: 1.6; color: #8c8579; }

/* ---------- 小見出しの上の余白（2026-10）----------
   小見出しから始まるセクションは、直前のセクション（写真・表など）と間が空かずに詰まって見えていた。 */
.tsc-sec > .tsc-subheading:first-child { margin-top: calc(56 * var(--tsc-u)); }

/* 「〜すると」＋短い箇条書き＋「〜につながります」の文章の流れ（2026-10）
   リード文の下と箇条書きの行間が広すぎて、1つの文として読めなかったので詰める */
.tsc-ng__lead:has(+ .tsc-ng__list--plain) { margin-bottom: calc(16 * var(--tsc-u)); }
.tsc-ng__list--plain.tsc-checklist { gap: calc(4 * var(--tsc-u)); }
.tsc-ng__list--plain.tsc-checklist li { padding-top: calc(2 * var(--tsc-u)); padding-bottom: calc(2 * var(--tsc-u)); border: 0; }
.tsc-ng__list--plain + .tsc-body { margin-top: calc(16 * var(--tsc-u)); }
.tsc-ng__list.tsc-checklist li::before { content: ""; top: .85em; }

/* 小見出しだけのセクションの直後に、表・本文のセクションが続く場合の間隔（2026-10）
   例：目の下の脂肪取り「ハムラ法と脱脂術の比較」、ピコスポット「炎症後色素沈着を予防・軽減する〜」 */
.tsc-sec:has(> .tsc-subheading:last-child) + .tsc-sec { margin-top: calc(24 * var(--tsc-u)) !important; }
/* 料金の小見出しが2行になったときの行間 */
.tsc-subheading--price .tsc-subheading__text { line-height: 1.5; }

/* ---------- スマホで図・写真が小さくなりすぎる問題の改善（2026-10-29）----------
   PC用の幅（％指定）のままだと、スマホでは写真が画面の半分ほどになり、症例が見にくかった。
   スマホ幅ではコンテンツ幅いっぱい（左右の余白は残す）を基本に、縦長の写真だけ控えめにする。 */
@media screen and (max-width: 600px) {
  .tsc-figure--sp-wide { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .tsc-figure--sp-mid { width: 86% !important; margin-left: 7% !important; margin-right: 7% !important; }
  .tsc-figure--sp-narrow { width: 62% !important; margin-left: 19% !important; margin-right: 19% !important; }
  .tsc-figure--sp-wide img, .tsc-figure--sp-mid img, .tsc-figure--sp-narrow img { width: 100%; height: auto; }
  /* 経過写真（CO2フラクショナルなど）：2枚組はコンテンツ幅いっぱい、1枚は2枚組の写真1枚分の大きさに */
  .tsc-timeline__figrow--pair, .tsc-timeline__figrow--single { width: 100% !important; max-width: 100% !important; }
  .tsc-timeline__figrow--pair img { width: 100%; height: auto; }
  .tsc-timeline__figrow--single img { width: 48%; height: auto; }
}

/* ===== 症例カード（管理画面の症例データから出力する型）2026-10 =====================
   今の施術ページの見た目（写真2枚＋帯＋矢印）をHTML/CSSで再現する。
   列の幅・縦横比・帯の高さは、ページごとの元のデザインに合わせて style の変数で渡す。 */
.tsc-casecard { display: contents; }
.tsc-casecard .tsc-caselabel { text-align: left; }
.tsc-casecard__photos {
  display: grid; grid-template-columns: var(--pl) var(--lw) var(--gap) var(--rw) var(--pr);
  aspect-ratio: var(--ar); container-type: inline-size; align-items: stretch;
}
.tsc-casecard__photo { position: relative; margin: 0; overflow: hidden; min-width: 0; }
.tsc-casecard__photo--before { grid-column: 2; }
.tsc-casecard__photo--after { grid-column: 4; }
.tsc-casecard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tsc-casecard__arrow { grid-column: 3; grid-row: 1; align-self: center; justify-self: center;
  width: calc(var(--aw) * 1cqw); height: calc(var(--ah) * 1cqw); background: #b1967b; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* 下の帯（BEFORE=濃いグレー／AFTER=茶） */
.tsc-casecard__tag {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  height: calc(var(--tagh) * 1cqw); padding: 0 calc(var(--tagh) * 0.9cqw); min-width: calc(var(--tagh) * 4.3cqw);
  background: #333; color: #fff; font-family: var(--tsc-serif-en), var(--tsc-mincho);
  font-size: calc(var(--tagh) * 0.6cqw); letter-spacing: .06em; line-height: 1; white-space: nowrap;
}
.tsc-casecard__tag--after { background: #98774f; }
/* 上の帯（目元・ヒアルロン酸など「施術前／1ヶ月後」） */
.tsc-casecard__tag--top { top: 0; bottom: auto; background: #98774f; font-family: var(--tsc-mincho); letter-spacing: .08em;
  font-size: calc(var(--tagh) * 0.7cqw); padding: 0 calc(var(--tagh) * 0.32cqw); min-width: 0; border-bottom-right-radius: calc(var(--tagh) * 0.12cqw); }
.tsc-casecard__combo {
  display: inline-block; margin-left: calc(8 * var(--tsc-u)); padding: 0 calc(6 * var(--tsc-u));
  border: 1px solid var(--tsc-accent); color: var(--tsc-accent); font-size: calc(12 * var(--tsc-u)); line-height: 1.6; vertical-align: .1em; white-space: nowrap;
}

/* 症例の差し込み口（管理画面の症例が0件のときは表示しない） */
.tsc-cases[hidden], .tsc-cases-slot[hidden] { display: none !important; }

/* ===== 毛穴のお悩み（/service/menu/pores/）専用 2026-10 ==========================
   色・書体は施術ページの変数にそろえる（Figmaの旧ゴールドは使わない）。
   4つのタブは1ページ内の見出しへのリンク。各パートの先頭に置き、今いるパートを強調する。 */
.tsc-pores-part { scroll-margin-top: var(--pcHeaderHeight, 100px); }
.tsc-pores-part + .tsc-pores-part { margin-top: calc(80 * var(--tsc-u)); }
.tsc-pores-tabs { margin: calc(40 * var(--tsc-u)) 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tsc-pores-tabs__list { display: flex; margin: 0; padding: 0; list-style: none; min-width: 100%; }
.tsc-pores-tabs__list li { flex: 1 0 auto; }
.tsc-pores-tabs__link {
  display: flex; align-items: center; justify-content: center; height: calc(52 * var(--tsc-u)); padding: 0 calc(16 * var(--tsc-u));
  background: var(--tsc-bg-sub); color: var(--tsc-text); font-family: var(--tsc-mincho); font-size: calc(15 * var(--tsc-u));
  letter-spacing: .06em; white-space: nowrap; text-decoration: none; border-right: 1px solid #fff;
}
.tsc-pores-tabs__link.is-current { background: var(--tsc-text); color: #fff; }
.tsc-pores-part__title {
  margin: calc(56 * var(--tsc-u)) 0 0; text-align: center; font-family: var(--tsc-mincho); font-weight: 500;
  font-size: calc(28 * var(--tsc-u)); letter-spacing: .12em; color: var(--tsc-text);
}
/* 図の上の小さな見出し（例：正常なお肌） */
.tsc-pores-figlabel {
  display: inline-block; margin: calc(32 * var(--tsc-u)) 0 0; padding-bottom: calc(4 * var(--tsc-u));
  border-bottom: 1px solid var(--tsc-accent); font-size: calc(16 * var(--tsc-u)); letter-spacing: .04em; color: var(--tsc-text);
}
.tsc-pores-figlabel + .tsc-figure { margin-top: calc(12 * var(--tsc-u)); }
/* 5つの毛穴の種類 */
.tsc-pores-type + .tsc-pores-type { margin-top: calc(64 * var(--tsc-u)); }
.tsc-pores-type__title {
  display: flex; align-items: center; gap: calc(14 * var(--tsc-u)); margin: 0;
  font-family: var(--tsc-mincho); font-weight: 500; font-size: calc(22 * var(--tsc-u)); letter-spacing: .08em; color: var(--tsc-text);
}
.tsc-pores-type__num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: calc(40 * var(--tsc-u)); height: calc(40 * var(--tsc-u)); border-radius: 50%;
  background: var(--tsc-accent); color: #fff; font-family: var(--tsc-serif-en); font-size: calc(17 * var(--tsc-u));
}
.tsc-pores-type__row { display: grid; grid-template-columns: 48.4% 1fr; gap: calc(24 * var(--tsc-u)); align-items: start; margin-top: calc(24 * var(--tsc-u)); }
.tsc-pores-type__photo { display: block; width: 100%; height: auto; }
.tsc-pores-type__text { margin: 0; font-size: calc(18 * var(--tsc-u)); line-height: 2; letter-spacing: .04em; text-align: left; }
/* ダッシュ付きの小見出し（例：—— 体質的に皮脂が過剰） */
.tsc-pores-dash {
  position: relative; margin: calc(64 * var(--tsc-u)) 0 0; padding-left: calc(58 * var(--tsc-u));
  font-family: var(--tsc-mincho); font-weight: 500; font-size: calc(21 * var(--tsc-u)); line-height: 1.6; letter-spacing: .06em; color: var(--tsc-text);
}
.tsc-pores-dash::before { content: ""; position: absolute; left: 0; top: .8em; width: calc(44 * var(--tsc-u)); height: 1px; background: var(--tsc-accent); }
.tsc-pores-dash + .tsc-figure { margin-top: calc(16 * var(--tsc-u)); }
/* 症例ラベル（例：つまり毛穴の症例） */
.tsc-pores-tag { display: flex; align-items: center; margin: calc(40 * var(--tsc-u)) 0 0; }
.tsc-pores-tag::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--tsc-accent); }
.tsc-pores-tag__text {
  display: inline-block; padding: calc(6 * var(--tsc-u)) calc(16 * var(--tsc-u)); background: var(--tsc-primary-light); color: #fff;
  font-family: var(--tsc-mincho); font-size: calc(17 * var(--tsc-u)); letter-spacing: .06em;
}
.tsc-pores-tag + .tsc-figure { margin-top: calc(16 * var(--tsc-u)); }
/* 治療の表（クリニック｜施術名） */
.tsc-pores-cure { margin-top: calc(32 * var(--tsc-u)); }
.tsc-pores-cure + .tsc-pores-cure { margin-top: calc(24 * var(--tsc-u)); }
.tsc-pores-cure__title {
  display: flex; align-items: center; gap: calc(8 * var(--tsc-u)); margin: 0 0 calc(10 * var(--tsc-u));
  font-family: var(--tsc-mincho); font-weight: 600; font-size: calc(18 * var(--tsc-u)); letter-spacing: .06em; color: var(--tsc-text);
}
.tsc-pores-cure__title::before { content: ""; width: calc(10 * var(--tsc-u)); height: calc(10 * var(--tsc-u)); border-radius: 50%; background: var(--tsc-accent); }
.tsc-pores-cure__table { width: 100%; border-collapse: collapse; border: 1px solid var(--tsc-border); }
.tsc-pores-cure__table th {
  width: 28%; padding: calc(16 * var(--tsc-u)); background: var(--tsc-bg-sub); border-bottom: 1px solid var(--tsc-border);
  font-weight: 600; font-size: calc(16 * var(--tsc-u)); text-align: center; vertical-align: middle; color: var(--tsc-text);
}
.tsc-pores-cure__table td { padding: calc(12 * var(--tsc-u)) calc(20 * var(--tsc-u)); border-bottom: 1px solid var(--tsc-border); vertical-align: middle; }
.tsc-pores-cure__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(6 * var(--tsc-u)); }
.tsc-pores-cure__links a {
  position: relative; padding-right: calc(18 * var(--tsc-u)); font-size: calc(16 * var(--tsc-u)); letter-spacing: .04em;
  color: var(--tsc-text); text-decoration: underline; text-decoration-color: var(--tsc-accent); text-underline-offset: .2em;
}
.tsc-pores-cure__links a::after {
  content: ""; position: absolute; right: 0; top: 50%; width: calc(6 * var(--tsc-u)); height: calc(6 * var(--tsc-u));
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .tsc-pores-tabs { overflow: visible; }
  .tsc-pores-tabs__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #fff; }
  .tsc-pores-tabs__link { font-size: 13px; height: 44px; padding: 0 8px; border-right: 0; }
  .tsc-pores-part__title { font-size: 22px; margin-top: 40px; }
  .tsc-pores-type__title { font-size: 18px; }
  .tsc-pores-type__num { width: 32px; height: 32px; font-size: 14px; }
  .tsc-pores-type__row { gap: 14px; }
  .tsc-pores-type__text { font-size: 14px; }
  .tsc-pores-dash { font-size: 17px; padding-left: 44px; }
  .tsc-pores-dash::before { width: 32px; }
  .tsc-pores-tag__text { font-size: 14px; }
  .tsc-pores-cure__title { font-size: 15px; }
  .tsc-pores-cure__table th, .tsc-pores-cure__links a { font-size: 14px; }
}
/* PC・タブレットでは、図解内の文字が本文より大きくなりすぎないよう、図の幅を抑えて中央に置く */
@media screen and (min-width: 768px) {
  body.pores .tsc-figure { max-width: calc(560 * var(--tsc-u)); margin-left: auto; margin-right: auto; }
  /* 写真＋説明文の行は全幅にして、説明文の列を広く取る（改行が多くなりすぎないように） */
  body.pores .tsc-pores-type__row { grid-template-columns: 38% 1fr; gap: calc(28 * var(--tsc-u)); }
  body.pores .tsc-pores-figlabel { display: table; margin-left: calc((100% - 560 * var(--tsc-u)) / 2); }
}
@media screen and (max-width: 767px) {
  .tsc-pores-cure__table th { width: 30%; padding: 12px 6px; white-space: nowrap; }
  .tsc-pores-cure__table td { padding: 10px 12px; }
}
/* 毛穴のお悩み：タブで内容を切り替える（CSSのみ・JavaScriptなし）。
   タブはラジオボタン（.tsc-pores-radio、非表示）のラベル。選ばれたパートだけを表示する。
   ページ内リンク（#〜）を使わないので、サイト共通のスムーススクロール処理の影響を受けない。
   :has() に対応していない古いブラウザでは、切り替えずに4つとも縦に並べて表示する（内容が消えることはない）。
   4つの内容はすべてHTMLに入っているので、検索エンジンにはページ全体の内容が伝わる。 */
.tsc-pores-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tsc-pores-tabs__link { cursor: pointer; margin: 0; }
@supports selector(:has(*)) {
  .tsc-contents:has(> .tsc-pores-radio) > .tsc-pores-part { display: none; }
  .tsc-contents:has(> #pores-tab-basics:checked) > #basics,
  .tsc-contents:has(> #pores-tab-clog:checked) > #clog,
  .tsc-contents:has(> #pores-tab-open:checked) > #open,
  .tsc-contents:has(> #pores-tab-crater:checked) > #crater { display: block; }
  .tsc-pores-part + .tsc-pores-part { margin-top: 0; }
}


/* サイト共通CSS（snippet.css）の table { margin-bottom: 3rem } を打ち消す。
   施術ページの表は下余白を各部品で管理するため、料金表（.tsc-price__table は 40px を指定済み）以外は 0 にそろえる。
   ローカルの表示は変わらない（ローカルには snippet.css がないため）。 */
.tsc-spec:not(.tsc-price__table),
.tsc-comparison__table,
.tsc-solutions__table,
.tsc-causes__table,
.tsc-deflist,
.tsc-pores-cure__table { margin-bottom: 0; }

/* 右側の固定ボタン（#side_navigation）は、タブレット・PC（813px以上）の施術ページ・お悩みページでは表示しない。
   カウンセリングでiPadを使うときに本文の邪魔になるため（2026-10-30）。
   この幅ではヘッダーに WEB予約・LINE予約・電話番号が出ているので、予約の導線は残る。
   スマホ（812px以下）の下部の固定バーはそのまま。 */
@media screen and (min-width: 813px) {
  body.tsc-page #side_navigation { display: none !important; }
}