@charset "utf-8";
/* ============================================================
   女性LP 修正まとめ
   元のCSSは変更せず、この1枚に集約する。
   ============================================================ */

/* 電話番号をPCでも発信できるようにする（元CSSがPCで無効化していた） */
a[href^="tel:"] {
  pointer-events: auto !important;
  cursor: pointer;
}


/* ------------------------------------------------------------
   日本語の読みやすさ（案A＋B＋C）
   ・A ぶら下げ組み … 行末の「、」「。」を枠の外に逃がし、行末の凸凹を抑える
   ・B 約物のアキ詰め … 「、」「。」「（」が持つ余白を詰めて間延びを防ぐ
   ・C 文節での折り返し … 「頭皮環／境に」のような語の途中での改行をなくす
   いずれも対応していないブラウザでは無視されるだけで、崩れることはない。
   このブロックを消せば元の組みに戻る。
   ------------------------------------------------------------ */
body {
  /* ブラウザごとに対応がバラバラな指定は使わない。
     使うと Chrome と Safari で改行位置が食い違うため。
       hanging-punctuation … Safariのみ対応
       text-spacing-trim   … Chromeのみ対応
       word-break:auto-phrase … Chromeのみ対応
       text-wrap:pretty    … Safariで不具合
     折り返しは全ブラウザ共通で BudouX（inc/jp-linebreak.php）に任せる。 */
  line-break: strict;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   スマホ版の見出しが読みにくい問題
   ・文字間隔が広すぎて1行に収まらず、間延びして見えていた
   ・強調文字と続きの文が同じ行に流れ、「す…」だけが次行に落ちていた
   PC版（641px以上）は元のままにする。
   ------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  /* 文字間隔を詰める（元は 8px / 5.3px と広かった） */
  .factor-ttl            { letter-spacing: 2px; }
  .factor-ttl span       { letter-spacing: 1.5px; }
  .factor-ttl small      { letter-spacing: 1.5px; }
  .symptoms-wrap__ttl    { letter-spacing: 2px; }
  .symptoms-ttl strong   { letter-spacing: 1.5px; }

  /* 強調文字のあとで必ず改行し、「す…」だけが残らないようにする */
  .symptoms-ttl strong   { display: block; }

  /* 右に110pxの余白が入っていて使える幅が250pxしかなく、
     必要幅252pxに2px足りずに「す…」が次行へ落ちていた。
     スマホではこの余白に何も置かれていないので詰める。 */
  .symptoms-ttl span     { padding-right: 40px; }

  /* 店名：左に81pxの余白があり使える幅が289pxしかないため
     「スーパースカルプ発毛センター」（311px）が入らず「セン／ター」で
     切れていた。余白を詰めて、店名のあとで折り返すようにする。 */
  .symptoms-desc         { padding-left: 24px; }
}


/* ------------------------------------------------------------
   ヘッダーがメインビジュアルに重なる問題
   固定ヘッダーの高さぶんを main.wrapper の余白で確保しているが、
   その値（46px）が実際のヘッダー高さ（59〜96px）より小さく、
   13〜17px 食い込んでいた。画面幅ごとの実測値に合わせる。
   ------------------------------------------------------------ */
@media screen and (max-width: 899px) {
  main.wrapper { padding-top: 60px; }   /* ヘッダー 59px */
}
@media screen and (min-width: 900px) and (max-width: 1099px) {
  main.wrapper { padding-top: 64px; }   /* ヘッダー 63px */
}
@media screen and (min-width: 1100px) and (max-width: 1439px) {
  main.wrapper { padding-top: 97px; }   /* ヘッダー 96px */
}


/* ------------------------------------------------------------
   iPad縦向きでもスマホ用の縦長メインビジュアルを出す
   （このLPは640px以下だけ縦長MVだった）
   ------------------------------------------------------------ */
@media screen and (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .mv-img img {
    content: url("assets/img/mv-sp_02.jpg?v=1786200469");
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------------
   コース料金カードの並び（女性LP）
   カードは3枚。1150px以上は3列で収まるが、640〜1000px では
   2＋1に折り返して右下が空き、抜けたように見えていた。
   折り返す幅のときだけ中央寄せにして、最後の1枚を中央に置く。
   ------------------------------------------------------------ */
/* PC：カードは 25%（4コース時代の指定）のままで、3枚だと 75% しか
   埋まらず左に寄っていた。3列ぶんの幅に直して中央に収める。 */
@media screen and (min-width: 1031px) {
  .treatment-list__item {
    width: calc(33.3333% - 14px);
  }
}
/* 2＋1に折り返す幅では、最後の1枚を中央に置く */
@media screen and (min-width: 641px) and (max-width: 1030px) {
  .treatment-list {
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   店舗情報の地図が枠からはみ出す（PC・タブレット横）
   .clinic-list__map は :before の padding-bottom 36.375% で
   高さを確保しているのに、835px以上では iframe に固定 200px を
   指定していたため、確保した141pxを59pxはみ出していた。
   高さを親いっぱいにし、確保する高さ側を200pxに合わせる。
   ------------------------------------------------------------ */
@media screen and (min-width: 835px) {
  .clinic-list__map { min-height: 200px; }
  .clinic-list__map:before { padding-bottom: 0; height: 200px; }
  .clinic-list__map iframe { height: 100%; }
}

/* ------------------------------------------------------------
   改行の出し分け（他サイトの fixes.css と同じ定義）
   .sp-only-br … スマホだけ改行 / .pc-only-br … PCだけ改行
   ------------------------------------------------------------ */
.sp-only-br { display: none; }
.pc-only-br { display: inline; }
@media screen and (max-width: 768px) {
  .sp-only-br { display: inline; }
  .pc-only-br { display: none; }
}


/* ============================================================
   2026-08-11 修正
   ① メインビジュアル上の余白  ② 「ご存じでしょうか」1行化
   ③ 見出し・ラベルの視認性    ④ 要因図のバランス
   ============================================================ */

/* ------------------------------------------------------------
   ③-LP（女性LP）見出し・バッジの視認性

   淡いグリーン（#98cb80 / #b8dda7 / #b0d49f / #77b958）の上に
   白文字を置いていて、1.5〜2.4 しかコントラストがなかった。
   地色を一段濃くする（白文字側は変えない）。
   白地の上の淡い緑文字は、文字側を濃くする。
   ------------------------------------------------------------ */
.treatment-list__tag  { background-color: #468029 !important; }
.flow-list__wrap-btn  { background-color: #468029 !important; }
.plan-list__cricle    { background-color: #468029 !important; }
.plan-list__note-ttl  { background-color: #6f6560 !important; }
.recommend-list__card.recommend-card { background-color: #4f8a33 !important; }
.recommend-card__btn    { background-color: #3c6b28 !important; }
.recommend-card__txt-lg { color: #f2ff9e !important; }

.sign-list__sale,
.sign-list__sale span   { color: #2f6a1a !important; }
.sign-wrap__ttl small,
.sign-wrap__tel a strong,
.reasons-list__wrap-ttl span,
.merit-main__ct-ttl strong { color: #3f7a24 !important; }
.reasons-list__wrap-tag { color: #6e6e6e !important; }
.faq-anchor a.js-anchor { color: #4f6b42 !important; }

/* 淡緑地(#adbfa5)の見出しは文字を濃くする */
.sec-faq .c-ft--en,
.sec-faq .c-ft--jp,
.sec-faq .faq-ttl { color: #2f4227 !important; }


/* ============================================================
   女性LP の見やすさ改善（2026-08-12）
   ① 写真の上の文字が読めない  ② 料金の円の並び
   ③ 初めての方へのご案内カード  ④ フッターのロゴ
   ============================================================ */

/* ------------------------------------------------------------
   ① 「スーパースカルプ発毛センター新橋店では…」
      明るい写真の上に濃いグレーの文字が乗っていて読めなかった。
      写真側を少し落として、文字を白に。
   ------------------------------------------------------------ */
.sec-merit .merit-main { position: relative; }
/* もとは写真に文字が焼き込まれていて、明るい背景に濃い文字で読めなかった。
   文字なしの店内写真に差し替え、HTML側の文字を白で出す。 */
.sec-merit .merit-main { position: relative; }
.sec-merit .merit-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 28, 18, .54);
  pointer-events: none;
  z-index: 1;
}
.sec-merit .merit-main__ct {
  /* もとは clip-path: inset(50%) で完全に隠されていた（画像側に文字があったため）。
     写真を文字なしに差し替えたので、ここで表に出す。 */
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92%, 1040px) !important;
  height: auto !important;
  clip-path: none !important;
  clip: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.sec-merit .merit-main__ct,
.sec-merit .merit-main__ct :is(p, h3, span, budoux-ja, small) { color: #fff !important; }
.sec-merit .merit-main__ct :is(strong, em) {
  color: #c3ef7d !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6) !important;  /* 白いにじみを消す */
}
.sec-merit .merit-main__ct-ttl { margin: 0 !important; }
@media screen and (max-width: 768px) {
  .sec-merit .merit-main__ct p { font-size: 17px !important; line-height: 1.6; }
  .sec-merit .merit-main__ct strong { font-size: 32px !important; }
}


/* 「女性のための」は明るい黄緑にして浮かせる */
.sec-merit .merit-main__ct { z-index: 2; }


/* ------------------------------------------------------------
   ② 料金の円（カウンセリング ¥0 など）
      淡い緑地に白い輪郭だけで、文字も薄く読みにくかった。
      円の中を白くして、文字を濃くする。下が切れていたので余白も足す。
   ------------------------------------------------------------ */
.sign-list {
  padding: 26px 0 30px !important;
  align-items: stretch;
}
/* もとは淡い緑地に白い輪郭の円だけで、中の文字がほとんど読めなかった。
   円の背景画像をやめ、白いカードにして文字を濃くする。 */
.sign-list__item {
  background-color: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 24px 12px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sign-list__item::before {
  background-image: none !important;
  background-color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(60, 80, 45, .12);
  width: 100% !important;
  height: 100% !important;
}
.sign-list__ttl { color: #3f3a38 !important; font-weight: 500; margin: 0 !important; }
.sign-list__price,
.sign-list__price strong { color: #2f6a1a !important; }
.sign-list__item small,
.sign-list__note { color: #4d6b3a !important; }
.sign-list__price { margin: 0 !important; }
/* 注記が円の外に置かれる設計だったので、カードの中に収める */
.sign-list__note {
  position: static !important;
  margin: 4px 0 0 !important;
  transform: none !important;
  white-space: normal;
}
@media screen and (max-width: 768px) {
  /* スマホは4つ横並びだと1枚あたりが狭すぎて文字がはみ出すので2列にする */
  .sign-list {
    flex-wrap: wrap !important;
    gap: 10px;
    padding: 20px 14px 24px !important;
  }
  .sign-list__item {
    width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    margin: 0 !important;
    padding: 18px 10px !important;
  }
}

/* ------------------------------------------------------------
   ③ 「初めての方へのご案内」カード
      本部公式にそろえて「初回限定」を丸バッジにする。
   ------------------------------------------------------------ */
/* scaleX が二重にかかって横に潰れ、読めなくなっていた */
.recommend-card__txt-main-wrap--sm,
.recommend-card__txt-main-wrap--sm * {
  transform: none !important;
  font-size: 16px !important;
}
.recommend-card__txt-main-wrap--sm {
  display: inline-block;
  padding: 6px 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  line-height: 1.3;
  letter-spacing: .06em;
}
.recommend-card__txt-main-extended { font-size: inherit !important; }
.recommend-card__txt-lg { letter-spacing: .01em; }
@media screen and (max-width: 768px) {
  /* スマホで「¥6,600（税込）」が2行に折れていたので1行に収める */
  .recommend-card__txt-lg {
    font-size: 26px !important;
    white-space: nowrap;
  }
}


/* ------------------------------------------------------------
   ④ フッターのロゴ
      薄い緑の帯に白いロゴが乗っていて、ほとんど見えなかった。
      帯を濃い緑にして、白のロゴがはっきり出るようにする。
   ------------------------------------------------------------ */
footer .footer-link { padding: 24px 0 !important; }
/* 帯の色は ::before（画面いっぱいの薄い緑）が持っているので、そちらを濃くする */
footer .footer-link::before {
  background-color: #3f6b28 !important;
  background-image: none !important;
}


/* ============================================================
   ヘッダー下の隙間と、ご案内カードの余白（2026-08-12）
   ============================================================ */

/* ヘッダーは 93.5px、本文の padding-top は 95px で 1.5px ずれていた。
   MV を上に食い込ませて隙間を消す。 */
.wrapper > .sec-mv { margin-top: -2px !important; }
@media screen and (max-width: 768px) {
  /* スマホはヘッダー 53.75px に対して padding-top が 60px */
  .wrapper > .sec-mv { margin-top: -6.5px !important; }
}

/* ------------------------------------------------------------
   「初めての方へのご案内」カード
   要素の間隔がばらばらで詰まって見えたので、余白を整える。
   ------------------------------------------------------------ */
.recommend-card {
  padding: 6px !important;
  border-radius: 12px;
  overflow: hidden;
}
.recommend-card__body {
  padding: 14px 18px !important;
  margin: 0 !important;
}
.recommend-card__txt-sub {
  padding: 0 !important;
  margin: 0 0 10px !important;
}
.recommend-card__txt-main { margin: 0 !important; line-height: 1.35; }
.recommend-card__txt-main-wrap--sm { margin: 14px 0 12px !important; }
.recommend-card__txt-lg { margin: 0 !important; display: inline-block; }
.recommend-card__btn {
  margin: 20px auto 0 !important;
  padding: 13px 26px !important;
  border-radius: 999px;
  line-height: 1.35;
}
.recommend-card__img { margin-left: 14px; }
.recommend-card__img img { border-radius: 8px; }
@media screen and (max-width: 768px) {
  .recommend-card__img { margin-left: 0; }
  /* 幅が狭く、見出しの上下の飾り線がはみ出していたので消す */
  .recommend-card__txt-sub::before { display: none !important; }
  .recommend-card__txt-sub {
    margin: 0 0 8px !important;
    font-size: 14px !important;
  }
  .recommend-card__body { padding: 12px 8px !important; }
  .recommend-card__txt-main { font-size: 25px !important; }
  .recommend-card__txt-main-wrap--sm { margin: 10px 0 8px !important; }
  .recommend-card__btn {
    margin: 14px auto 0 !important;
    padding: 11px 20px !important;
  }
}


/* ログイン中は管理バーのぶんヘッダーを下げる。
   他ページ（TOP・男性LP）と同じ対応。これが無いと管理バーの裏に潜り、
   その 32px / 46px が MV との隙間として見えていた。 */
@media screen and (min-width: 783px) {
  body.admin-bar header { top: 32px !important; }
}
@media screen and (max-width: 782px) {
  body.admin-bar header { top: 46px !important; }
}