/* サロンde医療（/medical-aesthetic 配下）のヘッダーに足すドロップダウン
 *
 * 発注元の指示（2026-08-17）:
 *   「オリジナルヘッダーのままでいい。単純にそのオリジナルヘッダーで
 *     参照先が足りてないので追加してほしい」
 *
 * 実測した状況:
 *   PC版のナビ（comp-mjmfvjbn3）は「サロンde医療／導入事例／お客様メリット／
 *   提携サロン様／コラム」の5項目しかなく、処方一覧・パートナーサービス・資料一覧へ行けない。
 *   （スマホ版はハンバーガー内に全項目があるのでPC版だけの問題）
 *
 *   横幅に余裕が無い（ナビ left:748px / CTAボタン left:1589px、ナビ実測809px）ため、
 *   項目を横に足すとCTAボタンにぶつかる。そこで「サロンde医療」にドロップダウンを付ける。
 *
 * 見た目は既存ヘッダーからの実測値に合わせている:
 *   明朝体 / 16px / letter-spacing 1.6px / 文字色 #0B2F5B
 */

.skr-ma-item {
  position: relative;
}

.skr-ma-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-top: 2px solid #0b2f5b;
  box-shadow: 0 10px 26px rgba(11, 47, 91, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 9999;
}

.skr-ma-item:hover > .skr-ma-sub,
.skr-ma-item:focus-within > .skr-ma-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.skr-ma-sub li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skr-ma-sub a {
  display: block;
  padding: 11px 22px;
  font-family: matisse, "ms mincho", "ヒラギノ明朝 pro w3", "hiragino mincho pro",
    "Yu Mincho", serif;
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1.5;
  color: #0b2f5b;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

.skr-ma-sub a:hover,
.skr-ma-sub a:focus-visible {
  background: #f1f5fa;
}

/* スマホ版はハンバーガー内に全項目が並んでいるので、このドロップダウンは出さない */
@media (max-width: 980px) {
  .skr-ma-sub { display: none; }
}

/* ============================================================
 * 処方一覧の料金表（2026-08-17）
 *
 * 発注元:「/medical-aesthetic/prescription-drugs は
 *          https://www.swift-clinic.com/price-list を参照」
 *
 * 「Price 料金表」セクションはWixアプリの埋め込みが切れて1064pxの空白だった。
 * .skr-dead-app で死んだ埋め込みを隠し、.skr-price-host で
 * セクションに固定されていた高さを解除してから中身を差し込んでいる。
 *
 * 配色はサロンde医療の実測値（navy #0B2F5B / gold #AC9367 / 明朝体）に合わせる。
 * ============================================================ */

.skr-dead-app { display: none !important; }

/* /partner の「PDF preview / パートナー様向けチラシ」（2026-09-03）
 *
 * 中のWixアプリ（#comp-mciiefll）が死んで、見出しの下が約700pxの空白になる。
 * 上の #comp-mg7nazno と同じアプリの別インスタンスで、44番が拾えていなかった2件目。
 * セクションの中身は見出し2行とその死んだアプリだけなので、セクションごと消す。
 * #comp-mciiefll はこの中にあるため、親を消せば足りる。
 *
 * チラシの導線は死なない。同じページに「医療提携資料やチラシなどのPDF販促物一式を
 * お渡しいたします」とあり、申し込み後にお渡しする運びになっている。
 *
 * PC/SP 両方に当てる（SPは9/3にhtml:has(.skr-spnav)付きで先に消していた）。
 * 実測: PC 4946 → 4048px（セクションの898pxちょうど。グリッドの行の残りは出ない）。 */
#comp-mc8ikos6 { display: none !important; }

.skr-price-host,
.skr-price-host [data-mesh-id] {
  height: auto !important;
  min-height: 0 !important;
}

.skr-price {
  position: relative;   /* Wixの背景レイヤーの下に潜らないように */
  z-index: 1;
  padding: 8px 0 64px;
  font-family: matisse, "ms mincho", "ヒラギノ明朝 pro w3", "hiragino mincho pro",
    "Yu Mincho", serif;
  color: #212121;
}

.skr-price__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.skr-price__lead {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 2;
  text-align: center;
}

.skr-price__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0 0 44px;
}

.skr-price__jump a {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  letter-spacing: .04em;
  color: #0b2f5b;
  text-decoration: none;
  border: 1px solid rgba(11, 47, 91, .3);
  border-radius: 100px;
  transition: background .2s, color .2s;
}

.skr-price__jump a:hover {
  background: #0b2f5b;
  color: #fff;
  border-color: #0b2f5b;
}

.skr-price__cat { margin: 0 0 44px; scroll-margin-top: 90px; }

.skr-price__ttl {
  margin: 0 0 14px;
  padding: 0 0 10px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #0b2f5b;
  border-bottom: 1px solid rgba(11, 47, 91, .2);
  position: relative;
}

.skr-price__ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 90px;
  height: 1px;
  background: #ac9367;
}

.skr-price__scroll { overflow-x: auto; }

.skr-price__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
  background: #fff;
}

.skr-price__table th {
  padding: 11px 12px;
  background: #0b2f5b;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: left;
  white-space: nowrap;
}

.skr-price__table td {
  padding: 12px;
  border-bottom: 1px solid rgba(11, 47, 91, .12);
  vertical-align: middle;
}

.skr-price__table tbody tr:nth-child(even) { background: #fafbfc; }

.skr-price__yen {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: #0b2f5b;
}

.skr-price__flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 12px;   /* 10pxだと小さすぎる。処方一覧ページにも同じものが出る */
  font-family: system-ui, sans-serif;
  letter-spacing: .02em;
  color: #a5501b;
  background: #fdf2e9;
  border: 1px solid #e8b98f;
  border-radius: 3px;
  white-space: nowrap;
}

.skr-price__notes {
  margin: 48px 0 0;
  padding: 26px 28px;
  background: #f6f7f9;
  border-left: 3px solid #ac9367;
}

.skr-price__notes h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #0b2f5b;
}

.skr-price__notes ul { margin: 0; padding-left: 1.2em; }

.skr-price__notes li {
  margin: 0 0 .55em;
  font-size: 13px;
  line-height: 1.9;
}

.skr-price__notes a,
.skr-price__more a { color: #0b2f5b; text-decoration: underline; }

.skr-price__more {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
}

@media (max-width: 700px) {
  .skr-price { padding: 4px 0 40px; }
  .skr-price__inner { padding: 0 14px; }
  .skr-price__table { font-size: 13px; min-width: 560px; }
  .skr-price__notes { padding: 20px 18px; }
}

/* 取り扱い状況により変わるものは料金を出さず、問い合わせに寄せる */
.skr-price__ask {
  text-align: center;
  color: #0b2f5b;
  font-size: 13px;
}

/* ============================================================
 * /medical-aesthetic に置く「どんなお薬を処方できるのか」（2026-09-02）
 *
 * 発注元:「問い合わせで同じ質問が来る。特に処方薬一覧が多い」
 *
 * 中身は .skr-price* を流用する（配色も組み方も同じもの）。
 * ただしあちらは Wix のセクションの中に入る前提で、背景も上下の余白も
 * 親のセクション任せになっている。こちらは独立した <section> として
 * 兄弟に差し込むので、そのぶんだけをここで足す。
 * 一覧そのものは /medical-aesthetic/prescription-drugs のまま。
 * ここは分類と例だけで、重複させない。
 * ============================================================ */

.skr-rx {
  /* ホストのセクションは bgLayers（position:absolute の紺の面）を持っている。
     位置指定が無いと地がその下に潜って、紺のまま出てしまう（実測）。
     .skr-price が z-index:1 で逃げているのと同じ手当てをここにもする。 */
  position: relative;
  z-index: 1;
  background: #f6f7f9;
  padding: 64px 0;
}

/* Wixのページは border-box を全体に効かせていない。
   スマホで表をカードに積み替えると、width:100% に padding が上乗せされて
   28px はみ出す（実測）。docs/ma-trouble-section.html と同じく明示する。 */
.skr-rx,
.skr-rx * { box-sizing: border-box; }

.skr-rx .skr-price { padding: 0; }

.skr-rx__kicker {
  margin: 0 0 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .24em;
  /* ブランドのゴールド #ac9367 は明るい地の上で 2.75:1 で読めない。
     文字用に一段落とす（#f6f7f9 の上で 5.11:1）。面はゴールドのまま。 */
  color: #806536;
  text-align: center;
}

.skr-rx__ttl {
  margin: 0 0 26px;
  font-family: matisse, "ms mincho", "ヒラギノ明朝 pro w3", "hiragino mincho pro",
    "Yu Mincho", serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .06em;
  color: #0b2f5b;
  text-align: center;
}

.skr-rx__table td a {
  color: #0b2f5b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skr-rx__cta-wrap { margin: 30px 0 0; text-align: center; }

.skr-rx__cta {
  display: inline-block;
  padding: 15px 34px;
  font-size: 15px;
  letter-spacing: .06em;
  color: #fff;
  background: #0b2f5b;
  border: 1px solid #0b2f5b;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.skr-rx__cta:hover { background: #fff; color: #0b2f5b; }

@media (max-width: 700px) {
  .skr-rx { padding: 44px 0; }
  .skr-rx__ttl { font-size: 21px; }
  /* 2列しかないので、横スクロールさせない。
     ただし320pxだと1列目の分類名が3行に割れて窮屈なので、
     行ごとのカードに積み替える（docs/ma-trouble-section.html と同じ組み方）。 */
  .skr-rx .skr-price__table { min-width: 0; }
  .skr-rx .skr-price__table,
  .skr-rx .skr-price__table tbody,
  .skr-rx .skr-price__table tr { display: block; }
  .skr-rx .skr-price__table thead { display: none; }
  .skr-rx .skr-price__table tr {
    margin: 0 0 12px;
    border: 1px solid rgba(11, 47, 91, .16);
    background: #fff;
  }
  .skr-rx .skr-price__table tbody tr:nth-child(even) { background: #fff; }
  .skr-rx .skr-price__table td { display: block; width: 100%; border: 0; padding: 10px 14px; }
  .skr-rx .skr-price__table td:first-child {
    background: #eef1f5;
    font-weight: 700;
    border-bottom: 1px solid rgba(11, 47, 91, .12);
  }
  .skr-rx__cta { display: block; padding: 14px 18px; }
}


/* ==================================================================
 * サロンde医療 スマホのメニュー（2026-09-03・作り直し）
 *
 * 前の方式（iframe の箱を親のCSSで伸縮させる）は、
 * 開いても箱が広がりきらず、メニューが72x64に切り取られた。
 * クロスフレームでサイズを操るのをやめ、
 * メニューの面を親のページに直接置く（50-ma-sp-nav.py が入れる）。
 *
 * もとの不具合（ここは実測済み）:
 *   ma-mobile-menu.html を読む iframe の箱が 320x624px で、
 *   iframe は中身が透明でもタップを吸うため、
 *   画面の上から686pxまで下の要素が押せなかった。
 *   その iframe はここで display:none にして、丸ごと無くす。
 *
 * すべて html:has(.skr-spnav) を条件にしている。
 * このメニューは _mobile 配下6枚にしか入れていないので、
 * PC版には一切当たらない（媒体クエリに頼らない）。
 * ================================================================== */

/* Wix のヘッダーは display では消せない。
   ランタイムが実行時に display:block !important をインラインで付けるため、
   CSSの !important でも勝てない。高さと位置で潰す。 */
html:has(.skr-spnav) #SITE_HEADER,
html:has(.skr-spnav) #SITE_HEADER-placeholder {
  position: absolute !important;
  top: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  z-index: -1 !important;
}

/* もとの iframe メニューは使わない。タップを吸う元凶ごと消す。
   ラッパーの id はページごとに違うので iframe から辿る。 */
html:has(.skr-spnav) div[id^="comp-"]:has(iframe[src*="ma-mobile-menu"]) {
  display: none !important;
}

/* ---- ハンバーガー ---- */
.skr-spnav__btn {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 44px;              /* タップ領域は44px確保する */
  height: 44px;
  padding: 9px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .82);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  z-index: 100000;
  -webkit-appearance: none;
  appearance: none;
}
.skr-spnav__btn > span {
  display: block;
  width: 100%;
  height: 3px;
  background: #1c1c1c;
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
html.skr-spnav-open .skr-spnav__btn > span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
html.skr-spnav-open .skr-spnav__btn > span:nth-child(2) { opacity: 0; }
html.skr-spnav-open .skr-spnav__btn > span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* ---- メニューの面 ---- */
.skr-spnav {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.skr-spnav[hidden] { display: none; }

.skr-spnav ul {
  list-style: none;
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  width: 100%;
}
.skr-spnav li { margin: 0 0 22px; }
.skr-spnav li:last-child { margin-bottom: 0; }

.skr-spnav a {
  display: inline-block;
  padding: 6px 8px;
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  font-size: 19px;
  line-height: 1.5;
  color: #101010;
  text-decoration: none;
}

.skr-spnav__sep {
  width: 120px;
  height: 1px;
  margin: 30px auto 24px !important;
  background: rgba(0, 0, 0, .18);
}
.skr-spnav__out a { font-size: 15px; color: #40474d; }

/* 開いている間は後ろを動かさない */
html.skr-spnav-open body { overflow: hidden !important; }

/* ===== スマホ版6枚の不自然な余白を消す（2026-09-03） =====
   Wixはセクションの高さを実行時にpxで固定し、メッシュの行も
   px で決める。中身より箱が大きいと、**最後の行が余りを全部吸う**。
   処方薬一覧では 2231px の空行ができていた（箱4193 / 中身1795）。
   高さの固定を外して、中身なりに縮める。PC版には当たらない。 */
html:has(.skr-spnav) section[id^="comp-"],
html:has(.skr-spnav) section[id^="comp-"] > [data-mesh-id$="inlineContent"],
html:has(.skr-spnav) section[id^="comp-"] > [data-mesh-id$="inlineContent"] > [data-mesh-id$="gridContainer"] {
  height: auto !important;
  min-height: 0 !important;
}


/* よくある質問の「問い」。処方薬一覧だけ欧文書体（avenir 20px）が当たり、
   和文グリフが無いのでシステムフォントに置き換わって浮いていた。
   他の5枚と同じ明朝16pxに揃える。 */
html:has(.skr-spnav) button[aria-expanded] h3 {
  font-family: matisse, "ms mincho", "hiragino mincho pro", "Yu Mincho", serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}