@charset "UTF-8";

/* =====================================================================
   治療ページ 新スタンダード（C案 / AD指定 2026-07-26）
   ---------------------------------------------------------------------
   出典: docs/design-system/harmonize-preview/index.html の C案
         （`[data-variant="c"]` ブロック）
   目的: 現行治療ページの「各要素が大きすぎる／野暮ったい」を是正する
         調整案を、本番の実クラス名へ写像した上書きレイヤー。

   適用方針:
   - 既存ページの CSS は一切書き換えない。本ファイルを **最後に読み込む**
     ページだけに効く追加レイヤー（オプトイン）。
   - 第一適用ページ = /operation/tarumi/xerf/
   - 横展開する場合は各ページの head.php でこの1行を最後に足すだけ。

   C案の骨子:
   - 本文 15px / 行間 2
   - セクション見出し 28px(medium) / グループ見出し 24px(bold)
   - eyebrow・gold キャッチ 20px(bold) / Q&A 見出し 18px(medium)
   - gold 罫線は細線 1px
   - Q&A は角丸なし。アンカー／プラン／その他治療ボタンはピル形(40px)、
     予約ボタンはピル形(30px)
   - beige #EFE8D8・gold #BBA171 の面は現状維持
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. トークン上書き
   ページ側 style.css の :root を後勝ちで上書きする。
   --font-size20 / --lineHeight は本文系の多くが参照しているため、
   ここを変えるだけで本文スケールが一括で C案に寄る。
   --------------------------------------------------------------------- */
:root {
  --gcstd-fs-body: 15px;
  --gcstd-fs-btn: 16px;
  --gcstd-fs-qa-head: 18px;
  --gcstd-fs-eyebrow: 20px;
  --gcstd-fs-eyebrow-sm: 16px;
  --gcstd-fs-subhead: 24px;
  --gcstd-fs-head: 24px;
  --gcstd-fs-price: 28px;
  --gcstd-lh-body: 2;
  --gcstd-radius-pill: 40px;
  --gcstd-radius-pill-sm: 30px;
  --gcstd-gold: #bba171;
  --gcstd-beige: #efe8d8;

  /* 既存変数の再定義（本文スケールの一括是正） */
  --font-size20: var(--gcstd-fs-body);
  --lineHeight: var(--gcstd-lh-body);
  --h3-font: var(--gcstd-fs-head);
  --gold-font: var(--gcstd-fs-eyebrow);
  --p-font: var(--gcstd-fs-body);
}

/* ---------------------------------------------------------------------
   1. LEAD（リードブロック）
   C案: span 18 / strong 28(bold・lh1.7) / 本文 15 /
        アンカーは beige・gold 面を維持したままピル形 40px・16px
   --------------------------------------------------------------------- */
.leadTitle,
.leadTitle span {
  font-size: var(--gcstd-fs-eyebrow);
  line-height: 1.8;
  color: #333;
}

.leadTitle strong {
  font-size: var(--gcstd-fs-head);
  font-weight: 700;
  line-height: 1.7;
  color: #333;
}

.leadText {
  font-size: var(--gcstd-fs-body);
  line-height: var(--gcstd-lh-body);
}

.leadAnchorLink,
.leadAnchorLink_gold {
  padding: 20px 60px 20px 45px;
  border-radius: var(--gcstd-radius-pill);
  font-size: var(--gcstd-fs-btn);
  font-weight: 400;
  line-height: var(--gcstd-lh-body);
}

/* ---------------------------------------------------------------------
   2. 見出し
   C案: セクション見出し 28px(medium)・中央。
        gold 罫の小見出しは 24px(bold) ＋ 罫線を細線 1px へ。
   --------------------------------------------------------------------- */
h2.h3title,
.h3title,
.h3_loopbox,
.featureh2,
.greyContent_text,
.greyBox h2,
.caseBody h2,
.picUpPrice h2 {
  font-size: var(--gcstd-fs-head);
  font-weight: 700;
  color: #333;
}

.h3GreyBox {
  font-size: var(--gcstd-fs-head) !important;
  font-weight: 700;
}

/* セクション見出しの上に置く小冠（2段見出しの1段目）。
   「ザーフ(XERF)は／こんな男性におすすめ」のように、
   主語側を小さく分けて主見出しを立たせる。 */
.secEyebrow {
  margin: 0 0 4px;
  font-size: var(--gcstd-fs-eyebrow-sm);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #333;
}

/* .featureh2 は padding-top を持つため、小冠が前に付く場合は小冠側へ移す */
.secEyebrow--top {
  padding-top: 100px;
}

.secEyebrow + .featureh2 {
  padding-top: 0;
}

/* gold 細線の小見出し（選ばれる理由・お悩み別グループ 等） */
.featureh3 {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gcstd-gold);
  font-size: var(--gcstd-fs-subhead);
  font-weight: 700;
}

/* 料金テーブルのプラン見出し */
.priceComponent h3,
.priceContent_headline {
  font-size: var(--gcstd-fs-subhead);
  font-weight: 700;
}

/* eyebrow（「ゴリラクリニックの」「お悩み別」等の小冠） */
.gorillaText {
  font-size: var(--gcstd-fs-eyebrow);
  font-weight: 700;
}

/* STEP 見出し（治療の流れ） */
.boxTop,
.boxTopInner {
  font-size: var(--gcstd-fs-subhead);
}

/* gold キャッチ（詳細情報・ダウンタイムの見出し） */
.tableText,
.tableText h2 {
  font-size: var(--gcstd-fs-eyebrow);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   3. 本文
   C案: 15px / 行間 2
   --------------------------------------------------------------------- */
.feature p,
.rightBox p,
.rightBoxInner p,
.componentPlan,
.h3titlePlan,
.greyBox p,
.greyBoxP,
.greyBoxP p,
.priceComponent p,
.hospital_description,
.hospital_txt p,
.compare_table th,
.compare_table td,
.note_downtime tr,
.note_downtime th,
.note_downtime td {
  font-size: var(--gcstd-fs-body);
  line-height: var(--gcstd-lh-body);
}

/* 「こんな男性におすすめ」の項目（既存の一律 bold を medium に） */
.innerOut p {
  font-weight: 400;
}

.greyBoxP p {
  font-weight: 500;
  line-height: 2;
}

/* ---------------------------------------------------------------------
   3.5 症例（CASE）
   --------------------------------------------------------------------- */
/* メタ行だけ左右 20px 内側に入っていて Before/After の画像と揃わない */
.caseListItem__Meta {
  padding-inline: 0;
}

/* 黒 #000 のままだった治療タグを本文色に揃える */
.caseListItem__Meta .caseListItem__Flow li {
  color: #333;
}

/* ---------------------------------------------------------------------
   4. ボタン類
   C案: アンカー／プラン／その他治療は gold 面のままピル形 40px・16px。
        予約ボタンはピル形 30px・15px。
   --------------------------------------------------------------------- */
.planSection {
  position: relative;
  padding: 20px 60px 20px 45px;
  border-radius: var(--gcstd-radius-pill);
  font-size: var(--gcstd-fs-btn);
  font-weight: 400;
  line-height: var(--gcstd-lh-body);
}

/* 下向きシェブロン。gold 面に載るので白版アイコンを使う
   （anchor_arrow.svg は gold のため gold 面では見えない）。
   画像の矢印を自前で持つ場合は重ねない。 */
.planSection::after {
  content: "";
  position: absolute;
  inset: 0 40px 0 auto;
  margin: auto;
  width: 20px;
  height: 13.37px;
  background: url("/operation/annex_component/img/icons/anchor_arrow_wh.svg") center / cover no-repeat;
}

.planSection:has(picture)::after,
.planSection:has(img)::after {
  content: none;
}

.planSection span {
  font-size: 13px;
}

.eachSection {
  position: relative;
  height: auto;
  padding: 20px 60px 20px 45px;
  border-radius: var(--gcstd-radius-pill);
  font-size: var(--gcstd-fs-btn);
  font-weight: 400;
  line-height: var(--gcstd-lh-body);
}

/* その他の治療は「次のページへ進む」導線なので右向きシェブロン */
.eachSection::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%) rotate(-90deg);
  width: 20px;
  height: 13.37px;
  background: url("/operation/annex_component/img/icons/anchor_arrow_wh.svg") center / cover no-repeat;
}

.priceCtaButton {
  border-radius: var(--gcstd-radius-pill-sm);
  font-size: var(--gcstd-fs-body);
}

/* 料金CTAはテキストのみ（テーマ既定のシェブロンを出さない） */
.priceCtaButton::after {
  content: none;
}

/* 料金の金額は本文から独立して強調する */
.priceContent__Table.noLabel .tabledata .number {
  font-size: var(--gcstd-fs-price);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   4.5 比較表
   ヘッダは「自院の治療＝gold / 比較対象＝黒」で対比させ、
   行見出しは無彩色の面、罫線は gold の細線に統一する。
   --------------------------------------------------------------------- */
.compare_table th,
.compare_table td {
  border: 1px solid var(--gcstd-gold);
}

.compare_head th {
  background: #fff;
  color: #333;
  border: 1px solid var(--gcstd-gold);
}

.compare_head th:first-of-type {
  background: transparent;
  border: none;
}

.compare_head th:nth-of-type(2) {
  background: var(--gcstd-gold);
  border-color: var(--gcstd-gold);
  color: #fff;
}

.compare_head th:nth-of-type(3),
.compare_head th:last-of-type {
  background: #333;
  border-color: #333;
  color: #fff;
}

.compare_body_name {
  background: #d6d6d6;
  color: #333;
}

/* はみ出し防止（元は width:100vw で親のflex縮小に依存していた） */
.compare_table {
  width: 100%;
}

/* 自院（左＝ザーフ）の列を強調する */
.compare_body td:nth-child(2) {
  font-weight: 700;
}

/* 「※個人差あり」などの注記は小さく・通常太さ */
.compare_table small {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   4.6 料金テーブル
   最終行のセル罫線とテーブル外枠が重なり、下辺だけ2pxに見えるのを解消
   --------------------------------------------------------------------- */
.priceContent__Table.w100 .tablerow:last-child .tablehead,
.priceContent__Table.w100 .tablerow:last-child .tabledata {
  border-bottom: none;
}

/* 対象院ボタン（青）は色を維持し、サイズのみ是正 */
.hospitalBtn {
  font-size: var(--gcstd-fs-qa-head);
  padding: 16px 24px;
}

/* 対象範囲キャプション */
.faceImg_text {
  line-height: 1.6;
}

/* 「こんな男性におすすめ」リスト
   本文を 15px へ落とすと、既存の 40%/55% 交互幅では
   末尾1文字だけが折り返す（泣き別れ）ため等幅2カラムへ是正する。 */
.greyBoxP {
  max-width: 880px;
  margin: 40px auto 0;
  gap: 0 4%;
}

.greyBoxP p,
.greyBoxP p:nth-child(2n + 1),
.greyBoxP p:nth-child(2n) {
  width: 48%;
}

@media screen and (max-width: 767px) {
  .greyBoxP {
    max-width: none;
    margin: 30px 0 0;
  }

  .greyBoxP p,
  .greyBoxP p:nth-child(2n + 1),
  .greyBoxP p:nth-child(2n) {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   5. Q&A アコーディオン
   C案: 見出し 18px(medium)・角丸なし・plus/minus 30px・Q/A アイコン 20px・
        回答 15px
   --------------------------------------------------------------------- */
.accordion_head {
  border-radius: 0;
}

.container-s {
  border-radius: 0;
}

.faq_head {
  font-size: var(--gcstd-fs-qa-head) !important;
  font-weight: 500;
}

.accordion_head::after {
  width: 30px;
  height: 30px;
}

.faq_headImg {
  width: 20px;
  height: auto;
}

.a_box {
  font-size: var(--gcstd-fs-body);
  line-height: var(--gcstd-lh-body);
}

/* Q / A のマークは画像ではなく DIN 2014 の文字で出す。
   画像だと縮小時にベースラインが合わず、SPで見切れるため。 */
.faq_headMark,
.a_box::before {
  position: absolute;
  left: 33px;
  width: auto;
  height: auto;
  background: none;
  font-family: "din-2014", "DIN 2014", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.faq_headMark {
  top: 50%;
  transform: translateY(-50%);
  color: #333;
}

.a_box::before {
  content: "A";
  top: 42px;
  color: var(--gcstd-gold);
}

/* ---------------------------------------------------------------------
   6. 症例（CASE）ブロック
   本文スケールに合わせて見出し・タグを是正する。
   --------------------------------------------------------------------- */
.caseListItem__Meta .caseListItem__Flow li {
  font-size: var(--gcstd-fs-btn);
}

/* ---------------------------------------------------------------------
   6.5 PC（768px〜）の微調整（AD指定 2026-08-06）
   SP に漏らさないため、min-width で明示的に囲う。
   --------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  /* --- リード -------------------------------------------------------- */
  .leadTitle strong {
    font-size: 22px;
  }

  .leadAnchorLink,
  .leadAnchorLink_gold {
    padding: 20px 60px 20px 30px;
  }

  .leadAnchorLink::after,
  .leadAnchorLink_gold::after {
    inset: 0 30px 0 auto;
    width: 18px;
    height: 12px;
  }

  /* 「解決できるお悩み」のボタンが1つだけのときは中央に置く
     （space-between だと左に寄ってしまう） */
  .planBox:has(> .ancker:only-child) {
    justify-content: center;
  }

  /* --- 本文 ----------------------------------------------------------- */
  /* 「ザーフ(XERF)とは」の本文（他の .feature p には効かせない） */
  .about .feature p {
    font-size: 14px;
    line-height: 2;
  }

  /* --- 図版 ----------------------------------------------------------- */
  /* 効果・仕組み図／ザーフとハイフの図と、直後の本文の間の余白 */
  .effect_picture {
    margin-bottom: 30px;
  }

  /* --- 小見出し ------------------------------------------------------- */
  .featureh3 {
    margin-top: 60px;
    font-size: 20px;
  }

  /* --- 料金 ----------------------------------------------------------- */
  .priceCtaButton.gold {
    background: var(--gcstd-gold);
    color: #fff;
  }

  /* --- 対象院・詳細情報 ------------------------------------------------ */
  .greyContent_text {
    margin-bottom: 20px;
  }

  /* 値は中央寄せ（.hospital_txt の text-align:center）を継がず左揃えに */
  .note_downtime td {
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
   7. SP（〜767px）
   SP は既存が calc(100vw / var(--viewport) * N) の可変指定で、
   実寸はすでに 14〜16px 相当のため本文サイズは据え置く。
   角丸だけ C案のピル形へ揃える。
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* SP の本文スケール。--gcstd-fs-body を参照している箇所へ一括で効く */
  :root {
    --gcstd-fs-body: 14px;
  }

  .leadAnchorLink,
  .leadAnchorLink_gold,
  .planSection,
  .eachSection {
    border-radius: var(--gcstd-radius-pill);
  }

  /* --- 見出し ------------------------------------------------------- */
  h2.h3title,
  .h3title,
  .h3_loopbox,
  .featureh2,
  .greyContent_text,
  .greyBox h2,
  .caseBody h2,
  .picUpPrice h2 {
    font-size: 16px !important;
    font-weight: 700;
  }

  .secEyebrow {
    font-size: 12px;
  }

  .secEyebrow--top {
    padding-top: 40px;
  }

  .featureh2 {
    padding-top: 50px;
    margin-bottom: 15px;
  }

  .featureh3 {
    margin-top: 40px;
    padding-bottom: 12px;
    font-size: 14px;
  }

  .greyContent_text {
    margin-bottom: 10px;
  }

  .priceComponent h3,
  .priceContent_headline {
    font-size: 15px;
  }

  .boxTop,
  .boxTopInner {
    font-size: 15px;
  }

  /* --- リード -------------------------------------------------------- */
  .leadTitle,
  .leadTitle span {
    font-size: 16px;
    line-height: 1.8;
  }

  .leadTitle strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7;
  }

  .leadText {
    font-size: 14px;
  }

  /* --- 症例（CASE） --------------------------------------------------- */
  .caseListItem__Images {
    margin-top: 25px;
  }

  .caseListItem__ImagesItem p {
    font-size: 18px;
  }

  .caseListItem__Details table th,
  .caseListItem__Details table td {
    font-size: 11px;
    line-height: 1.8;
  }

  /* --- こんな男性におすすめ -------------------------------------------- */
  .innerOut {
    padding: 30px 0 20px;
  }

  .greyBoxP {
    max-width: none;
    margin: 30px 20px 0;
  }

  /* --- セクションの左右余白 -------------------------------------------- */
  /* .mainContents(20px) の中に .innerSP(20px) が入ると二重になり、
     セクションごとに内容幅が 350 / 310 とばらつく。20px に揃える。 */
  .mainContents .innerSP {
    padding-inline: 0;
  }

  /* LEAD の内側幅も同じ 350 に揃える（既定は 680/750vw = 354） */
  .leadInner {
    max-width: calc(100vw - 40px);
  }

  /* --- ボタン（共通仕様） ----------------------------------------------
     幅・高さ・文字サイズ・パディング・角丸・シェブロンの寸法はすべて共通。
     違うのは「配色」「テキストの揃え」「シェブロンの有無と向き」だけ。

       ボタン                         配色    揃え   シェブロン
       LEADアンカー                   beige   左     下向き（gold）
       しわ・たるみ・ほうれい線        gold    左     下向き（白）
       その他の治療5件                gold    左     右向き（白）
       ご予約・ご相談                 gold    中央   なし
       そのほかのよくある質問はこちら   blue    中央   右向き（白）
     -------------------------------------------------------------------- */
  .leadAnchorLink,
  .leadAnchorLink_gold,
  .planSection,
  .eachSection,
  .priceCtaButton,
  .paddingBottom130 .button .list-btn {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 60px;
    padding: 16px 60px 16px 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    border-radius: var(--gcstd-radius-pill);
  }

  /* テキスト左揃え */
  .leadAnchorLink,
  .leadAnchorLink_gold,
  .planSection,
  .eachSection {
    justify-content: flex-start;
  }

  /* テキスト中央揃え。左右パディングを対称にして中心をずらさない */
  .priceCtaButton,
  .paddingBottom130 .button .list-btn {
    justify-content: center;
    padding-inline: 60px;
  }

  /* シェブロン: 寸法・位置は共通。向きと色だけ変える */
  .leadAnchorLink::after,
  .leadAnchorLink_gold::after,
  .planSection::after,
  .eachSection::after,
  .paddingBottom130 .button .list-btn::after {
    content: "";
    position: absolute;
    inset: auto 30px auto auto;
    top: 50%;
    margin: 0;
    width: 16px;
    height: 11px;
    transform: translateY(-50%);
    background: url("/operation/annex_component/img/icons/anchor_arrow_wh.svg") center / contain no-repeat;
  }

  /* 右向き＝別ページへ遷移する導線 */
  .eachSection::after,
  .paddingBottom130 .button .list-btn::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  /* beige 面は gold のシェブロン */
  .leadAnchorLink::after {
    background-image: url("/operation/annex_component/img/icons/anchor_arrow.svg");
  }

  /* 既存の画像シェブロン（nextButton.svg）は使わず ::after に統一 */
  .paddingBottom130 .list-btn picture,
  .paddingBottom130 .list-btn .nextButton {
    display: none;
  }

  .paddingBottom130 .list-btn a {
    font-size: 14px;
    line-height: 1.6;
  }

  /* テーマ側の幅制限を解除（317px / 90% で固定されている） */
  .priceCtaButtonWrapper {
    max-width: none;
  }

  .paddingBottom130 .button .list-btn {
    width: 100% !important;
  }

  /* 詳細情報の白ボックスは他セクションと同じ左右余白に揃える */
  .note_downtime {
    margin-inline: 0;
  }

  /* --- 効果・仕組み図 -------------------------------------------------- */
  .effect_picture {
    margin-bottom: 20px;
  }

  /* --- 比較表 --------------------------------------------------------- */
  /* 直前の本文と表がくっつくため間を空ける */
  .feature:has(> .compare_table) {
    margin-top: 25px;
  }

  /* 改行位置は各セルの <br class="displayNonePc"> で明示しているので、
     列幅は固定にして「ザーフ」「ハイフ」を同じ幅で対置させる。 */
  .compare_table {
    table-layout: fixed;
  }

  .compare_table th,
  .compare_table td {
    padding: 0.8em 0.3em;
    font-size: 12px;
    line-height: 1.6;
  }

  .compare_body_name,
  .compare_head th:first-of-type {
    width: 30%;
  }

  .compare_body_text,
  .compare_head th:nth-of-type(2),
  .compare_head th:nth-of-type(3) {
    width: 35%;
  }

  /* --- 料金 ----------------------------------------------------------- */
  .priceNote {
    font-size: 12px;
    text-align: center;
  }

  .priceContent__Table.noLabel .tabledata .number {
    font-size: 20px;
    font-weight: 700;
  }

  .priceCtaButton.gold {
    background: var(--gcstd-gold);
    color: #fff;
  }

  /* --- 対象院・詳細情報 ------------------------------------------------ */
  /* 対象院ボタンは元のSPサイズに戻す（PC側の是正だけを残す） */
  .hospitalBtn {
    font-size: calc(100vw / var(--viewport) * 24);
    padding: calc(100vw / var(--viewport) * 18) 0;
  }

  .hospital_txt {
    margin-top: 0;
    padding: 0;
  }

  /* 「東銀座院」と「詳細情報・ダウンタイム」の間を 50px にする。
     対象院と詳細情報は隣り合う .featureParent。
     この 50px は **padding** で作ること。note_downtime の margin-top で作ると
     詳細情報側の padding-top が 0 のときにマージンが親から抜け出し
     （margin collapsing）、東銀座院の直下でグレー背景が切れる。 */
  .featureParent:has(+ .featureParent) {
    padding-bottom: 0;
  }

  .featureParent + .featureParent {
    padding-top: 50px;
  }

  .note_downtime {
    margin-top: 0;
  }

  .tableText,
  .tableText h2 {
    font-size: 13px;
  }

  .tableTextNotes {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 10px;
  }

  .note_downtime td,
  .note_downtime th,
  .note_downtime tr {
    font-size: 11px;
    line-height: 1.6;
  }

  /* --- Q&A ------------------------------------------------------------ */
  .faq_head {
    font-size: 14px !important;
    font-weight: 500;
  }

  .a_box {
    font-size: 13px;
  }

  .accordion_head::after {
    width: 18px;
    height: 18px;
  }

  .faq_headMark,
  .a_box::before {
    left: 18px;
    font-size: 16px;
  }

  .a_box::before {
    top: 20px;
  }
}