@charset "UTF-8";
/* =====================================================================
   wp-override-common.css ｜ LP系ページ共通の「WP / Cocoon / style_common.css 打ち消し」
   ---------------------------------------------------------------------
   TOP(front-page.php) と ヒゲ(page-hige.php) で共通して必要な、ページ非依存の
   「上書き打ち消し」だけを集約した共有ファイル。
   - スコープは body.front-top-page（TOP）／ body.wp-hige-page（ヒゲ）の2クラス。
     新規LP下層を追加する場合は、各セレクタにそのページの body クラスを足すだけでよい。
   - functions.php で対象ページ限定 enqueue（is_front_page / is_page('hige')）。
     各ページの style-wp.css はこのファイルを依存(deps)に持ち、後から読み込んで上書きできる。
   - ここに入れるのは「全ページに漏れる共通CSSの打ち消し」のみ。
     ページ固有のデザイン（背景画像・#mens-* breakout・フッターメニュー等）は各 style-wp.css に残す。
   出典: TOP実装 2bcc360a（mens-wp-top/style-wp.css）から共通分を分離。
   ===================================================================== */

/* === body自体の幅是正（最重要）。最適化/プラグイン由来の body{position:absolute} を打ち消す。
   absolute のままだと body が内容幅に shrink-to-fit し、画面右端に大きな余白が出る（崩れの根本原因）。
   静的配置に戻すことで body がビューポート全幅になり、以降の全幅化と #mens-* breakout が正しく効く。 === */
body.front-top-page,
body.wp-hige-page {
   position: static !important;
   width: 100% !important;
}

/* === SP: FVの縦スクロール「引っかかり」解消（body の二重スクロールコンテナ化を防ぐ）===
   SP幅で body に overflow-x:hidden が掛かると、CSS仕様上 overflow-y(visible) の used値が
   auto に変換され、body 自体がスクロールコンテナになる。結果 html(ビューポート)と body の
   二重スクロールが生じ、FV上で慣性が競合してスクロールが引っかかる
   （黒背景が内側スクロールバーを隠していただけで、スクロールバーの実体は元から2本）。
   overflow-x:clip はスクロールコンテナを生成せず overflow-y を auto に変えないため、
   横はみ出しのクリップを保ったまま二重スクロールだけを解消できる。
   ※ overflow:clip は iOS Safari 16+。iOS15以前も対象にする場合は
     html{overflow-x:hidden} ＋ body{overflow-x:visible !important} 方式へ切替。 === */
@media (max-width: 780px) {

   body.front-top-page,
   body.wp-hige-page {
      overflow-x: clip !important;
   }
}

/* === このページ限定の全幅化（外側コンテナ1056px〜内側.main744px〜.entry-contentまで全部100%に） === */
body.front-top-page #container,
body.front-top-page #container.wrap,
body.front-top-page .container__inner,
body.front-top-page #content,
body.front-top-page #content-in,
body.front-top-page #content-in.wrap,
body.front-top-page #main,
body.front-top-page .main,
body.front-top-page .article,
body.front-top-page .entry-content,
body.wp-hige-page #container,
body.wp-hige-page #container.wrap,
body.wp-hige-page .container__inner,
body.wp-hige-page #content,
body.wp-hige-page #content-in,
body.wp-hige-page #content-in.wrap,
body.wp-hige-page #main,
body.wp-hige-page .main,
body.wp-hige-page .article,
body.wp-hige-page .entry-content {
   width: 100% !important;
   max-width: 100% !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
   float: none !important;
}

/* === Cocoonコンテンツラッパー（#content / #content-in / #main）の全幅化＋上下余白も完全リセット === */
body.front-top-page #content,
body.front-top-page #content-in,
body.front-top-page #main,
body.wp-hige-page #content,
body.wp-hige-page #content-in,
body.wp-hige-page #main {
   width: 100% !important;
   max-width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   float: none !important;
}

/* ヒゲ限定：パンくず（#breadcrumb）を全幅に。
   詳細度 body.wp-hige-page div#breadcrumb (0,1,1,2) で Cocoon の .wrap 等の幅指定に勝つ。 */
body.wp-hige-page div#breadcrumb {
   width: 100%;
}

/* === サイドバー非表示 === */
body.front-top-page #sidebar,
body.wp-hige-page #sidebar {
   display: none !important;
}

/* === .entry-content の上下余白（Cocoonデフォルト margin-top:18px / margin-bottom:54px）を除去。
   これが残るとFV上端に隙間ができ、透明化した #main 越しに body のダーク背景が黒帯として見える。 === */
body.front-top-page .entry-content,
body.wp-hige-page .entry-content {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}

/* =====================================================================
   サイト共通CSS /css/style_common.css 由来の「本文への漏れ」打ち消し
   ---------------------------------------------------------------------
   style_common.css は header.php(102行) で全ページに生<link>で読み込まれる旧サイト用CSS。
   要素名だけの広く効くセレクタ（footer{...} / .article h2{...} 等）が新レイアウトの
   Cocoonフッターや本文(.article)に漏れて当たるため、対象ページ限定で無効化する。
   ★将来 header.php で当該ページ時に style_common.css を外せば、このブロックは丸ごと削除可。
   ===================================================================== */

/* style_common.css:3576  footer{ position:absolute; bottom:-50px; width:100vw }
   → Cocoon の <footer id="footer"> が絶対配置になりFV/本文に重なる問題を、通常フローへ戻す。 */
body.front-top-page #footer,
body.front-top-page footer,
body.wp-hige-page #footer,
body.wp-hige-page footer {
   position: static !important;
   bottom: auto !important;
   width: auto !important;
}

/* =====================================================================
   Cocoonフッター（.footer_menu / #footer）の共通正規化
   ---------------------------------------------------------------------
   .footer_menu = テーマフッターのナビ領域（SITE CONTENTS / CLINIC LIST 都道府県 /
   OTHER MENU / FOR WOMEN / SNS）。#content と並ぶ単独 div で、.container__inner 直下に置かれる。
   元々この調整は mens-wp-top（TOP）だけにあり、ヒゲには無かったため、ヒゲのフッターが崩れていた。
   → 両ページ共通へ移設し、TOPと同じフッター表示を適用する。
   ・dd 左余白：仕切り線(border-left)へのリンク密着を解消（.pc-footer=都道府県は二重インデント回避で除外）。
   ・.footer_menu / SNS の下マージン除去＋#footer の上下20px：白メニュー→e8e8e8帯の隙間を詰める。 */
body.front-top-page .footer_menu dd:not(.pc-footer),
body.wp-hige-page .footer_menu dd:not(.pc-footer) {
   padding-left: 20px !important;
}

body.front-top-page .footer_menu,
body.wp-hige-page .footer_menu {
   margin-bottom: 0 !important;
}

body.front-top-page .footer_menu_sns_icon_area,
body.wp-hige-page .footer_menu_sns_icon_area {
   margin-bottom: 0 !important;
}

body.front-top-page #footer,
body.wp-hige-page #footer {
   padding-block: 20px 180px;
   /* Cocoon css/footer.css の .footer{margin-top:20px} を打ち消し、白帯と灰色帯の間に
      body の暗いテクスチャが帯状に覗くのを防ぐ（TOP/ヒゲ共通で隙間ゼロにする）。 
下部にAIチャットボット用の余白付与*/
   margin-top: 0 !important;
}

/* フッター内容ラッパー
タブレット対応 */
body.front-top-page .footer__inner,
body.wp-hige-page .footer__inner {
   background-color: #FFFFFF;
}

/* ヒゲ限定①：LP本体ラッパーを透明化（TOPと同じ）。
   ---------------------------------------------------------------------
   ヒゲの #main は Cocoon 既定の白背景のままで、TOP のような透明化指定が無かった。
   そのため、暗い背景前提でデザインされた半透明ボックス（例：CLINIC の .clinic__box は
   background:rgba(0,0,0,.3)）が、白地に重なって「灰色」に見えていた。
   → TOP同様にラッパーを透明化し、body の暗色テクスチャを透かす。これで .clinic__box 等が
     TOPと同じ暗い見た目になる（※白背景を敷くと灰色化するため、白ではなく透明が正解）。 */
body.wp-hige-page #content,
body.wp-hige-page #content-in,
body.wp-hige-page #content-in.wrap,
body.wp-hige-page #main,
body.wp-hige-page .main,
body.wp-hige-page .article,
body.wp-hige-page .entry-content {
   background: transparent !important;
}

/* ヒゲ限定②：フッターだけ明るくする（LPの暗テクスチャがフッターにも透けるため）。
   .footer_menu に不透明な白背景を敷き、上下の隙間（margin）を白い padding へ置換。
   ※ LP本体（#main 等）は①で透明のまま＝暗テクスチャ維持。フッター領域(.footer_menu/#footer)だけを白くする。
   ── フッター簡素化（SNSのみ）後の余白調整 ──
   メニュー非表示で予約バナー（旧75px上余白の前提）が無くなったため、白帯が間延びする。
   SNSアイコンを白帯内で上下均等に収めるよう padding を上下対称（40px）へ縮小する。 */
body.wp-hige-page .footer_menu {
   background-color: #FFFFFF;
   margin-top: 0 !important;
   padding-top: 40px;
   padding-bottom: 40px;
}

/* 上記に合わせ、SNS 行が持つ theme style.css の margin-top:50px を打ち消す
   （余白は .footer_menu の padding で一元管理し、白帯を上下均等に保つ）。 */
body.wp-hige-page .footer_menu_sns_icon_area {
   margin-top: 0 !important;
}

body.wp-hige-page #footer {
   margin-top: 0 !important;
}

/* TOP もヒゲと同様に：簡素化後のフッター白帯を全幅・上下均等(40px)に整える。
   style_common.css の .footer_menu{margin:75px 0} と SNS の margin-top:50px を打ち消し、
   .footer_menu を全幅白背景にして SNS を中央へ収める（ヒゲと同一の見た目）。 */
body.front-top-page .footer_menu {
   background-color: #FFFFFF;
   margin-top: 0 !important;
   padding-top: 40px;
   padding-bottom: 40px;
}

body.front-top-page .footer_menu_sns_icon_area {
   margin-top: 0 !important;
}

/* SP（≤480px）対策：theme style.css の @media{ .footer_menu{display:none} } により
   SP では .footer_menu ごと消え、残した SNS まで非表示になる。
   簡素化後の .footer_menu の中身は SNS のみなので、対象2ページに限り SP でも表示し、
   PC/SP で同一の SNS を用いる（従来 SP は .footer-widgets-mobile 側の SNS だったが、
   そのウィジェット領域は PHP で非表示にしたため、こちらへ一本化する）。 */
@media screen and (max-width: 480px) {

   body.front-top-page .footer_menu,
   body.wp-hige-page .footer_menu {
      display: block !important;
   }
}

/* ※ SP（≤480px）では下部メニュー（法人概要／承諾書PDF／お問い合わせ／女性の医療脱毛）は出さない方針。
   theme style.css の @media{ .navi-footer{display:none} } のままにする（SP非表示）。
   PC では tmp/navi-footer.php の4リンクを表示する。 */

/* 追従CTA対策：コピーライト帯の下に出る「黒帯」を解消し、追従CTA分のグレー余白を確保。
   ---------------------------------------------------------------------
   原因：style_common.css の SP ルール（@media max-width:480px）
     .wrap { padding-bottom:220px; margin-bottom:-200px }（#container / #footer-in に適用）
     .container__inner { padding-bottom:60px }
   が旧フッターレイアウト用に残っており、#footer（グレー）より下に透明な余白を作る。
   SP は body::before の固定ダーク背景が透けるため、その余白が「黒帯」として見える。
   対策：対象2ページに限り、これら下余白をゼロ化（黒帯解消）。
   さらに #footer に追従CTA（.floating-banner = .footer-banner__cta 15.385vw + 上下padding 20px）
   の高さ分のグレー余白(padding-bottom)を付け、固定CTAがコピーライトに被らないようにする。 */
@media screen and (max-width: 1024px) {

   body.front-top-page #container,
   body.wp-hige-page #container,
   body.front-top-page #footer-in,
   body.wp-hige-page #footer-in {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
   }

   body.front-top-page .container__inner,
   body.wp-hige-page .container__inner {
      padding-bottom: 0 !important;
   }

   /* 追従CTA高さ分のグレー余白（CTA高さ ≒ 15.385vw + 20px。被り防止に少し大きめ +40px）。 */
   body.front-top-page #footer,
   body.wp-hige-page #footer {
      padding-bottom: calc(15.385vw + 40px) !important;
   }

   .copyright {
      margin-top: 0;
   }
}

@media screen and (max-width: 834px) {
   .navi-footer-in>.menu-footer li.menu-item {
      width: 100%;
   }
}

/* SP で SNS を正しく中央寄せ：.footer__inner の固定幅1056pxを流動化する
   （PC は最大1056pxで中央のまま。固定幅だと SP で右へはみ出し中央からずれる）。 */
body.front-top-page .footer__inner,
body.wp-hige-page .footer__inner {
   width: 100% !important;
   max-width: 1056px;
   box-sizing: border-box;
}

/* style_common.css:230,238  .article h2{背景#2c2c2c/余白/15pt}, .article h4{16pt}
   → 見出しに漏れる font-size をデザイン継承へ戻す（背景・余白は下の本文リセットで解除）。
     デザイン側 #section .class が詳細度で優先されるため崩れない。 */
body.front-top-page .article h2,
body.front-top-page .article h4,
body.wp-hige-page .article h2,
body.wp-hige-page .article h4 {
   font-size: inherit;
}

/* === Cocoon本文向けCSS（背景帯・余白・行間・リスト・枠）との競合をリセット ===
   特異度(0,2,2)でCocoon(0,1,1)に勝ち、デザイン側の #section .class (1,1,0) には負ける設計＝デザイン保持 */
body.front-top-page .entry-content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure, blockquote, address, table, hr),
body.wp-hige-page .entry-content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure, blockquote, address, table, hr) {
   background: none;
   border: none;
   box-shadow: none;
   margin: 0;
   padding: 0;
   line-height: 1.5;
}

body.front-top-page .entry-content :is(h1, h2, h3, h4, h5, h6)::before,
body.front-top-page .entry-content :is(h1, h2, h3, h4, h5, h6)::after,
body.wp-hige-page .entry-content :is(h1, h2, h3, h4, h5, h6)::before,
body.wp-hige-page .entry-content :is(h1, h2, h3, h4, h5, h6)::after {
   content: none;
}

body.front-top-page .entry-content :is(ul, ol),
body.wp-hige-page .entry-content :is(ul, ol) {
   list-style: none;
}

body.front-top-page .entry-content img,
body.wp-hige-page .entry-content img {
   border: none;
   box-shadow: none;
}

/* SP版フッターの選べる3部位メニュー */
.price-parts-box {
   color: #333;
}

.price-parts-caution-bottom {
   color: #333;
}

.footer-widgets-mobile .bnr_area_button {
   color: #333;
}

/* ハンバーガーメニュー「三」「×」の配色*/
.has-logo-button .menu-button {
   color: #333;
}

/* style_common.css の打ち消し。
   --------------------------------------------------------------------- */
body.wp-hige-page .before-after__case-label {
   opacity: 1 !important;
}

body.wp-hige-page .option-menu__inner {
   background-color: transparent !important;
}

body.wp-hige-page .article h4 {
   margin: 0 !important;
   padding: 0 !important;
}

/*style.cssの打ち消し。
   --------------------------------------------------------------------- */
a:hover {
   opacity: 1;
}


/* === Cocoon 既定の「トップへ戻る」ボタン（#go-to-top）を対象2ページで非表示 ===
   footer.php が tmp/button-go-to-top.php を全ページ共通で出力するため、
   見本サイト準拠の .pagetop と二重表示になる。TOP/ヒゲでは Cocoon 既定を消し、
   .pagetop（縦線＋PAGE TOP）に一本化する。JS(.go-to-top)側の処理は要素非表示で無害化。 */
body.front-top-page #go-to-top,
body.wp-hige-page #go-to-top {
   display: none !important;
}

/* パンクズリスト
   --------------------------------------------------------------------- */

body.wp-hige-page div#breadcrumb {
   width: 100%;
   position: absolute;
   top: 180px;
   z-index: 2;
   background: transparent;
   color: #fff;
}

.breadcrumb-caption {
   color: #fff;
}

@media screen and (max-width: 1023px) {
   body.wp-hige-page div#breadcrumb {
      top: 108px;
   }
}

@media screen and (max-width:768px) {
   body.wp-hige-page div#breadcrumb {
      top: 68px;
   }
}

@media screen and (max-width:480px) {
   body.wp-hige-page div#breadcrumb {
      top: 40px;
   }
}