@charset "UTF-8";
/* ================================================================
   メニューUX改修（2026-06）スタイル
   読み込み：parts/head.php で main.css の後に <link>
   ----------------------------------------------------------------
   デザイントークン（HANDOFF 12章）
     main      #6db6d8 / main-dark #4f9cc0 / LINE #06C755
     ink       #333    / ink-sub   #777
     line      #e4e9ec / bg        #f3f8fa / white #fff
     brand-radius（非対称）PC: 0 20px 0 20px ／ SP: 0 8px 0 8px
   ----------------------------------------------------------------
   構成
     1. メニュー内レイアウト（.hiro-gnav-inner）
     2. スマート検索（ボックス・チップ・結果）
     3. 治療メニュー 4カテゴリ アコーディオン
     4. 常設相談カード
     5. 追従フッターCTA（SP）
     6. ヘッダー料金一覧ピル（SP）
     7. PCのgnavスクロール対応
     8. PCメガメニュー（案C）
     8-2. PCメガ：施術リンクのグリッド高さ折りたたみ対策（クリーン版）
     9. フェーズ2：料金検索の結果カード（全プラン表示）
================================================================ */

/* ----------------------------------------------------------------
   1. メニュー内レイアウト
   PC＝白パネル（右50%）に1カラム右寄せ／SP＝写真背景に全幅
---------------------------------------------------------------- */
.hiro-gnav-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .hiro-gnav-inner {
    max-width: none;
    margin-left: 0;
    gap: 34px;
  }
  /* 旧レイアウト用の右寄せ＋315px空けを解除（検索が最上段に入るため） */
  .hiro-gnav-inner .list__gnav {
    align-self: stretch;
    padding-top: 0;
    width: 100%;
  }
  /* 相談カードが追従CTAに隠れないよう下余白を拡張（既存80px→150px） */
  .gnav__menu__col01 {
    padding-bottom: 150px;
  }
}

/* ----------------------------------------------------------------
   2. スマート検索
---------------------------------------------------------------- */
.hiro-search {
  width: 100%;
}
.hiro-search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1.4px solid #e4e9ec;
  border-radius: 0 12px 0 12px;
  padding: 12px 14px;
  cursor: text;
}
.hiro-search-box__icon {
  flex: none;
  color: #6db6d8;
}
.hiro-search-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px; /* iOSの自動ズーム防止のため16px未満にしない */
  color: #333;
  outline: none;
}
.hiro-search-input::placeholder {
  color: #999;
  font-size: 13px;
}
.hiro-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.hiro-search-label {
  margin: 14px 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #777;
}
.hiro-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hiro-search-chips > button {
  appearance: none;
  border: 1px solid #cfe3ee;
  background: #f3f8fa;
  color: #4f9cc0;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.hiro-search-chips > button:hover,
.hiro-search-chips > button:active {
  background: #6db6d8;
  border-color: #6db6d8;
  color: #fff;
}

/* 結果リスト */
.hiro-search-results {
  margin-top: 12px;
  max-height: 296px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hiro-search-results:empty {
  display: none;
}
.hiro-r-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 0 8px 0 8px;
  padding: 11px 13px;
  text-decoration: none;
  transition: border-color 0.25s;
}
.hiro-r-card + .hiro-r-card {
  margin-top: 7px;
}
.hiro-r-card:hover,
.hiro-r-card:active {
  border-color: #6db6d8;
  opacity: 1;
}
.hiro-r-nm {
  font-size: 13.5px;
  font-weight: 700;
  color: #333;
  line-height: 1.45;
}
.hiro-r-cat {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #4f9cc0;
  background: #eaf4f9;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.hiro-r-none {
  background: #fff;
  border: 1px dashed #cfe3ee;
  border-radius: 0 8px 0 8px;
  padding: 15px 14px;
  text-align: center;
}
.hiro-r-none > p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #777;
}
.hiro-r-none > button {
  appearance: none;
  border: 0;
  background: #6db6d8;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
}

/* SP：写真背景上は検索ブロックの可読性を上げる */
@media screen and (max-width: 767px) {
  .hiro-search-box {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(40, 70, 85, 0.18);
  }
  .hiro-search-label {
    color: rgba(255, 255, 255, 0.85);
  }
  .hiro-search-chips > button {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
  }
  .hiro-search-chips > button:hover,
  .hiro-search-chips > button:active {
    background: #fff;
    border-color: #fff;
    color: #4f9cc0;
  }
  .hiro-r-card,
  .hiro-r-none {
    border-color: rgba(255, 255, 255, 0.85);
  }
}

/* ----------------------------------------------------------------
   3. 治療メニュー 4カテゴリ アコーディオン
   外側の開閉（治療メニュー±）＝既存 .btn__dropDown／style.js のまま
   内側の開閉（カテゴリ±）＝ .hiro-cat-trigger ＋ CSS grid アニメ
---------------------------------------------------------------- */
/* 既存 style.js（slideToggle）の初期状態として閉じておく */
.list__gnav .drop__down > .hiro-cat-list {
  display: none;
  margin-top: 16px;
}
/* gnavi.css の詰めハック（margin-top:-24px!important）をカテゴリ行では中和 */
.list__gnav .drop__down > ul > li.hiro-cat {
  margin-top: 0 !important;
  line-height: 1.5;
}
.hiro-cat + .hiro-cat {
  margin-top: 2px !important;
}
.hiro-cat-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e4e9ec;
  padding: 13px 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #333;
  text-align: left;
  cursor: pointer;
}
.hiro-cat-trigger__icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}
.hiro-cat-trigger__icon::before,
.hiro-cat-trigger__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.6px;
  background: #6db6d8;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.hiro-cat-trigger__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.hiro-cat-trigger[aria-expanded="true"] .hiro-cat-trigger__icon::after {
  transform: translate(-50%, -50%) rotate(0deg); /* ＋ → − */
}
.hiro-cat-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.hiro-cat-body > ul {
  min-height: 0;
  overflow: hidden;
  margin: 0;
}
.hiro-cat-body.is-open {
  grid-template-rows: 1fr;
}
.hiro-cat-body > ul > li {
  margin: 0 !important;
  line-height: 1.5;
}
.hiro-cat-body > ul > li > a {
  display: block;
  padding: 9px 4px 9px 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #555;
  position: relative;
  transition: color 0.25s;
}
.hiro-cat-body > ul > li > a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 5px;
  height: 1.4px;
  background: #6db6d8;
  transform: translateY(-50%);
}
.hiro-cat-body > ul > li > a:hover,
.hiro-cat-body > ul > li > a:active {
  color: #4f9cc0;
  opacity: 1;
}
.hiro-cat-body > ul > li:last-child {
  padding-bottom: 8px;
}

/* SP：写真背景上は白文字系に反転 */
@media screen and (max-width: 767px) {
  .hiro-cat-trigger {
    border-bottom-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .hiro-cat-trigger__icon::before,
  .hiro-cat-trigger__icon::after {
    background: rgba(255, 255, 255, 0.9);
  }
  .hiro-cat-body > ul > li > a {
    color: rgba(255, 255, 255, 0.92);
  }
  .hiro-cat-body > ul > li > a::before {
    background: rgba(255, 255, 255, 0.7);
  }
  .hiro-cat-body > ul > li > a:hover,
  .hiro-cat-body > ul > li > a:active {
    color: #fff;
  }
}

/* ----------------------------------------------------------------
   4. 常設相談カード（お探しの施術が見つからない方へ）
---------------------------------------------------------------- */
.hiro-consult {
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 0 20px 0 20px;
  padding: 22px 20px;
  text-align: center;
}
.hiro-consult__title {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #333;
  line-height: 1.6;
}
.hiro-consult__text {
  margin: 0 0 15px;
  font-size: 12px;
  line-height: 1.8;
  color: #777;
}
.hiro-consult__btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hiro-consult__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  border-radius: 0 12px 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
}
.hiro-consult__btn.web {
  background: #6db6d8;
}
.hiro-consult__btn.line {
  background: #06c755;
}
@media screen and (max-width: 767px) {
  .hiro-consult {
    border-color: rgba(255, 255, 255, 0.85);
    border-radius: 0 8px 0 8px;
    box-shadow: 0 4px 16px rgba(40, 70, 85, 0.18);
  }
  .hiro-consult__btn {
    border-radius: 0 8px 0 8px;
  }
}

/* ----------------------------------------------------------------
   5. 追従フッターCTA（SP固定・全ページ共通）
   HANDOFF 10章。safe-area-inset を確保し本文が隠れない余白を付与
---------------------------------------------------------------- */
.hiro-fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  gap: 9px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fafcfd;
  border-top: 1px solid #e4e9ec;
  box-shadow: 0 -4px 12px rgba(60, 90, 105, 0.06);
}
.hiro-fixed-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-decoration: none;
}
.hiro-fixed-cta .web {
  background: #6db6d8;
}
.hiro-fixed-cta .line {
  background: #06c755;
}
@media (min-width: 769px) {
  .hiro-fixed-cta {
    display: none; /* SP専用。base.css の .sp（min-width:769pxで非表示）と同一基準に統一 */
  }
}
@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); /* 本文がCTAに隠れない余白（CTA表示域と完全一致させる） */
  }
}

/* ----------------------------------------------------------------
   6. ヘッダー料金一覧ピル（SP・旧WEB予約の位置）
   HANDOFF 11章。markup側で .sp を付与しSP専用表示
---------------------------------------------------------------- */
/* 既存 header.css の汎用 .header__col02__menu__box > a（特異度 0,1,1）が
   width:88px / height:20px / ::before・::after の縦仕切り線 / margin-right:16px を
   当ててくるため、a.hiro-price-pill（0,2,1）までスコープして確実に上書きする */
.header__col02__menu__box > a.hiro-price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;         /* 320px等の極小幅でロゴ側に縮小を担わせ、ピルは潰さない */
  width: auto;            /* 旧Web予約の固定幅(SP:88px)を解除 */
  height: auto;           /* 同 height:20px を解除 */
  position: static;
  border: 1.4px solid #6db6d8;
  color: #4f9cc0;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 5px 12px;
  margin-right: 12px;     /* SPの ≡ ボタンとの間隔 */
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.header__col02__menu__box > a.hiro-price-pill::before,
.header__col02__menu__box > a.hiro-price-pill::after {
  content: none; /* 旧Web予約テキストリンク用の縦仕切り線を無効化 */
}
.header__col02__menu__box > a.hiro-price-pill > span::after {
  content: none; /* 旧Web予約用の金色ドット装飾を無効化（span使用時の保険） */
}

/* ----------------------------------------------------------------
   7. PCのgnavスクロール対応（2026-06-12 レスポンシブ検証で追加）
   既存設計は「.gnav__menu__col01.active（治療メニュー展開時）のみ
   overflow:scroll」で、平常時はナビ項目が少なく height:100% に
   収まる前提だった。検索＋相談カードの追加で平常時でも縦超過し、
   下部（相談カード）が到達不能になりうるため、PCはスクロールの
   責務を親（.gnav__menu）へ移す。
   SP（≤767px）は既存 gnavi.css の .gnav__menu { overflow:scroll }
   が効いているため変更不要。
---------------------------------------------------------------- */
@media (min-width: 768px) {
  .gnav__menu {
    overflow-y: auto;
    overscroll-behavior: contain; /* メニュー内スクロールを背面ページへ伝播させない */
    scrollbar-width: none;        /* 既存col01と同じ意匠（バー非表示）を踏襲 */
  }
  .gnav__menu::-webkit-scrollbar {
    display: none;
  }
  .gnav__menu__col01 {
    height: auto;     /* 100%固定を解除し中身に追従（box-sizing:border-box指定済） */
    min-height: 100%; /* 中身が短い場合も従来どおり全高を確保 */
  }
}
/* ----------------------------------------------------------------
   8. PCメガメニュー（案C）2026-06-12
   対象：header.php の #treat-menu（li.drop__down.head 内）
   開閉：style.js が #treat-menu に display:flex/none をインライン付与。
   位置：position:fixed でヘッダー直下に固定（トリガー位置に依存せず、
         既存flexナビ行を押し広げない）。
   既存 .drop__down>ul（max-width:300px 等）/.drop__down.head>ul（padding:10px
   等）の打ち消しは #treat-menu のID特異度（0,1,0,0）で確実に上書きする。
   SP（≤767px）はメガを使わない（PCナビ自体が .list__pcnav.pc）。
---------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .header__col02__menu__box .drop__down.head {
    position: relative; /* アンカー（fixed運用のため必須ではないが明示） */
  }

  /* パネル本体（開いている時のみ表示＝display:flexはJSがインライン付与） */
  #treat-menu {
    position: fixed;
    top: 92px;                 /* 80pxヘッダー＋12px。PCはヘッダー高さ固定 */
    right: 4vw;
    left: auto;
    width: min(860px, 92vw);
    max-width: none;           /* 既存 .drop__down>ul max-width:300px を解除 */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;                 /* 既存 margin-top:30/45px を解除 */
    padding: 22px;             /* 既存 .drop__down.head>ul padding:10px を上書き */
    background: #fff;
    border-radius: 0 20px 0 20px; /* PCブランドradius */
    box-shadow: 0 18px 50px rgba(40, 70, 85, 0.16);
    flex-direction: column;    /* JSのdisplay:flexに対する縦並び指定 */
    gap: 18px;
    z-index: 60;               /* header(30)より前面・gnav(150)より背面 */
  }

  /* 単一の<li>ラッパ：既存 .drop__down>ul>li（font-size:20px/padding-left:45px）を中和 */
  .header__col02__menu__box .drop__down.head > ul > li.hiro-mega {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* ① 検索：結果は列の上にオーバーレイ（在フローだと列が押し下がるため） */
  .hiro-mega-search {
    position: relative;
    width: 100%;
  }
  .hiro-mega-search .hiro-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    margin-top: 0;
    max-height: 340px;
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 0 12px 0 12px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(40, 70, 85, 0.16);
    z-index: 5;
  }

  /* ② お悩みチップ（モバイルの .hiro-search-chips とは別物：列ハイライト用） */
  .hiro-mega-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }
  .hiro-mega-chip {
    appearance: none;
    -webkit-appearance: none;
    border: 1.4px solid #cfe3ee;
    background: #f3f8fa;
    color: #4f9cc0;
    border-radius: 999px;
    padding: 7px 15px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .hiro-mega-chip:hover {
    background: #e3f0f7;
  }
  .hiro-mega-chip.is-active {
    background: #6db6d8;
    border-color: #6db6d8;
    color: #fff;
  }

  /* ③ 4カテゴリ列 */
  .hiro-mega-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 22px;
    border-top: 1px solid #eef3f5;
    padding-top: 18px;
  }
  /* 横幅が狭いPC（〜1080px）では2列に畳む */
  @media screen and (max-width: 1080px) {
    .hiro-mega-cols {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /* カテゴリ見出し：左アクセントバー＋下線で区切りを明確化 */
  .hiro-mega-col__ttl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 700;
    color: #4f9cc0;
    letter-spacing: 0.04em;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #e4e9ec;
  }
  .hiro-mega-col__ttl::before {
    content: "";
    flex: none;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: #6db6d8;
  }
  .hiro-mega-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* テーマ側の区切り擬似要素（「/」等）を ID 特異度＋!important で確実に無効化。
     テーマはナビにIDを使わない（.list__pcnav/.drop__down＝クラス）ため
     #treat-menu スコープで必ず勝てる。 */
  #treat-menu .hiro-mega-col li::before,
  #treat-menu .hiro-mega-col li::after {
    content: none !important;
  }
  .hiro-mega-col li {
    margin: 0 0 2px;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
  }
  /* 施術リンク：左ドット＋ホバー時のシェブロン「›」スライドイン
     （#treat-menu の ID 特異度で、テーマの .drop__down 系クラスルールに勝つ。
       display:block を維持し、ドット/シェブロンは絶対配置で 8-2 節と非干渉） */
  #treat-menu .hiro-mega-col li a {
    display: block;
    position: relative;
    padding: 8px 26px 8px 21px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.18s, color 0.18s, opacity 0.18s, box-shadow 0.18s;
  }
  #treat-menu .hiro-mega-col li a::before {
    content: "" !important;
    position: absolute;
    left: 8px;
    right: auto;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cfe0e9;
    transform: translateY(-50%);
    transition: background-color 0.18s, transform 0.18s;
  }
  #treat-menu .hiro-mega-col li a::after {
    content: "\203A" !important; /* › 右シェブロン（テーマの「/」を上書き） */
    position: absolute;
    right: 9px;
    left: auto;
    top: 50%;
    margin: 0;
    color: #bcd6e2;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transform: translate(-5px, -50%);
    transition: opacity 0.18s, transform 0.18s, color 0.18s;
  }
  #treat-menu .hiro-mega-col li a:hover {
    background: #f1f8fb;
    color: #2f88ab;
    opacity: 1; /* テーマ共通の a:hover{opacity} を打ち消す */
  }
  #treat-menu .hiro-mega-col li a:hover::before {
    background: #6db6d8;
    transform: translateY(-50%) scale(1.3);
  }
  #treat-menu .hiro-mega-col li a:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
    color: #6db6d8;
  }

  /* チップ選択ハイライト：選択中は非該当を淡く、該当を強調 */
  .hiro-mega-cols.has-selection li a {
    opacity: 0.32;
  }
  .hiro-mega-cols.has-selection li a.is-hl {
    opacity: 1;
    background: #eaf4f9;
    color: #2f88ab;
    font-weight: 700;
    box-shadow: inset 0 0 0 1.4px #9bd0e6;
  }
  .hiro-mega-cols.has-selection li a.is-hl::before {
    background: #6db6d8;
  }
}
/* ----------------------------------------------------------------
   8-2. PCメガ：施術リンクのグリッド高さ折りたたみ対策（クリーン版 2026-06-16）
   症状：PCメガで <li> が offsetHeight:0 に潰れ、施術リンクが不可視。
   真因：font-weight:300px ではなく（無効値でブラウザは無視）、
         .hiro-mega-cols の display:grid におけるグリッドセルの
         高さ計算が折りたたまれる挙動。
   対処：グリッドアイテム（列）の min-height/align-self と、内部
         ul/li/a の高さを明示するのみ。既存ルールと特異度が競合せず
         後勝ちで効くため !important は不要。opacity も触らないため
         チップ選択時の淡色ハイライト（8節）と非干渉。
---------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  #treat-menu .hiro-mega-col {
    min-height: 0;
    align-self: start; /* グリッドセルを内容高さに合わせ、潰れを防ぐ */
  }
  #treat-menu .hiro-mega-col > ul {
    display: block;
    height: auto;
    min-height: 0;
  }
  #treat-menu .hiro-mega-col > ul > li {
    display: list-item;
    height: auto;
  }
  #treat-menu .hiro-mega-col > ul > li > a {
    display: block;
    height: auto;
    line-height: 1.4;
  }
}

/* ----------------------------------------------------------------
   9. フェーズ2：料金検索の結果（施術ページ＋料金メニュー）
   ・施術カード（.hiro-r-card/.hiro-r-nm/.hiro-r-cat）は 2節で定義済み
   ・ここは「料金メニュー」セクション見出しと、全プラン表示の料金カード
---------------------------------------------------------------- */
.hiro-r-section { margin-top: 18px; }
.hiro-r-section-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4f9cc0;
  margin-bottom: 9px;
}
.hiro-r-section-ttl span { letter-spacing: 0.06em; }
.hiro-r-section-ttl::after { content: ""; flex: 1; height: 1px; background: #e4e9ec; }
.hiro-r-section-ttl em {
  font-style: normal;
  background: #eef4f7;
  color: #777;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* 料金カード＝メニュー名＋カテゴリ＋全プラン（ミニ料金表） */
.hiro-r-price-card {
  display: block;
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 0 8px 0 8px;
  padding: 13px 15px;
  text-decoration: none;
  color: #333;
  margin-bottom: 8px;
  transition: border-color 0.16s;
}
.hiro-r-price-card:hover { border-color: #6db6d8; }
.hiro-r-price-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.hiro-r-price-nm {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  line-height: 1.45;
}
.hiro-r-cat-label {
  font-size: 10.5px;
  color: #fff;
  background: #6db6d8;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  font-weight: 500;
}
.hiro-r-cat-label.is-female { background: #e58aa8; } /* 女性 */
.hiro-r-cat-label.is-male   { background: #5b8fd1; } /* 男性 */
.hiro-r-plans { display: flex; flex-direction: column; }
.hiro-r-plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px dashed #eef3f5;
}
.hiro-r-plan-row:first-child { border-top: none; }
.hiro-r-plan-row .lbl { font-size: 12.5px; color: #555; line-height: 1.5; }
.hiro-r-plan-row .lbl .note { display: inline; color: #999; font-size: 11px; margin-left: 6px; }
.hiro-r-plan-row .val { font-size: 15px; font-weight: 700; color: #4f9cc0; white-space: nowrap; }
.hiro-r-plan-row .val small { font-size: 11px; color: #777; font-weight: 400; margin-left: 1px; }
.hiro-r-plan-row .val .ask { font-size: 12.5px; color: #777; font-weight: 500; }
/* プラン名グループ見出し（1コース内に複数プラン名があるとき：AGA・点滴のライト/スタンダード・ボトックス製剤違い等） */
.hiro-r-plan-group {
  font-size: 11.5px;
  font-weight: 700;
  color: #4f9cc0;
  line-height: 1.45;
  margin: 11px 0 1px;
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(109, 182, 216, .4);
}
.hiro-r-plans > .hiro-r-plan-group:first-child { margin-top: 0; }
/* グループ配下の行：インデントし、内部の区切り線は省いてコンパクトに */
.hiro-r-plan-row.is-sub { border-top: none; padding: 4px 0 4px 12px; }
.hiro-r-plan-row.is-sub .lbl { color: #666; }
/* 長いラベル（薬剤名など）がはみ出さず折り返すように */
.hiro-r-plan-row .lbl { min-width: 0; flex: 1 1 auto; }
.hiro-r-plan-row .val { flex: 0 0 auto; }
@media (max-width: 480px) {
  .hiro-r-plan-row .val { font-size: 14px; }
}

/* ============================================================
   検索結果末尾：脱毛シミュレーターへのティーザー（複数部位/全身検索時）
============================================================ */
.hiro-r-simlink {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; margin-bottom: 10px;
  background: #f4fafc; border: 1px solid #d6e7ed; border-radius: 0 8px 0 8px;
  padding: 11px 13px; transition: border-color .15s, background .15s;
}
.hiro-r-simlink:hover { background: #e9f5fa; border-color: #9fd0e0; }
.hiro-r-simlink__tx { font-size: 12px; color: #3d7e98; line-height: 1.6; }
.hiro-r-simlink__go { font-size: 11px; font-weight: 700; color: #fff; background: #6db6d8; border-radius: 999px; padding: 5px 11px; white-space: nowrap; flex: 0 0 auto; }

/* ============================================================
   /course/ 料金ページ：シミュレーターへの常設バナー
============================================================ */
.hiro-sim-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none; margin: 14px 0;
  background: linear-gradient(135deg, #f3fafc, #eaf5fa);
  border: 1px solid #cfe2ea; border-radius: 0 12px 0 12px;
  padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.hiro-sim-banner:hover { border-color: #9fd0e0; box-shadow: 0 3px 12px rgba(109, 182, 216, .18); }
.hiro-sim-banner__main { min-width: 0; }
.hiro-sim-banner__ttl { font-size: 13.5px; font-weight: 700; color: #2d7d9c; line-height: 1.5; }
.hiro-sim-banner__sub { font-size: 11px; color: #6a8a98; line-height: 1.5; margin-top: 2px; }
.hiro-sim-banner__go { font-size: 12px; font-weight: 700; color: #fff; background: #6db6d8; border-radius: 999px; padding: 8px 14px; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 480px) {
  .hiro-sim-banner { padding: 12px 13px; }
  .hiro-sim-banner__ttl { font-size: 12.5px; }
}

/* ============================================================
   トップ 統合ヒーロー（お悩み起点コネクター + re-Beau2バンド）
   2026-06 renewal / 移植元: hero_integrated_prototype.html
   - 全セレクタを .hero-renew 配下にスコープ（既存ルールと隔離）
   - CSS変数も .hero-renew に閉じる（:root へは漏らさない）
   - keyframes は hr- 接頭辞（既存 @keyframes fade との衝突回避）
   - プロトタイプの header(.bar/.pill) と html/body リセットは移植しない
   ============================================================ */
.hero-renew {
  --main: #6db6d8; --main-deep: #2e86ad; --main-deeper: #1f6f93; --main-deepest: #17597a;
  --ink: #1f2d33; --ink-soft: #5a6b72; --line: #e3eef2; --panel: #f5fafc; --line-green: #06C755;
  --r-lg: 0 20px 0 20px; --r-sm: 0 8px 0 8px;
  --f-jp: "Noto Sans JP", sans-serif; --f-lat: "Lato", sans-serif;
  font-family: var(--f-jp); color: var(--ink); line-height: 1.7; letter-spacing: .02em; -webkit-font-smoothing: antialiased;
}
.hero-renew * { box-sizing: border-box; }
.hero-renew svg { display: block; }
.hero-renew a { color: inherit; text-decoration: none; }
.hero-renew button { font: inherit; cursor: pointer; }

/* shared */
.hero-renew .eyebrow { font-family: var(--f-lat); font-weight: 700; font-size: 12px; letter-spacing: .26em; color: var(--main-deep); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.hero-renew .eyebrow::before { content: ""; width: 34px; height: 1.5px; background: var(--main); }
.hero-renew .em { color: var(--main-deep); background: linear-gradient(transparent 62%, rgba(109, 182, 216, .34) 62%); }
.hero-renew .btn { font-weight: 700; font-size: clamp(.95rem, 1.5vw, 1.02rem); padding: 14px 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; transition: transform .15s, background .2s, box-shadow .2s; }
.hero-renew .btn--main { background: var(--main-deeper); color: #fff; box-shadow: 0 10px 24px -12px rgba(31, 111, 147, .7); }
.hero-renew .btn--main:hover { background: var(--main-deepest); transform: translateY(-2px); }
.hero-renew .btn--main svg { width: 17px; height: 17px; stroke: #fff; }
.hero-renew .btn--ghost { background: #fff; color: var(--main-deep); border: 1.5px solid var(--main); }
.hero-renew .btn--ghost:hover { background: var(--panel); transform: translateY(-2px); }

/* ===== [1] hero : お悩み起点コネクター ===== */
.hero-renew .hero { position: relative; overflow: hidden; padding: clamp(26px, 4.5vw, 56px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 44px); }
.hero-renew .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 50% at 92% 4%, rgba(109, 182, 216, .13), transparent 60%), radial-gradient(50% 55% at 2% 100%, rgba(109, 182, 216, .06), transparent 60%); }
.hero-renew .hero__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.hero-renew .hero__lead { max-width: 640px; margin: 0 0 clamp(22px, 3.2vw, 32px); }
.hero-renew .hero__catch { font-weight: 700; font-size: clamp(1.9rem, 4.8vw, 3.1rem); line-height: 1.3; letter-spacing: .01em; margin: 0 0 16px; }
.hero-renew .hero__sub { font-size: clamp(.95rem, 1.5vw, 1.05rem); color: var(--ink-soft); margin: 0; }
.hero-renew .hero__sub b { color: var(--ink); font-weight: 700; }

.hero-renew .search { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; max-width: 520px; }
.hero-renew .search__box { flex: 1; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 18px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.hero-renew .search__box:focus-within { border-color: var(--main); box-shadow: 0 0 0 4px rgba(109, 182, 216, .15); }
.hero-renew .search__box svg { width: 18px; height: 18px; color: var(--main-deep); flex: none; }
.hero-renew .search__box input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 14px; color: var(--ink); background: transparent; }
.hero-renew .search__btn { font-weight: 700; font-size: 14px; color: #fff; background: var(--main-deeper); border: 0; padding: 12px 22px; border-radius: 999px; white-space: nowrap; transition: background .2s; }
.hero-renew .search__btn:hover { background: var(--main-deepest); }

.hero-renew .connect { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 2.5vw, 28px); align-items: stretch; margin-top: clamp(20px, 3vw, 28px); }
.hero-renew .picker { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 2.4vw, 22px); }
.hero-renew .picker__ttl { font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.hero-renew .picker__ttl svg { width: 16px; height: 16px; color: var(--main-deep); }
.hero-renew .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hero-renew .concern { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--ink); transition: border-color .18s, background .18s, transform .12s; text-align: center; }
.hero-renew .concern svg { width: 26px; height: 26px; color: var(--main-deep); }
.hero-renew .concern span { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.hero-renew .concern:hover { border-color: var(--main); transform: translateY(-2px); }
.hero-renew .concern[aria-pressed="true"] { border-color: var(--main); background: rgba(109, 182, 216, .12); box-shadow: 0 0 0 1px var(--main) inset; }
.hero-renew .concern[aria-pressed="true"] span { color: var(--main-deepest); font-weight: 700; }

.hero-renew .result { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.6vw, 24px); box-shadow: 0 26px 54px -34px rgba(31, 111, 147, .35); display: flex; flex-direction: column; }
.hero-renew .result__lbl { font-family: var(--f-lat); font-weight: 700; font-size: 10px; letter-spacing: .2em; color: var(--main-deep); }
.hero-renew .result__name { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; margin: 2px 0 14px; }
.hero-renew .result__name .tag { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-left: 8px; letter-spacing: .04em; }
.hero-renew .treats { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; min-height: 132px; }
.hero-renew .treat { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); transition: border-color .18s, background .18s; }
.hero-renew .treat:hover { border-color: var(--main); background: #fff; }
.hero-renew .treat__nm { font-size: 14px; font-weight: 500; }
.hero-renew .treat .ar { margin-left: auto; color: var(--main-deep); width: 16px; height: 16px; flex: none; }
.hero-renew .result__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-renew .result__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #fff; background: var(--main-deeper); padding: 12px 22px; border-radius: var(--r-sm); transition: background .2s, transform .15s; }
.hero-renew .result__cta:hover { background: var(--main-deepest); transform: translateY(-2px); }
.hero-renew .result__cta svg { width: 16px; height: 16px; stroke: #fff; }
.hero-renew .result__price { font-size: 11.5px; color: var(--ink-soft); }
.hero-renew .empty { font-size: 13px; color: var(--ink-soft); padding: 8px 0; }
.hero-renew .empty b { color: var(--ink); font-weight: 700; }
.hero-renew .fade { animation: hr-fade .35s ease; }
@keyframes hr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== [2] re-Beau2 バンド ===== */
.hero-renew .rebeau { position: relative; overflow: hidden; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(34px, 5vw, 64px) clamp(16px, 4vw, 48px); }
.hero-renew .rebeau::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 90% 20%, rgba(109, 182, 216, .12), transparent 60%); }
.hero-renew .rebeau__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-renew .rebeau__h { font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.34; margin: 0 0 14px; }
.hero-renew .rebeau__t { font-size: clamp(.95rem, 1.5vw, 1.04rem); color: var(--ink-soft); margin: 0 0 24px; max-width: 30em; }
.hero-renew .rebeau__t b { color: var(--ink); font-weight: 700; }

/* scan component */
.hero-renew .scan { position: relative; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); padding: 18px; box-shadow: 0 30px 60px -34px rgba(31, 111, 147, .4); }
.hero-renew .scan__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.hero-renew .scan__badge { font-family: var(--f-lat); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.hero-renew .scan__badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 4px rgba(109, 182, 216, .25); }
.hero-renew .scan__tag { font-family: var(--f-lat); font-weight: 700; font-size: 10px; letter-spacing: .22em; color: var(--main-deep); }
.hero-renew .surface { position: relative; aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden; background: radial-gradient(120% 90% at 65% 22%, #fdf4ec 0%, #f7e9de 46%, #efdccf 100%); }
.hero-renew .surface::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(109, 182, 216, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 182, 216, .16) 1px, transparent 1px); background-size: 34px 34px; mix-blend-mode: multiply; opacity: .5; }
.hero-renew .surface::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(109, 182, 216, .10) 60%, rgba(109, 182, 216, .5)); border-bottom: 2px solid var(--main); animation: hr-scan 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes hr-scan { 0% { transform: translateY(-30%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(360%); opacity: 0; } }
.hero-renew .mk { position: absolute; transform: translate(-50%, -50%); }
.hero-renew .mk i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--main); background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 6px rgba(109, 182, 216, .16); animation: hr-pulse 2.4s ease-in-out infinite; }
.hero-renew .mk span { position: absolute; left: 20px; top: -9px; white-space: nowrap; font-weight: 700; font-size: 11px; color: var(--main-deepest); background: rgba(255, 255, 255, .92); padding: 3px 9px; border-radius: var(--r-sm); border: 1px solid rgba(109, 182, 216, .4); }
.hero-renew .mk--1 { left: 34%; top: 33%; }
.hero-renew .mk--2 { left: 63%; top: 51%; }
.hero-renew .mk--2 i { animation-delay: .6s; }
.hero-renew .mk--3 { left: 45%; top: 71%; }
.hero-renew .mk--3 i { animation-delay: 1.2s; }
@keyframes hr-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(109, 182, 216, .16); } 50% { box-shadow: 0 0 0 11px rgba(109, 182, 216, .04); } }
.hero-renew .scan__readout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.hero-renew .scan__readout .axes { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-renew .axis { font-size: 11px; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff; }
.hero-renew .scan__readout .note { font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }

/* ===== closer ===== */
.hero-renew .closer { max-width: 1180px; margin: 0 auto; padding: clamp(20px, 3vw, 30px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 40px); }
.hero-renew .trust { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.hero-renew .trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-renew .trust .ic { width: 15px; height: 15px; color: var(--main-deep); flex: none; }
.hero-renew .fineprint { font-size: 11px; color: #8a979d; line-height: 1.6; margin: 16px 0 0; }

/* responsive */
@media (max-width: 900px) {
  .hero-renew .connect { grid-template-columns: 1fr; }
  .hero-renew .rebeau__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-renew .grid { gap: 8px; }
  .hero-renew .concern { padding: 11px 4px; }
  .hero-renew .concern svg { width: 23px; height: 23px; }
  .hero-renew .concern span { font-size: 11.5px; }
  .hero-renew .search { flex-wrap: wrap; }
  .hero-renew .search__btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .hero-renew .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-renew .fade { animation: none; }
  .hero-renew .surface::after { animation: none; opacity: .4; top: 38%; }
  .hero-renew .mk i { animation: none; }
}

/* ============================================================
   選べるワクワクコース 予算シミュレーター（案A+B）
   2026-06 / 移植元: HANDOFF_wakuwaku_AB.md §5 / 全セレクタ .swk 名前空間
   ============================================================ */
.swk{--swk-bl:#6db6d8;--swk-dp:#1f6f93;--swk-bt:#ffd34d;--swk-co:#ff8d7a;--swk-ink:#22323a;--swk-sf:#6c7780;--swk-ln:#e7eef2;--swk-bg:#f4f9fb;color:var(--swk-ink);font-feature-settings:"palt"}
.swk *{box-sizing:border-box}
.swk .swk-lead{font-size:1.05rem;line-height:2;margin:0 0 2em}
.swk .swk-lead b{color:var(--swk-dp)}
.swk-sec{margin:0 0 3em}
.swk .swk-h2{font-size:1.4rem;font-weight:900;color:var(--swk-dp);line-height:1.45;margin:0 0 .3em}
.swk .swk-h2 .en{display:block;font-family:"Lato",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;color:var(--swk-bl);margin-bottom:6px}
.swk .swk-sub{font-size:.88rem;color:var(--swk-sf);line-height:1.85;margin:0 0 1.4em}
.swk .swk-note{font-size:.8rem;color:var(--swk-sf);line-height:1.9;margin:1em 0 0}
.swk .swk-pill{display:inline-flex;align-items:center;justify-content:center;font-family:"Lato",sans-serif;font-weight:700;font-size:.72rem;min-width:36px;padding:3px 8px;border-radius:5px;margin-right:5px}
.swk .swk-p5{background:#e6f3f9;color:var(--swk-dp);border:1px solid var(--swk-bl)}
.swk .swk-p10{background:var(--swk-dp);color:#fff}

/* ===== 予算シミュレーター（案A メーター × 案B チップ） ===== */
.swk-sim{background:var(--swk-bg);border:1.5px solid var(--swk-ln);border-radius:0 22px 22px;padding:22px 20px;display:grid;gap:20px}
.swk-sim-rule{font-size:.86rem;color:var(--swk-sf);line-height:1.85;margin:0}
.swk-sim-rule b{color:var(--swk-dp);font-weight:700}
.swk-meter{background:#fff;border:1.5px solid var(--swk-ln);border-radius:16px;padding:20px 20px 16px}
.swk-meter-h{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;color:var(--swk-dp);margin-bottom:10px}
.swk-meter-total{font-family:"Lato",sans-serif;font-weight:900;font-size:1.5rem;color:var(--swk-ink)}
.swk-meter-total small{font-size:.85rem;font-weight:700;font-family:"Noto Sans JP",sans-serif}
.swk-track{position:relative;height:13px;background:#eaf2f6;border-radius:999px;margin:20px 0 30px}
.swk-fill{position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,var(--swk-bl),var(--swk-dp));border-radius:999px;transition:width .35s ease}
.swk-node{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center}
.swk-node i{display:block;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #c7dde8;margin:0 auto;transition:.25s}
.swk-node.on i{background:var(--swk-dp);border-color:var(--swk-dp);box-shadow:0 0 0 4px rgba(31,111,147,.18)}
.swk-node b{font-family:"Lato",sans-serif;font-weight:900;font-size:.95rem;display:block;margin-top:7px;color:var(--swk-ink)}
.swk-node small{font-size:.62rem;color:var(--swk-sf);display:block}
.swk-n1{left:30%}.swk-n2{left:60%}.swk-n3{left:100%}
.swk-hint{font-size:.85rem;line-height:1.85;color:var(--swk-ink);background:#eaf4f9;border-radius:12px;padding:12px 14px;margin-top:4px}
.swk-hint b{color:var(--swk-dp);font-weight:700}
.swk-tabs{display:flex;gap:8px}
.swk-tab{flex:1;padding:12px 8px;border-radius:999px;font-weight:700;font-size:.9rem;border:1.5px solid var(--swk-ln);background:#fff;color:var(--swk-sf);cursor:pointer;font-family:inherit;transition:.2s}
.swk-tab[aria-selected="true"]{background:var(--swk-dp);color:#fff;border-color:var(--swk-dp)}
.swk-chips{display:grid;grid-template-columns:1fr;gap:9px}
.swk-chip{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--swk-ln);border-radius:14px;padding:12px 14px;cursor:pointer;text-align:left;width:100%;font-family:inherit;transition:.18s}
.swk-chip:hover{border-color:var(--swk-bl)}
.swk-chip[aria-pressed="true"]{border-color:var(--swk-co);background:#fff6f4}
.swk-chk{width:23px;height:23px;border-radius:7px;border:2px solid var(--swk-ln);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.18s}
.swk-chip[aria-pressed="true"] .swk-chk{background:var(--swk-co);border-color:var(--swk-co)}
.swk-chk svg{width:13px;height:13px;opacity:0;transition:.15s}
.swk-chip[aria-pressed="true"] .swk-chk svg{opacity:1}
.swk-chip-bd{flex:1;min-width:0}
.swk-chip-nm{font-weight:700;font-size:.98rem;line-height:1.45}
.swk-chip-dt{font-size:.8rem;color:var(--swk-sf)}
.swk-chip-pr{font-family:"Lato",sans-serif;font-weight:700;font-size:.92rem;color:var(--swk-dp);white-space:nowrap}
.swk-sim-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.swk-reset{background:none;border:none;color:var(--swk-sf);font-size:.84rem;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0}
.swk-reset:hover{color:var(--swk-dp)}
.swk-sim-cta{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.swk-disc{font-size:.78rem;color:var(--swk-sf);line-height:1.85;background:#fff;border:1px solid var(--swk-ln);border-radius:12px;padding:13px 15px}
@media(min-width:680px){.swk-sim{grid-template-columns:1fr;}.swk-chips{grid-template-columns:1fr 1fr}.swk-meter{position:sticky}}

/* ===== ボタン ===== */
.swk-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.94rem;padding:13px 22px;border-radius:999px;color:#fff}
.swk-btn-line{background:#06C755}.swk-btn-rsv{background:var(--swk-dp)}.swk-btn-tel{background:#fff;color:var(--swk-dp);border:1.5px solid var(--swk-dp)}
.swk-btn-sm{padding:10px 18px;font-size:.86rem}

/* ===== 施術別リンク（SEO/回遊） ===== */
.swk-links{display:grid;gap:12px}
.swk-link-cat{background:var(--swk-bg);border:1.5px solid var(--swk-ln);border-radius:0 16px 16px;padding:15px 17px}
.swk-link-cat h3{font-size:.96rem;font-weight:700;color:var(--swk-dp);margin:0 0 8px}
.swk-link-cat p{margin:0;font-size:.92rem;line-height:2;color:var(--swk-ink)}
.swk-link-cat a{color:var(--swk-dp);text-decoration:underline;text-underline-offset:2px;margin-right:.2em}

/* ===== ラダー（仕組み） ===== */
.swk-ladder{display:grid;gap:10px}
.swk-step{display:flex;align-items:center;gap:16px;background:var(--swk-bg);border:1.5px solid var(--swk-ln);border-radius:14px;padding:15px 17px}
.swk-step .swk-amt{font-family:"Lato",sans-serif;font-weight:900;font-size:1.6rem;color:#fff;background:var(--swk-bl);min-width:112px;text-align:center;border-radius:10px;padding:9px 6px;line-height:1}
.swk-step .swk-amt small{font-size:.76rem;font-weight:700;font-family:"Noto Sans JP",sans-serif}
.swk-step.s2 .swk-amt{background:#52a4c6}.swk-step.s3 .swk-amt{background:var(--swk-dp)}
.swk-step .swk-cap{font-weight:700;font-size:1rem}
.swk-step .swk-cap span{display:block;font-weight:400;font-size:.82rem;color:var(--swk-sf);margin-top:3px}
.swk-step .swk-combo{margin-left:auto;font-size:.78rem;color:var(--swk-dp);background:#eaf4f9;border-radius:999px;padding:7px 13px;white-space:nowrap}

/* ===== モデルコース ===== */
.swk-models{display:grid;grid-template-columns:1fr;gap:16px}
.swk-model{background:#fff;border:1.5px solid var(--swk-ln);border-radius:0 20px 20px;padding:20px}
.swk-model-h{font-size:1.1rem;font-weight:700;color:#fff;background:var(--swk-bl);border-radius:10px;padding:11px 15px;margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline}
.swk-model-h span{font-family:"Lato",sans-serif;font-weight:900;font-size:1.3rem}
.swk-model ul{margin:0 0 12px;padding-left:1.1em}
.swk-model li{font-size:.95rem;line-height:1.95}
.swk-model-note{font-size:.76rem;color:var(--swk-sf);line-height:1.85;margin:0;padding-top:10px;border-top:1px dashed var(--swk-ln)}
@media(min-width:680px){.swk-models{grid-template-columns:1fr 1fr}}

/* ===== 流れ ===== */
.swk-flow{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.swk-flow>li{display:flex;gap:14px;background:var(--swk-bg);border-radius:0 16px 16px;padding:18px;align-items:flex-start}
.swk-flow-n{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--swk-bl);color:#fff;font-family:"Lato",sans-serif;font-weight:900;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.swk-flow h3{font-size:1.04rem;font-weight:700;color:var(--swk-dp);margin:0 0 5px}
.swk-flow p{font-size:.92rem;color:var(--swk-sf);line-height:1.9;margin:0}
.swk-flow-doc{flex:0 0 92px;align-self:stretch;min-height:84px;border-radius:12px;background-size:cover;background-position:center top;background-color:#dfeaf0}
@media(min-width:680px){.swk-flow{grid-template-columns:1fr 1fr}}

/* ===== FAQ ===== */
.swk-faq details{background:#fff;border:1.5px solid var(--swk-ln);border-radius:12px;margin:0 0 10px;overflow:hidden}
.swk-faq summary{cursor:pointer;list-style:none;padding:15px 44px 15px 18px;font-weight:700;color:var(--swk-dp);font-size:1rem;line-height:1.6;position:relative}
.swk-faq summary::-webkit-details-marker{display:none}
.swk-faq summary::before{content:"Q";font-family:"Lato",sans-serif;color:var(--swk-bl);margin-right:8px;font-weight:900}
.swk-faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--swk-bl);border-bottom:2px solid var(--swk-bl);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.swk-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.swk-faq details p{margin:0;padding:0 18px 16px;font-size:.92rem;color:var(--swk-sf);line-height:1.95}

/* ===== CTA ===== */
.swk-cta{background:var(--swk-dp);border-radius:0 22px 0 22px;padding:28px 22px;text-align:center;color:#fff}
.swk-cta-lead{font-size:1.08rem;font-weight:700;line-height:1.75;margin:0 0 18px}
.swk-cta .swk-btns{display:flex;flex-direction:column;gap:10px;max-width:430px;margin:0 auto}
.swk-cta .swk-btn-rsv{background:var(--swk-bt);color:#5a4200}
.swk-cta .swk-btn-tel{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.swk-cta-meta{font-size:.8rem;opacity:.9;margin:16px 0 0;line-height:1.8}
@media(min-width:680px){.swk-cta .swk-btns{flex-direction:row}.swk-cta .swk-btn{flex:1}}

/* ===== 注意事項 ===== */
.swk-legal{border-top:2px solid var(--swk-ln);padding-top:24px}
.swk-legal h3{font-size:1rem;font-weight:700;color:var(--swk-dp);margin:18px 0 6px}
.swk-legal p{font-size:.82rem;color:var(--swk-sf);line-height:1.95;margin:0 0 10px}
.swk-legal a{color:var(--swk-dp)}
.swk-legal-d{background:#fff;border:1px solid var(--swk-ln);border-radius:10px;margin:8px 0 12px}
.swk-legal-d summary{cursor:pointer;padding:13px 16px;font-size:.88rem;font-weight:700;color:var(--swk-dp)}
.swk-legal-d p{padding:0 16px 14px;margin:0}
.swk-legal-fine{font-size:.78rem;color:var(--swk-sf);line-height:1.9}

@media(prefers-reduced-motion:reduce){.swk *{animation:none!important;transition:none!important}}
.swk :focus-visible{outline:3px solid var(--swk-bl);outline-offset:2px}


/* §6 INNER BRIGHT+ /medical/inner-bright/ */
.ib-page{--nav:#1c4457;--nav2:#163646;--nav3:#12303c;--ga:#23566e;--gb:#16384a;
  --ac:#6db6d8;--acl:#9fcfe4;--red:#e11d48;
  --col:#f7fbfc;--disc:#eef5f8;--ln:#dce8ee;--ln2:#e2edf1;--ln3:#d8e6ec;
  --tx:#1c2b32;--tx2:#5d7480;--sub:#7d949e;
  --on:#cfe2ea;--on2:#bcd6e0;--on3:#d6e6ec;--ons:#8fb0bc;
  --svf:#1c7a5b;--svb:#e3f4ec;
  max-width:600px;margin:0 auto;background:var(--col);color:var(--tx);
  font-family:"Noto Sans JP","Lato",sans-serif;overflow:hidden;line-height:1.7;}
.ib-cta{display:block;width:100%;text-align:center;font-weight:700;border:none;border-radius:0 16px 16px 16px;padding:15px;transition:transform .2s,box-shadow .2s;}
.ib-cta--light{background:#fff;color:var(--nav);box-shadow:0 14px 26px -12px rgba(0,0,0,.5);}
.ib-cta--navy{background:var(--nav);color:#fff;box-shadow:0 14px 26px -14px rgba(28,68,87,.6);}
.ib-cta:hover{transform:translateY(-2px);}
.ib-cta:focus-visible{outline:3px solid rgba(109,182,216,.6);outline-offset:3px;}
.ib-eyebrow{display:block;font-size:10.5px;letter-spacing:.2em;font-weight:700;color:var(--ac);text-align:center;}
.ib-h2{font-family:"Noto Sans JP";font-weight:700;font-size:21px;text-align:center;color:var(--nav);margin:6px 0 4px;line-height:1.4;}
.ib-lead{text-align:center;font-size:12px;color:var(--tx2);margin:0 0 22px;line-height:1.7;}

/* ---- HERO B（価値スプリット。ロゴH1は KV が担当のため非搭載） ---- */
.ib-hero{background:var(--col);padding:30px 0 0;}
.ib-hero__top{padding:0 24px;}
.ib-hero__eyebrow{display:inline-block;font-size:11px;letter-spacing:.2em;color:#6892a6;margin-bottom:10px;}
.ib-hero__sub{font-size:13px;color:var(--tx2);margin-top:0;font-weight:500;}
.ib-hero__split{margin-top:20px;display:flex;align-items:stretch;}
.ib-hero__value{flex:1.05;background:var(--nav);color:#fff;border-radius:0 26px 0 0;padding:26px 20px 26px 24px;}
.ib-hero__value-lead{font-size:17px;font-weight:700;line-height:1.6;}
.ib-hero__value-lead b{color:var(--ac);font-weight:700;}
.ib-hero__value-sub{font-size:12.5px;color:var(--on);line-height:1.7;margin-top:10px;}
.ib-hero__value .ib-cta{margin-top:20px;border-radius:0 14px 14px 14px;font-size:14px;padding:13px;}
.ib-hero__visual{flex:.62;background:linear-gradient(160deg,var(--ga),var(--gb));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 8px;background-image:repeating-linear-gradient(135deg,rgba(109,182,216,.08) 0 8px,transparent 8px 16px);}
.ib-hero__coffee{font-size:30px;animation:ibFloat 5s ease-in-out infinite;}
.ib-hero__eq{font-size:9px;color:var(--acl);text-align:center;letter-spacing:.05em;}
.ib-hero__rule{width:34px;height:1px;background:rgba(159,207,228,.4);}
.ib-hero__pills{display:flex;gap:5px;}
.ib-hero__pills i{display:block;width:13px;height:24px;border-radius:7px;}
.ib-hero__pills i:first-child{background:var(--ac);}
.ib-hero__pills i:last-child{background:var(--acl);}
.ib-hero__pills-label{font-size:9px;color:var(--acl);}
.ib-hero__foot{padding:14px 24px 30px;font-size:10.5px;color:var(--sub);}

/* ---- FINDER A（SIGNATURE） ---- */
.ib-finder{padding:38px 20px 30px;background:var(--col);}
.ib-concerns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px;}
.ib-concern{display:flex;align-items:center;gap:9px;font-weight:700;font-size:12.5px;border-radius:0 14px 14px 14px;padding:13px 12px;background:#fff;color:var(--nav);border:1px solid #d2e2ea;transition:all .3s;text-align:left;}
.ib-concern__dot{width:9px;height:9px;border-radius:50%;flex:none;}
.ib-concern span:last-child{text-align:left;line-height:1.3;}
.ib-concern:focus-visible{outline:3px solid rgba(109,182,216,.5);outline-offset:2px;}
.ib-concern.is-active{background:var(--nav);color:#fff;border-color:var(--nav);box-shadow:0 10px 20px -12px rgba(28,68,87,.6);}
.ib-finder__summary{text-align:center;min-height:20px;margin-bottom:18px;font-size:12.5px;color:var(--nav);font-weight:500;}
.ib-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.ib-card{position:relative;background:#fff;border:1px solid var(--ln);border-radius:0 18px 18px 18px;padding:13px 13px 14px;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s,box-shadow .45s,filter .45s,border-color .45s;}
.ib-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;min-height:16px;}
.ib-card__no{font-family:"Lato";font-weight:900;font-size:11px;color:var(--ac);}
.ib-card__badge{display:none;font-size:8.5px;font-weight:700;color:#fff;background:var(--nav);border-radius:999px;padding:2px 7px;}
.ib-card__name{font-family:"Noto Sans JP";font-weight:700;font-size:13px;color:var(--nav);line-height:1.3;}
.ib-card__en{font-family:"Lato";font-size:9.5px;color:#8aa0aa;letter-spacing:.04em;margin:1px 0 7px;}
.ib-card__short{font-size:10.5px;color:var(--tx2);line-height:1.55;}
.ib-card.is-active{opacity:1;transform:translateY(-9px);box-shadow:0 18px 32px -16px rgba(28,68,87,.5);border-color:var(--ac);}
.ib-card.is-active .ib-card__badge{display:inline-block;}
.ib-card.is-dim{opacity:.4;transform:scale(.95);filter:grayscale(.55);}

/* ---- 8 INGREDIENTS DETAIL（濃紺） ---- */
.ib-detail{padding:36px 20px 30px;background:var(--nav);color:#fff;}
.ib-detail .ib-eyebrow{color:var(--ac);}
.ib-detail .ib-h2{color:#fff;}
.ib-detail__lead{text-align:center;font-size:11.5px;color:var(--on2);margin:0 0 20px;}
.ib-detail__list{display:flex;flex-direction:column;gap:11px;}
.ib-ing{display:flex;gap:13px;background:rgba(255,255,255,.05);border:1px solid rgba(159,207,228,.18);border-radius:0 16px 16px 16px;padding:14px;}
.ib-ing__no{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,207,228,.4);display:flex;align-items:center;justify-content:center;font-family:"Lato";font-weight:900;font-size:13px;color:var(--ac);}
.ib-ing__body{flex:1;}
.ib-ing__name{display:inline;font-family:"Noto Sans JP";font-weight:700;font-size:14px;margin:0;}
.ib-ing__en{font-family:"Lato";font-size:10px;color:var(--acl);letter-spacing:.03em;margin-left:7px;}
.ib-ing__short{font-size:11.5px;color:var(--on3);line-height:1.65;margin:6px 0 0;}
.ib-ing__note{font-size:10px;color:var(--ons);line-height:1.5;margin:5px 0 0;}
.ib-detail__foot{font-size:9.5px;color:#7e9aa6;line-height:1.7;margin:16px 4px 0;}

/* ---- PRICING ---- */
.ib-price{padding:38px 20px 30px;background:var(--col);}
.ib-plans{display:flex;flex-direction:column;gap:12px;}
.ib-plan{position:relative;width:100%;text-align:left;border-radius:0 18px 18px 18px;padding:17px 18px;background:#fff;border:2px solid var(--ln2);transition:all .3s;}
.ib-plan:focus-visible{outline:3px solid rgba(109,182,216,.5);outline-offset:2px;}
.ib-plan.is-selected{border-color:var(--nav);box-shadow:0 16px 30px -18px rgba(28,68,87,.5);}
.ib-plan__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ib-plan__l{text-align:left;}
.ib-plan__days{font-family:"Noto Sans JP";font-weight:700;font-size:16px;color:var(--nav);}
.ib-plan__tablets{font-size:11px;color:var(--sub);margin-left:8px;}
.ib-plan__per{font-size:11px;color:var(--tx2);margin-top:4px;}
.ib-plan__save{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;color:var(--svf);background:var(--svb);border-radius:6px;padding:2px 8px;}
.ib-plan__r{text-align:right;flex:none;}
.ib-plan__price{font-family:"Lato";font-weight:900;font-size:23px;color:var(--nav);line-height:1;}
.ib-plan__tax{font-size:9.5px;color:#9aabb3;margin-top:3px;}
.ib-plan__best{position:absolute;top:-10px;left:18px;font-size:10px;font-weight:700;color:#fff;background:var(--red);border-radius:999px;padding:3px 11px;}
.ib-price .ib-cta{margin-top:18px;font-size:15px;}
.ib-price__note{font-size:10px;color:var(--sub);line-height:1.7;margin:12px 4px 0;text-align:center;}

/* ---- 必須表記アコーディオン（native details） ---- */
.ib-disc{padding:34px 20px 30px;background:var(--disc);}
.ib-disc .ib-eyebrow{color:#6892a6;}
.ib-disc .ib-h2{font-size:18px;}
.ib-disc__lead{text-align:center;font-size:11.5px;color:var(--tx2);margin:0 0 20px;line-height:1.7;}
.ib-disc__list{display:flex;flex-direction:column;gap:9px;}
.ib-disc__item{background:#fff;border:1px solid var(--ln3);border-radius:0 14px 14px 14px;overflow:hidden;}
.ib-disc__q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;cursor:pointer;list-style:none;font-family:"Noto Sans JP";font-weight:700;font-size:12.5px;color:var(--nav);line-height:1.45;}
.ib-disc__q::-webkit-details-marker{display:none;}
.ib-disc__q::after{content:"+";font-family:"Lato";font-weight:700;font-size:20px;color:var(--ac);flex:none;line-height:1;width:18px;text-align:center;}
.ib-disc__item[open] .ib-disc__q::after{content:"\2212";}
.ib-disc__a{font-size:11.5px;color:var(--tx2);line-height:1.85;margin:0;padding:0 16px 16px;}

/* ---- FAQ（SEO・FAQPageスキーマ。Claude Design構成に追加） ---- */
.ib-faq{padding:34px 20px 34px;background:var(--col);}
.ib-faq__list{display:flex;flex-direction:column;gap:9px;}
.ib-faq__item{background:#fff;border:1px solid var(--ln3);border-radius:0 14px 14px 14px;overflow:hidden;}
.ib-faq__q{display:flex;align-items:center;gap:11px;padding:15px 16px;cursor:pointer;list-style:none;font-weight:500;font-size:13px;color:var(--nav);}
.ib-faq__q::-webkit-details-marker{display:none;}
.ib-faq__q::before{content:"Q";flex:none;width:24px;height:24px;background:var(--nav);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Lato";font-weight:900;font-size:12px;}
.ib-faq__q::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(45deg);transition:transform .25s;}
.ib-faq__item[open] .ib-faq__q::after{transform:rotate(-135deg);}
.ib-faq__a{padding:0 16px 16px 51px;font-size:12px;color:var(--tx2);line-height:1.85;}

@media(max-width:400px){
  .ib-hero__name{font-size:27px;}
  .ib-hero__value{padding:22px 16px;}
}
@media(prefers-reduced-motion:reduce){
  .ib-card,.ib-concern,.ib-cta,.ib-hero__coffee,.ib-faq__item[open] .ib-faq__q::after{transition:none;animation:none;}
  .ib-card.is-active,.ib-card.is-dim{transform:none;}
}
@keyframes ibFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 検索カード：脱毛のアフターフォロー表示（phase2 EDIT4） */
.hiro-r-aftercare{display:flex;align-items:baseline;gap:6px;padding:2px 0}
.hiro-r-aftercare-lbl{font-size:12px;color:#777}
.hiro-r-aftercare-val{font-size:16px;font-weight:700;color:#4f9cc0;line-height:1.3}
.hiro-r-aftercare-val small{font-size:11px;font-weight:400;color:#999;margin-left:1px}
.hiro-r-aftercare-tilde{font-size:14px;font-weight:400;margin-left:1px}
.hiro-r-aftercare-more{display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:9px;border-top:1px solid #e4e9ec;font-size:12px;color:#4f9cc0}
.hiro-r-aftercare-arw{font-size:15px;line-height:1}
.hiro-r-price-card:hover .hiro-r-aftercare-more{color:#3d86ab}

/* KVスライドのクリッカブル化: <a>が.swiper-slideとimgの間に入り height:100% カスケードを分断するため復元（effect:fade＝スライド寸法確定が必須） */
.kv__swiper .swiper-slide a { display: block; width: 100%; height: 100%; }

/* ============================================================================
   HIRO COURSE REDESIGN (HCR)  —  single-course.php 用 chrome
   ・追加専用。既存クラスと衝突しないよう全セレクタ .hcr- 接頭辞。
   ・このブロックを css/hiro-menu.css の末尾に追記（css/main.css は SCSS 生成物ゆえ不可）。
   ・本文(.course__item__des / the_content)には一切触れない（aftercare 保護）。
   ============================================================================ */
:root{
  --hcr-main:#6db6d8; --hcr-deep:#1f6f93; --hcr-deep2:#12556f; --hcr-line:#06C755;
  --hcr-ink:#20343c; --hcr-soft:#657a83; --hcr-hair:#e5eef2; --hcr-wash:#f0f8fb;
  --hcr-female:#e0709a; --hcr-male:#3f8fd0; --hcr-sex:var(--hcr-female); --hcr-sexsoft:#fbeef3;
}
.hcr[data-gender="male"]{--hcr-sex:var(--hcr-male); --hcr-sexsoft:#eaf2fb;}

/* KV：h1=コースタイトル化に伴う eyebrow（「コースと料金」を降格表示） */
.hcr-eyebrow{font-family:"Lato","Noto Sans JP",sans-serif;letter-spacing:.18em;font-size:11px;
  font-weight:900;color:#eafaff;opacity:1;text-shadow:0 1px 6px rgba(0,0,0,.35);text-transform:uppercase;margin:0 0 6px;display:block;}

/* 性別クロスナビ（リボン） */
.hcr-xnav{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--hcr-sexsoft);border-top:1px solid var(--hcr-hair);border-bottom:1px solid var(--hcr-hair);
  padding:11px 16px;font-size:13px;color:var(--hcr-soft);margin:0 0 20px;}
.hcr-xnav__now{font-weight:800;color:var(--hcr-ink);}
.hcr-xnav__now b{color:var(--hcr-sex);}
.hcr-xnav a{display:inline-flex;align-items:center;gap:6px;color:var(--hcr-deep);font-weight:800;
  text-decoration:none;background:#fff;border:1.5px solid var(--hcr-main);border-radius:999px;padding:8px 16px;min-height:40px;}
.hcr-xnav a:hover{background:#fff;box-shadow:0 4px 14px rgba(24,66,82,.12);}

/* レイアウト：本文 + スティッキー予約レール */
.hcr-wrap{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;}
.hcr-main{min-width:0;}
.hcr-rail{position:sticky;top:90px;}
.hcr-rail__card{background:#fff;border:1.5px solid var(--hcr-main);border-radius:0 22px 0 22px;
  padding:20px;box-shadow:0 14px 38px rgba(24,66,82,.10);}
.hcr-rail__price .cur{font-size:13px;color:var(--hcr-soft);font-weight:700;}
.hcr-rail__price .big{font-family:"Lato","Noto Sans JP",sans-serif;font-weight:900;font-size:34px;
  color:var(--hcr-deep);line-height:1;}
.hcr-rail__sub{font-size:12.5px;color:var(--hcr-soft);margin:8px 0 16px;}
.hcr-rail__facts{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--hcr-hair);}
.hcr-rail__facts li{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:#3c4f56;}

/* ボタン（様式2ハイブリッド：主=LINE 56px pill／従=小角丸10px） */
.hcr-btns{display:flex;flex-direction:column;gap:10px;}
.hcr-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 20px;font-weight:900;font-size:14.5px;line-height:1.2;text-decoration:none;
  border:1.6px solid transparent;cursor:pointer;overflow:hidden;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease;}
.hcr-btn:active{transform:translateY(1px);}
.hcr-btn:focus-visible{outline:3px solid #8fd0e6;outline-offset:2px;}
.hcr-btn--line{background:var(--hcr-line);color:#fff;border-radius:999px;min-height:56px;font-size:15.5px;
  box-shadow:0 8px 18px rgba(6,199,85,.24);}
.hcr-btn--line::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .15s;}
.hcr-btn--line:hover::after{opacity:.18;}   /* GL準拠：基本色に黒被せで暗転 */
.hcr-btn--line>*{position:relative;z-index:1;}
.hcr-btn--web{background:var(--hcr-deep);color:#fff;border-radius:10px;}
.hcr-btn--web:hover{background:var(--hcr-deep2);box-shadow:0 8px 20px rgba(18,85,111,.28);}
.hcr-btn--tel{background:#fff;color:var(--hcr-deep);border-color:var(--hcr-deep);border-radius:10px;}
.hcr-btn--tel:hover{background:var(--hcr-wash);}

/* 部位チップ */
.hcr-chips{margin:0 0 14px;}
.hcr-chip{display:inline-block;background:#fff;border:1px solid var(--hcr-hair);border-radius:999px;
  padding:6px 14px;font-size:13px;font-weight:600;margin:0 7px 8px 0;}
.hcr-chip--hot{background:var(--hcr-sexsoft);border-color:var(--hcr-sex);color:var(--hcr-sex);font-weight:800;}

/* モバイル：レール解除 */
@media (max-width:900px){
  .hcr-wrap{grid-template-columns:1fr;}
  .hcr-rail{position:static;margin-top:24px;}
  /* HCR有効ページのみ：KV下余白を詰め、既存CTA(64px)との被覆を防ぐ下余白を確保 */
  body.hcr-on main.course.under02{
    padding-top: 40px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .hcr-admin-flag{bottom:84px;}
}

/* 管理者プレビュー時のバッジ（preview モード可視化） */
.hcr-admin-flag{position:fixed;left:12px;bottom:12px;z-index:70;background:#0d252d;color:#8fd0e6;
  font-size:11px;font-weight:800;padding:6px 12px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.3);}

/* 2026-10-28 KVIMG1028: 下層KV見出しの可読性（写真の壁・模様パネル上でも白文字が読めるように紺色の影） */
.under__kv__title{text-shadow:0 0 12px rgba(12,30,68,.55),0 1px 3px rgba(12,30,68,.45);}

/* 2026-11-01 TOPCP1101: トップ「今月のキャンペーン」枠（parts/top-campaign.php） */
.top__cp{position:relative;max-width:1260px;width:100%;margin:0 auto 100px;padding:0 20px;box-sizing:border-box}
@media (min-width:1024px){.top__cp{padding-left:90px;margin-bottom:150px}}
.top__cp[hidden],.top__cp [hidden]{display:none!important}
.top__cp .title__main{margin-bottom:36px}
@media (min-width:1024px){.top__cp .title__main{margin-bottom:48px}}
.top__cp__feature{display:flex;flex-direction:column;background:#fff;border:1px solid #dde9ef;border-radius:14px;overflow:hidden;text-decoration:none;color:#302d2c;box-shadow:0 8px 28px rgba(28,68,87,.08);transition:box-shadow .2s,transform .2s}
.top__cp__feature:hover{box-shadow:0 12px 32px rgba(28,68,87,.14);transform:translateY(-2px)}
@media (min-width:768px){.top__cp__feature{flex-direction:row;align-items:stretch}}
.top__cp__img{background:#f3f7f9}
@media (min-width:768px){.top__cp__img{flex:0 0 52%}}
.top__cp__img img{display:block;width:100%;height:auto}
.top__cp__body{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px 20px 26px}
@media (min-width:768px){.top__cp__body{padding:36px 44px}}
.top__cp__period{align-self:flex-start;margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;background:#1c4457;border-radius:999px;padding:5px 14px;line-height:1.4}
.top__cp__title{margin:0;font-size:20px;font-weight:700;line-height:1.5;color:#1c4457;letter-spacing:.02em}
@media (min-width:1024px){.top__cp__title{font-size:24px}}
.top__cp__sub{margin:0;font-size:15px;line-height:1.75}
.top__cp__more{align-self:flex-start;margin-top:6px;font-size:14px;font-weight:700;color:#fff;background:#6db6d8;border-radius:999px;padding:11px 24px;line-height:1.3}
.top__cp__more::after{content:"\203A";margin-left:8px}
.top__cp__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:768px){.top__cp__list{grid-template-columns:1fr 1fr;gap:16px}}
.top__cp__list a{display:flex;align-items:center;gap:14px;height:100%;box-sizing:border-box;padding:10px 14px 10px 10px;background:#fff;border:1px solid #dde9ef;border-radius:10px;text-decoration:none;color:#302d2c}
.top__cp__thumb{flex:0 0 112px;aspect-ratio:3/2;background:#f3f7f9;border-radius:6px;overflow:hidden}
.top__cp__thumb img{display:block;width:100%;height:100%;object-fit:contain}
.top__cp__ltext{display:flex;flex-direction:column;gap:4px;min-width:0}
.top__cp__ltitle{font-size:14px;font-weight:700;line-height:1.5}
.top__cp__lsub{font-size:12px;line-height:1.5;color:#676666}
.top__cp__all{display:block;width:max-content;margin:24px 0 0 auto;font-size:13px;color:#302d2c;text-decoration:none;border-bottom:1px solid #302d2c;padding-bottom:2px}
.top__cp__all::after{content:"\203A";margin-left:6px}

/* 2026-11-01 KVCATCH1101: トップのキャッチコピーを、PCではスライダー画像の上の余白に1行で置く（画像内の文字と重なっていたため） */
@media only screen and (min-width:769px){
.top__kv.front>.top__kv__catch{top:68px;left:auto;right:0;width:min(1000px,calc(100% - 40px));box-sizing:border-box}
.top__kv.front>.top__kv__catch>p:nth-child(1){font-size:clamp(20px,2.2vw,30px);line-height:1.6;margin-bottom:6px;white-space:nowrap}
.top__kv.front>.top__kv__catch>p:nth-child(1) br{display:none}
}

/* 2026-11-01 HDRNAV1101: PCヘッダーのメニュー文字が幅1440px未満で縦に折り返していたため、余白を画面幅に合わせて縮め、文字は折り返さない。
   狭い幅では、ハンバーガーメニューにもある項目（お問い合わせ→クリニック一覧の順）をヘッダーから隠す。
   あわせて幅1000px以下で「治療メニュー」のパネルが画面の左外へずれる不具合（旧テーマの translateX(-25%)）を打ち消す。 */
@media only screen and (min-width:769px){
.list__pcnav>li{white-space:nowrap}
}
@media only screen and (min-width:769px) and (max-width:1439px){
.header{padding-left:clamp(20px,3.2vw,90px)}
.header__col02__menu{padding-left:clamp(24px,4vw,90px);padding-right:clamp(20px,3.2vw,90px)}
.header__col02__menu .list__pcnav{margin-right:clamp(16px,3vw,80px)}
.list__pcnav>li:not(:nth-last-child(1)){margin-right:clamp(16px,2.4vw,50px)}
.header__col02__menu__box>a{margin-right:clamp(14px,2.2vw,40px)}
}
@media only screen and (min-width:769px) and (max-width:1199px){
.list__pcnav>li:has(>a[href$="/contact/"]){display:none}
}
@media only screen and (min-width:769px) and (max-width:979px){
.list__pcnav>li:has(>a[href$="/clinic/"]){display:none}
}
@media only screen and (min-width:769px) and (max-width:899px){
.header__col01>a,.main__logo{width:184px}
.main__logo__catch{font-size:12px;letter-spacing:0}
.header__col02__menu__box>a.hdr_contact{width:88px}
}
@media only screen and (min-width:769px) and (max-width:1000px){
#treat-menu{transform:none;box-sizing:border-box;width:92vw;right:4vw}
}
@media only screen and (min-width:769px) and (max-width:1000px){
#treat-menu ul{transform:none}
}

/* FIX3-1105 施術ページの説明文（スマホ）：8px→16px */
@media only screen and (max-width:768px){
main.under .beauty__featur>p.item{font-size:16px;line-height:1.8;letter-spacing:.02em}
}
/* FIX3-1105 画面下の予約ボタン：#6db6d8（白文字2.3:1）→#2a7aa0（4.8:1） */
.hiro-fixed-cta .web{background:#2a7aa0}