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

/* ------------------------------------------------------------
   電話番号をPCでも発信できるようにする
   元CSSは @media (min-width:769px) で a[href*="tel:"] を
   pointer-events:none にしており、PCでは押せなかった。
   ------------------------------------------------------------ */
a[href^="tel:"] {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Instagram の写真一覧
   枠の比率を Instagram のグリッド表示（縦長）に合わせる。
   元CSSは 1:1 に切っており上下が切れていた。
   写真は管理画面「Instagram写真」から追加できる。
   ------------------------------------------------------------ */
.insta {
  grid-template-columns: repeat(4, 1fr);   /* PCは4列。16枚なら4段でぴったり揃う */
}
.insta__item a {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: #f4f0ea;
  transition: opacity .2s;
}
.insta__item a:hover {
  opacity: .85;
}
.insta img {
  height: auto;
  aspect-ratio: 263 / 314;   /* Instagram の写真と同じ縦長 */
}
@media screen and (max-width: 480px) {
  .insta {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ------------------------------------------------------------
   コラム一覧をアイキャッチ付きカードにする（男性HPと同じ表示）
   ------------------------------------------------------------ */
.column--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.column--card .column__item {
  border: 1px solid #e6ded0;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.column--card .column__item > a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}
.column--card .column__item > a:hover {
  opacity: .82;
}
.column--card .column__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: #fbf7f1;
  overflow: hidden;
}
.column--card .column__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column--card .column__body {
  display: block;
  padding: 16px 18px 20px;
}
.column--card .column__date {
  color: #b08f4c;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.column--card .column__cat {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #6c9048;
  color: #fff;
  font-size: 11.5px;
}
.column--card .column__title {
  margin: 10px 0 0;
  font-family: "Noto Serif JP", "Shippori Mincho", "游明朝", YuMincho, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
}
@media screen and (max-width: 640px) {
  .column--card {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .column--card .column__title {
    font-size: 15px;
  }
}



/* ------------------------------------------------------------
   日本語の読みやすさ（案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;
}

/* ------------------------------------------------------------
   before / after の2枚組で、見出し帯の文字数によって
   画像の位置が上下にずれる問題
   帯が1行のものと2行のものが並ぶと、2行側の画像だけ下がっていた。
   グリッドで「帯・画像・説明文」の各段の高さを左右で揃える。
   （帯は上下中央に置くので、1行でも見た目は変わらない）
   ※ 元CSSが長いセレクタで指定しているため、同じ形で上書きする。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap {
    display: grid;
    grid-template-columns: 45.6% 45.6%;
    grid-template-rows: auto auto auto;
    justify-content: space-between;
  }
  div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    width: auto;   /* 元CSSの width:45.6% を打ち消す（列幅はグリッド側で決める） */
  }
  /* span と figure を親グリッドの段に直接乗せる */
  div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img {
    display: contents;
  }
  div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   コース料金の「回数／施術内容」で、値の2行目以降が
   ラベルの下に回り込んで表として読めなくなっていた。
   ラベルと値を横並びの2列にして、値は値の列の中だけで折り返すようにする。
   （スマホ幅のみ。PCは元のまま）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .course__list li {
    display: flex;
    align-items: flex-start;
    gap: .6em;
  }
  .course__list li b {
    flex: 0 0 auto;
    margin-right: 0;
  }
}

/* ------------------------------------------------------------
   スマホ版のメインビジュアルを画面の幅に合わせる
   縦長のSP用ビジュアルを、左右を切らずに全部見せる。
   高さは画像の比率どおりに決まる。PC版は元のまま。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  #KEY figure {
    margin: 0;
  }
  #KEY figure img {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* ------------------------------------------------------------
   タブレット幅（769〜936px）でヘッダーの予約ボタンが画面からはみ出す問題
   ヘッダーの .nav_box は最低937px必要で、iPad縦では収まらない。
   スマホ版と同じ「下部固定バー」に切り替える（スマホ用の指定を流用）。
   937px以上はPC版のまま。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 936px) {
  header#siteheader div.inner div.nav_box { position:fixed;left:0;bottom:0;z-index:9997;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.12);justify-content:space-between;gap:6px }
  header#siteheader div.inner div.nav_box div.tel_btn { width:auto;flex:1 }
  header#siteheader div.inner div.nav_box div.reserve_btns { width:auto;flex:2;gap:6px }
  header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a,header#siteheader div.inner div.nav_box div.tel_btn a { width:100% }
  header#siteheader div.inner div.nav_box .c-hbtn--tel,header#siteheader div.inner div.nav_box .c-hbtn--mail,header#siteheader div.inner div.nav_box .c-hbtn--line { display:flex;align-items:center;justify-content:center;gap:6px;height:52px;aspect-ratio:auto;border-radius:6px }
  header#siteheader div.inner div.nav_box .c-hbtn__sp { display:flex !important;align-items:center;justify-content:center;gap:6px }
  header#siteheader div.inner div.nav_box .c-hbtn__ico,header#siteheader div.inner div.nav_box .c-ico--hand { position:static !important;left:auto !important;top:auto !important;width:20px !important;transform:none !important }
  header#siteheader div.inner div.nav_box .c-hbtn__label,header#siteheader div.inner div.nav_box .c-hbtn__splabel { position:static !important;left:auto !important;top:auto !important;transform:none !important;font-size:13px !important;letter-spacing:0 !important }
  body { padding-bottom: 70px; }
}


/* ------------------------------------------------------------
   タブレット幅：下部固定バーの中身もスマホ版の見た目に合わせる
   （PC用と スマホ用の表示が二重に出て重なっていたため）
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 936px) {
  header#siteheader div.inner div.nav_box { max-width: 430px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
  header#siteheader div.inner div.nav_box .c-hbtn--tel { aspect-ratio:1/1;background:#757272;color:#fff }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__pc { display:none }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__sp { display:block }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-ico--hand { position:absolute;left:30cqw;top:16.3636cqw;width:40cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__splabel { position:absolute;left:50%;transform:translateX(-50%);top:67.4545cqw;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;line-height:1;letter-spacing:-0.2273cqw;white-space:nowrap }
  header#siteheader div.inner div.nav_box .c-hbtn--mail, header#siteheader div.inner div.nav_box .c-hbtn--line { aspect-ratio:1/1;border-radius:0 }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__arrow, header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__arrow { display:none }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__label, header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__label { left:50% !important;transform:translateX(-50%);font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;top:67.4545cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__ico { left:30cqw;top:17.2727cqw;width:40.9091cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__label { letter-spacing:-0.3636cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__ico { left:26.3636cqw;top:13.6364cqw;width:48.1818cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__label { letter-spacing:.8182cqw }
  /* メニュー行は2段に折り返して収める */
  .gnav__list { flex-wrap: wrap; justify-content: center; }
  .gnav__link { padding: 0 12px; font-size: 13px; }
}


/* ------------------------------------------------------------
   iPad縦向きでもスマホ用の縦長メインビジュアルを出す
   これまで縦長MVは768px以下だけで、iPad（769〜1024px）では
   PC用の横長MVのままだった。縦画面のときだけ縦長MVに切り替える。
   （横向きタブレット・PCは横長MVのまま）
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  #KEY figure img.switch {
    content: url("images/key_sp.png?v=1786115747");
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------------
   表示・改行の出し分け用（共通）
   sp-only-br … スマホだけで改行 / pc-only-br … PCだけで改行
   sp-hide … スマホでは隠す / pc-hide … PCでは隠す
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .sp-only-br { display: none; }
  .pc-hide    { display: none; }
}
@media screen and (max-width: 768px) {
  .pc-only-br { display: none; }
  .sp-hide    { display: none; }
}

/* ------------------------------------------------------------
   「ご存じでしょうか」が2行に割れる（PC版）
   左右の点線が190pxずつあり、文字の幅（259px）が入らず
   「ご存じでし／ょうか」と割れていた。点線を短くして1行に収める。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .t-prob__lead::before,
  .t-prob__lead::after {
    width: 60px;
  }
}

/* ------------------------------------------------------------
   「やめた理由」の下の余白を半分にする（SP版のみ）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* 元CSSが div#PROBLEM div.inner div.problem_body で指定しているため合わせる */
  div#PROBLEM div.inner div.problem_body {
    padding-bottom: 38px;   /* 75px の半分 */
  }
}

/* ------------------------------------------------------------
   Menu 03「必要なものを届ける」が2行に割れる（SP版）
   9文字で12px足りなかった。文字間を詰めて1行に収める。
   Menu 01・02（7文字）はちょうど1行なので触らない。
   PC版は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* 元CSSが長いセレクタで指定しているため、同じ形で上書きする */
  div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block.menu03 div.feature_menu_title p {
    letter-spacing: 0;
    /* 画面幅に応じて縮め、320pxの端末でも1行に収まるようにする */
    font-size: min(22px, 5.3vw);
  }
}

/* ------------------------------------------------------------
   施術メニュー（.feature_wrapper）の下の余白をなくす
   元CSSは padding: 25px 0 40px。下の40pxを削除する。
   SP版のみ。PC版は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper {
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------
   ヘッダーのメニューを見やすくする（PC版）
   ・ロゴ行とメニュー行の境目をはっきりさせる
   ・項目の仕切り線を見える濃さにし、高さを抑えて上品に見せる
   ・マウスを乗せた項目に下線を出して現在位置を分かりやすくする
   SP版はドロワーメニューなので対象外。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .gnav-wrap {
    background: #f7f2e8;
    border-top-color: #d8cdb5;
    box-shadow: inset 0 -1px 0 #e6ded0;
  }
  /* 仕切り線：全高の線をやめ、中央に短い線を置く */
  .gnav__item + .gnav__item {
    border-left: none;
  }
  .gnav__item + .gnav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #cbbb9c;
  }
  /* マウスを乗せた項目に下線 */
  .gnav__link {
    position: relative;
  }
  .gnav__link::before {
    content: "";
    position: absolute;
    left: 1.15em;
    right: 1.15em;
    bottom: 7px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .18s ease;
  }
  .gnav__link:hover::before {
    transform: scaleX(1);
  }
}

/* ------------------------------------------------------------
   発毛実績（ギャラリー）ページの一覧
   ビフォーアフター画像をそのまま並べる。
   画像内に文字が入っているため、幅を広めに取って読めるようにする。
   ------------------------------------------------------------ */
.case {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.case__item {
  border: 1px solid #e6ded0;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.case__img {
  display: block;
  width: 100%;
  height: auto;
}
.case__note {
  max-width: 1080px;
  margin: 22px auto 0;
  color: #8b7a62;
  font-size: 13px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .case {
    grid-template-columns: 1fr;   /* スマホは1列にして画像内の文字を読めるサイズに */
    gap: 18px;
  }
  .case__note {
    padding: 0 18px;
    text-align: left;
  }
}

/* サロン情報：本文の横に店舗案内カードを置く（PCのみ2カラム） */
.store__img { margin: 28px auto 0; max-width: 420px; }
.store__img img { width: 100%; height: auto; display: block; border-radius: 6px; }
@media (min-width: 900px) {
  .store { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }
  .store__txt { min-width: 0; }
  .store__img { margin: 0; max-width: none; position: sticky; top: 100px; }
}

/* ------------------------------------------------------------
   フッターの整理（見出し＋仕切り線）
   元は4列のリンクが見出しなしで並び、どのグループが何なのか
   分からなかった。列に見出しを付け、縦の仕切り線で区切る。
   性別の切り替えは埋もれていたので丸ボタンにして独立させる。
   ------------------------------------------------------------ */
.ftr__nav { flex-wrap: wrap; }
.ftr__col { flex: 1 1 0; min-width: 0; }
/* 2列目以降に仕切り線と余白 */
.ftr__col + .ftr__col {
  padding-left: 32px;
  border-left: 1px solid rgba(139, 122, 98, .22);
}
.ftr__colTtl {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(139, 122, 98, .22);
  color: #8b7a62;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
}
/* 性別の切り替えボタン */
.ftr__cross { margin: 18px 0 0; }
.ftr__crossBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border: 1px solid #b08f4c;
  border-radius: 999px;
  color: #8a6d2f;
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ftr__crossBtn::after { content: "→"; font-size: 12px; }
.ftr__crossBtn:hover { background: #b08f4c; color: #fff; text-decoration: none; }

/* タブレット以下は2列。仕切りは縦線をやめ、行間で分ける */
@media screen and (max-width: 900px) {
  .ftr__nav { gap: 24px 28px; }
  .ftr__col { flex: 1 1 calc(50% - 14px); }
  .ftr__col + .ftr__col { padding-left: 0; border-left: 0; }
}
/* スマホは1列に積む（アコーディオンにはせず全部見せる） */
@media screen and (max-width: 600px) {
  .ftr__col { flex: 1 1 100%; }
  .ftr__cross { margin-top: 16px; }
  .ftr__crossBtn { width: 100%; justify-content: center; padding: 14px 18px; }
}


/* ------------------------------------------------------------
   スタッフ紹介「お客様へ」の本文が12pxのままで小さかった。
   クラスの無い <p> に効かせて、他ページの本文（15px前後）に合わせる。
   ------------------------------------------------------------ */
.detail p:not([class]) {
  font-size: 15.5px;
  line-height: 1.95;
}
.detail p.detail__lead { font-size: 21px; line-height: 1.85; }
.detail .detail__h3 { font-size: 20px; }
@media screen and (max-width: 768px) {
  .detail p:not([class]) { font-size: 15px; line-height: 1.9; }
  .detail p.detail__lead { font-size: 17.5px; line-height: 1.8; }
  .detail .detail__h3 { font-size: 17px; }
}


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

/* ------------------------------------------------------------
   ① 固定ヘッダーとコンテンツの間に出るベージュの帯を消す

   components.css の main_container の padding-top がヘッダーの
   実寸より大きく、その差が body の地色(#fcf7e1)の帯として見えていた。
   幅帯ごとの実測ヘッダー高にそろえる。
     〜768px    ヘッダー 55px    / padding 55px  → 元から隙間なし
     769〜936px ヘッダー 115.69px / padding 136px → 20.3px の隙間
     937px〜    ヘッダー 133px    / padding 136px → 3px の隙間
   （936/937 の境目はグローバルナビが折り返す幅。フォント環境で
     多少前後するが、ずれても最大17pxヘッダーに潜るだけで
     ベージュの帯は出ない側に倒してある）
   端数（0.3〜1px）で細い線が残らないよう、実寸より1px小さくして
   必ず「わずかに潜る」側に倒してある。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  body div.main_container { padding-top: 115px; }
}
@media screen and (min-width: 937px) {
  body div.main_container { padding-top: 132px; }
}

/* ログイン中は管理バー(32px)にヘッダー上端が潜り込むので、
   ヘッダーごと管理バーの下へ送る。
   padding-top は増やさない（html に margin-top:32px が付いて
   body ごと下がるため、増やすと32px分そのまま隙間になる）。
   管理バーが46px＋非固定になる782px以下では触らない。 */
@media screen and (min-width: 783px) {
  body.admin-bar header#siteheader { top: 32px; }
}


/* ------------------------------------------------------------
   ③-共通 リンク・ラベル・ボタンの視認性

   金色 #b08f4c は淡いベージュ地の上でコントラスト2.8〜3.0しかなく
   読みにくかったので、一段濃い #7a5f28 にそろえる。
   塗りボタンも地色を濃くして白文字が沈まないようにする。
   ※ LINEの緑はブランド色なので地色は変えず、文字を太くするだけ。
   ------------------------------------------------------------ */
.breadcrumb a,
.sec__en,
.store__data dd a,
.insta__more a,
.contact__label,
.course__num,
.course__unit,
.course__list b,
.flowlist__m,
.column__date,
.point__title small,
.formbox__privacy a,
.card__more a          { color: #7a5f28 !important; }
.course__plabel        { color: #6b5c46 !important; }
dt.clinic-list__info-ttl { color: #6d6560 !important; }

.sec__cta a,
.formbox__btn button,
.contact__item:not(.contact__item--line) .contact__val--sm a { background-color: #8a6d2f !important; }
.lpbtn                 { background-color: #55743a !important; }
.formbox__list dt .any { background-color: #6f6a5c !important; }

/* 「詳しくはこちら」系の緑ボタン・コラムのカテゴリタグ（#6c9048 は白文字で3.67） */
header#siteheader .header_right a.blank_btn--lp,
header#siteheader .header_right a.blank_btn--more,
a.c-more__btn,
.column__cat           { background-color: #55743a !important; }

dl.clinic-list__info-item > dt.clinic-list__info-ttl { color: #6d6560 !important; }

.c-hbtn__label,
.c-cta__label          { font-weight: 700 !important; }
.c-cta__badge,
.c-ctabtn--line .c-ctabtn__badge { color: #1a7a30 !important; }
.c-ctabtn--mail .c-ctabtn__badge { color: #c25400 !important; }
.clinic-list__info dt,
.clinic-list__info-item dt { color: #6d6560 !important; }


/* ------------------------------------------------------------
   ② 「ご存じでしょうか」が2行に割れる（577〜768pxの帯）

   769px以上は点線を60pxに縮めて1行化済みだが、それ未満の幅では
   文字が30pxのまま点線が約49px×2あり、はみ出して折り返していた。
   「文字は折り返さない／点線は入る分だけ縮む」に変える。
   ------------------------------------------------------------ */
.t-prob__lead { white-space: nowrap; }
.t-prob__lead::before,
.t-prob__lead::after {
  flex-shrink: 1;
  min-width: 10px;
}


/* ------------------------------------------------------------
   ③-女性ページ 見出し・ラベルの視認性
   ------------------------------------------------------------ */

/* 帯ラベル（flag）4種。
   .t-solve__flag / .t-egf__flag / .t-care__flag は文字色の指定が
   漏れていて、地色の上に本文色 #333 がそのまま乗っていた。
   （.t-dark__flag だけ白文字だったので、4種とも白文字にそろえる） */
.t-dark__flag,
.t-solve__flag,
.t-egf__flag,
.t-care__flag {
  color: #fff !important;
  font-weight: 500 !important;
}
.t-dark__flag  { background-color: #8a6d2f !important; }
.t-solve__flag { background-color: #55743a !important; }
.t-egf__flag   { background-color: #87663a !important; }
.t-care__flag  { background-color: #8a6d2f !important; }
.t-care__flags span { background-color: #8a6d2f !important; }

/* 茶・金系の地に白文字が沈んでいたラベル */
.feature_menu_title { background-color: #8f6835 !important; }
.campaign01_head    { background-color: #9a7748 !important; }
.campaign01_head .f-yellor,
.campaign01_head .f-yellor em { color: #ffe9c9 !important; }
.t-trial__list li   { background-color: #7a6849 !important; }
.feature_case_item.after .feature_case_img span { background-color: #b57722 !important; }
.t-band             { background-color: #55743a !important; }
.t-band__no small   { color: #fff !important; }
.t-egf__side b      { color: #46612c !important; }

/* 淡い地の上のオレンジ・金の文字 */
.title_box > span          { color: #b5752a !important; }
#FLOW .common_title > span { color: #96591a !important; }
.f_red                     { color: #96591a !important; }


/* ------------------------------------------------------------
   ④ 「女性の薄毛」の要因図（TOP・Q&A内）のバランス

   6個を横一列に並べていたため、環境によって最後の1個だけが
   2行目に落ち、左右非対称になっていた。
   「要因5つ → ▼ → 女性の薄毛」の2段組にして、どの幅でも
   形が崩れないようにする。地色もばらばら（青灰・茶・グレー）
   だったので、要因＝同色／結論＝濃色に整理し、あわせて
   白文字が読める濃さにした。
   ------------------------------------------------------------ */
.t-qa__factors {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}
/* 要因(order:0) → 区切りの▼(order:1・幅100%で改行) → 結論(order:2) */
.t-qa__factors > li.is-center { order: 2; }
.t-qa__factors::after {
  content: "▼";
  order: 1;
  flex: 0 0 100%;
  margin: 2px 0 0;
  color: #97a3b0;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}
.t-qa__factors > li {
  background-color: #5f6d7d !important;
  color: #fff !important;
  min-width: 7.5em;
  justify-content: center;
  text-align: center;
}
.t-qa__factors > li.is-center {
  background-color: #3d4956 !important;
  min-width: 9em;
}
@media screen and (max-width: 768px) {
  .t-qa__factors > li,
  .t-qa__factors > li.is-center { min-width: 0; }
}


/* ------------------------------------------------------------
   メインビジュアル直下のキャッチ画像（2026-08-12 追加）
   PC・SPで画像を出し分ける（.visible_pc / .visible_sp はテーマ既存）
   ------------------------------------------------------------ */
.mv-catch { line-height: 0; }
.mv-catch img { width: 100%; height: auto; margin: 0; }


/* ------------------------------------------------------------
   追従CTA（PC・右下）とヘッダーの整理（2026-08-12）

   ヘッダーに要素が多かったので、メール予約・LINE予約を
   ヘッダーから外して画面右下の追従ボタンに移した（PCのみ）。
   スマホは従来どおりヘッダー内に置いたまま（下部固定バーがないため）。
   ------------------------------------------------------------ */

/* PC：ヘッダーの予約ボタンを隠す */
@media screen and (min-width: 769px) {
  #siteheader .reserve_btns { display: none !important; }
  /* 電話ブロックが右端に来るので、右の詰まりを整える */
  #siteheader .nav_box { justify-content: flex-end !important; gap: 0 !important; }
  #siteheader .tel_btn { margin-right: 0 !important; }
}

/* 追従CTA本体 */
.side-cta {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-cta__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 208px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.side-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
  filter: brightness(1.05);
  text-decoration: none;
  color: #fff;
}
.side-cta__ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-cta__ico svg { width: 100%; height: 100%; display: block; }
.side-cta__txt { display: flex; flex-direction: column; line-height: 1.15; }
.side-cta__note {
  font-size: 11px;
  letter-spacing: .02em;
  opacity: .92;
}
.side-cta__label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}
.side-cta__btn--mail { background-color: #b8431f; }
.side-cta__btn--line { background-color: #06c755; }
.side-cta--men .side-cta__btn--mail { background-color: #c25400; }

/* スマホでは出さない（ヘッダー内の予約ボタンをそのまま使う） */
@media screen and (max-width: 768px) {
  .side-cta { display: none; }
}


/* ------------------------------------------------------------
   ヘッダーのUI調整（2026-08-12）
   ・ボタンの角を丸くして押せることを分かりやすく
   ・グローバルナビは区切りを整え、今いるページと
     マウスが乗った項目が分かるようにする
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  /* 「男性はこちら」「詳しくはこちら」を丸ボタンに */
  header#siteheader .header_right a.blank_btn {
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  header#siteheader .header_right a.blank_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
    filter: brightness(1.06);
  }

  /* ナビ：区切り線を薄く、余白を広げる */
  .gnav-wrap { border-top: 1px solid #e6ded0; }
  .gnav__list { align-items: stretch; }
  .gnav__item + .gnav__item { border-left: 1px solid #e0d7c4; }
  .gnav__link {
    position: relative;
    padding: 0 20px !important;
    display: flex;
    align-items: center;
    transition: color .2s ease, background-color .2s ease;
  }
  .gnav__item:hover > .gnav__link { background-color: rgba(0, 0, 0, .03); }
}

@media screen and (min-width: 769px) {
  .gnav__item:hover > .gnav__link { color: #55743a; }
}


/* ヘッダーのバランス調整・その2（2026-08-12）
   ・ナビが横に間延びしたので、項目そのものを広げて隙間を詰めた
   ・上段はロゴ＝左／ボタン＝中央／電話＝右の3分割にして、
     真ん中に空いていた余白をなくした */
@media screen and (min-width: 769px) {
  .gnav__link { padding: 0 20px !important; }
  .gnav__item { flex: 0 1 auto; }

  header#siteheader div.inner div.header_right {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    padding-right: 56px !important;
  }
  header#siteheader div.inner div.header_right h1 { margin-right: 0 !important; }
  /* ボタン2つはひと固まりにして、ロゴと電話の中間に置く */
  header#siteheader div.inner div.header_right a.blank_btn:first-of-type { margin-left: auto !important; }
  header#siteheader div.inner div.header_right a.blank_btn + a.blank_btn { margin-left: 12px !important; }
  header#siteheader div.inner div.nav_box { flex: 0 0 auto !important; }
}


/* ------------------------------------------------------------
   追従CTA・ヘッダーの仕上げ（2026-08-12）
   ------------------------------------------------------------ */

/* --- 追従CTA --- */
.side-cta {
  right: 22px;
  bottom: 26px;
  gap: 8px;
  animation: sideCtaIn .5s .35s ease both;
}
@keyframes sideCtaIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.side-cta__btn {
  position: relative;
  min-width: 232px;
  padding: 10px 44px 10px 10px;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 10px 24px rgba(0, 0, 0, .16);
  letter-spacing: .02em;
}
.side-cta__btn::before {                 /* うっすら内側のハイライト */
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.side-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .16), 0 16px 32px rgba(0, 0, 0, .22);
}
/* アイコンは白丸に載せて見やすく */
.side-cta__ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.side-cta__ico svg { width: 20px; height: 20px; }
.side-cta__btn--mail .side-cta__ico { color: #c14b33; }
.side-cta__btn--line .side-cta__ico { color: #40b150; }
.side-cta--men .side-cta__btn--mail .side-cta__ico { color: #ef7000; }
.side-cta--men .side-cta__btn--line .side-cta__ico { color: #35a500; }

.side-cta__note {
  font-size: 10.5px;
  letter-spacing: .06em;
  opacity: .9;
}
.side-cta__label { font-size: 16.5px; }

/* 右端の矢印。ホバーで少し進む */
.side-cta__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 14px;
  margin-top: -7px;
  transition: transform .22s ease;
}
.side-cta__arrow svg { width: 100%; height: 100%; display: block; }
.side-cta__btn:hover .side-cta__arrow { transform: translateX(3px); }


/* --- ヘッダー --- */
@media screen and (min-width: 769px) {

  /* 下にうっすら影を落として、コンテンツとの境目をはっきりさせる */
  header#siteheader {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .045);
  }

  /* ロゴ：ホバーでほんの少し反応させる */
  header#siteheader div.inner div.header_right h1 a {
    display: inline-block;
    transition: opacity .2s ease;
  }
  header#siteheader div.inner div.header_right h1 a:hover { opacity: .72; }

  /* ボタンの矢印をホバーで進める */
  header#siteheader .header_right a.blank_btn::after { transition: transform .22s ease; }
  header#siteheader .header_right a.blank_btn:hover::after { transform: translateX(3px); }

  /* 電話ブロック：数字と営業時間の主従をはっきりさせる */
  header#siteheader .tel_btn .c-hbtn__note {
    letter-spacing: .01em;
    opacity: .82;
  }

  /* ナビ：区切りを細く上品に */
  .gnav__item + .gnav__item { border-left: 1px solid rgba(0, 0, 0, .09); }
  .gnav__link { font-weight: 500; }

  /* ドロップダウン：角を丸め、影を付けて浮かせる */
  .gnav__sub {
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    overflow: hidden;
    border: none !important;
  }
  .gnav__sub li a {
    transition: background-color .18s ease, padding-left .18s ease;
  }
  .gnav__sub li a:hover { padding-left: 22px; }
}


/* ------------------------------------------------------------
   追従CTA：メインビジュアルを過ぎてから出す（2026-08-12）
   読み込み直後は隠しておき、#KEY（下層は .page-kv）が
   画面から出たら .is-show が付いてふわっと現れる。
   ------------------------------------------------------------ */
.side-cta {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .38s ease, transform .38s ease, visibility .38s;
}
.side-cta.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ヘッダー：ロゴとボタンが近づきすぎないよう最小の間隔を確保 */
@media screen and (min-width: 769px) {
  header#siteheader div.inner div.header_right h1 { margin-right: 80px !important; }
  header#siteheader div.inner div.header_right a.blank_btn + a.blank_btn { margin-left: 18px !important; }
}


/* 管理バー表示中のヘッダー位置は上のJSが実測で合わせる。
   JSが動かない場合の保険として、PC幅の初期値だけ残しておく。 */
@media screen and (max-width: 782px) {
  body.admin-bar header#siteheader { top: 46px; }
}


/* 店内の様子の動画（サロン情報ページ・2026-08-12 追加） */
.salon-tour { max-width: 320px; margin: 0 auto 34px; }
.salon-tour video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  background: #000;
}
.salon-tour__note {
  margin-top: 9px;
  font-size: 12.5px;
  text-align: center;
  color: #6b6b6b;
}

/* ---- 2026-08-21 Menu04（最後にめぐりを整える）は1項目のため、他ブロックと同じ列幅のまま中央に置く ---- */
@media screen and (min-width: 769px) {
  div#FEATURE div#FEA02 div.feature_menu_block.menu04 div.feature_menu_list {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  div#FEATURE div#FEA02 div.feature_menu_block.menu04 div.feature_menu_list div.feature_menu_item {
    width: calc((100% - 20px) / 2) !important;
  }
}

/* ------------------------------------------------------------
   特徴01「02.マイクロスコープで頭皮を見る」 2026-08-31
   左の血流動画を毛髪構造図（静止画）に差し替えたので、
   右の動画と縦横比を揃えて下端を合わせる。説明文2行は削除済み。
   ------------------------------------------------------------ */
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img figure img[src*="w-hair-structure"] {
  width: 100% !important;
  aspect-ratio: 610 / 433 !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item.after div.feature_case_img figure video {
  width: 100% !important;
  aspect-ratio: 610 / 433 !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* ------------------------------------------------------------
   Menu01「脊椎マッサージ」の注釈（※当店オリジナル） 2026-09-01
   注釈が入った側だけ画像が下がるので、反対側に同じ高さの空行を作って揃える。
   ------------------------------------------------------------ */
div#FEATURE div.feature_menu_block.menu01 div.feature_menu_list div.feature_menu_item p.menu_note {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: #8a6d2f !important;
}
@media screen and (min-width: 769px) {
  div#FEATURE div.feature_menu_block.menu01 div.feature_menu_list div.feature_menu_item:first-child div.feature_menu_subtitle::after {
    content: "\00a0";
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ------------------------------------------------------------
   フッターの性別切替ボタン 2026-09-01
   SP（〜600px）で width:100% に padding/border が加算され、
   右へ23pxはみ出していた。border-box で内側に収める。
   ------------------------------------------------------------ */
.ftr__crossBtn { box-sizing: border-box !important; }