@charset "UTF-8";
/*
 * front-extra.css
 * フロントページ コンテンツの構造補完・微調整（手編集可）。
 * front.css（list.css をスコープ自動移植）に無い top.css 由来の構造（#wrap 中央寄せ等）と、
 * ヘッドレス確認しながらの差分修正をここに集約する。すべて .bp-front 配下にスコープ。
 */

/* SWELLがトップに付ける #content の上余白（Style.php: .top #content{padding-top:4em}）を打ち消す。
 * 本家にはこの隙間が無く、ヘッダー直下からコンテンツが始まる。
 * body.top #content で本家ルールより高い詳細度にして 0 に上書き（フロント限定で読込）。 */
body.top #content { padding-top: 0; }

/* 基準フォント・色（本家 body=81.3%/1.231≒13px・メイリオ系）。SWELL本文基準を打ち消す。 */
.bp-front {
	color: #2b2827;
	font-size: 13px;
	line-height: 1.231;
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* ============================================================
 * PC本文のSWELL/カスタムCSS漏れ中和（本家 top.css リセット相当）。
 * ヘッダー/フッターが #masthead* / #colophon* リセットで守られているのと同様、
 * コンテンツ(.c-pc-body)にも最小限のリセットを当てる。主な漏れ:
 *   - 全称 *{font-size:10px}（継承を壊し全要素を10px化）
 *   - body{font-weight:500}（本文が太る）
 *   - SWELL a{color:#1176d4} と a:hover{transform/背景}
 * これらを打ち消し、list.css の % 指定が本家どおり13px基準でカスケードするようにする。
 * ============================================================ */
.bp-front .c-pc-body { font-size: 13px; line-height: 1.231; font-weight: 400; color: #2b2827; }
.bp-front .c-pc-body * { font-size: 100%; font-weight: normal; }
.bp-front .c-pc-body a { color: #000; text-decoration: none; }
.bp-front .c-pc-body a:hover { color: #000; background-color: transparent; transform: none; }

/* top.css 由来の構造：#wrap で 1000px 中央寄せ（本家: #wrap-hidden > #wrap > #main） */
.bp-front #wrap { width: 1000px; margin: 0 auto; position: relative; }
.bp-front #article { float: left; width: 760px; }
.bp-front #article.list { float: none; width: 100%; }

/* ============================================================
 * PC本体 ⇔ SP本体 の表示切替。
 * ヘッダー/フッターのSP切替(site-chrome.css)が959pxなので、本体も同じ959pxで揃える。
 * （本家は本来UA判定で別ページだが、当サイトは1ページでレスポンシブに出し分ける）
 * ============================================================ */
.bp-front .c-sp-body { display: none; }
.bp-front .c-pc-body { display: block; }
@media (max-width: 959px) {
	.bp-front .c-pc-body { display: none; }
	.bp-front .c-sp-body { display: block; }
}

/* ============================================================
 * SP: JS未起動ウィジェットの静的フォールバック
 * （本家は swiper / bxslider を使うが、当面JS未読込のため見た目だけ整える）
 * ============================================================ */
/* ジャンルナビ(swiper)：横一列に並べる。
 * free-modeの margin:-500%!important / padding:500% を打ち消し、素のflex行にする。 */
.bp-front .c-sp-body .genre-nav { overflow-x: auto !important; padding: 0 8px; }
.bp-front .c-sp-body .genre-nav__lists {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
	justify-content: flex-start !important; width: auto !important; transform: none !important; gap: 6px;
	margin: 0 !important; padding: 0 !important;
}
.bp-front .c-sp-body .genre-nav__lists > li { display: block !important; width: auto !important; min-width: 5em; flex: 0 0 auto !important; }
/* メインビジュアル：スライダー廃止・1枚固定表示。
 * margin-bottom:30px は旧bxSlider時代の .bx-wrapper{margin-bottom:30px!important} の再現。 */
.bp-front .c-sp-body .mv-sp-wrapper { overflow: hidden; margin-bottom: 30px; }
.bp-front .c-sp-body #mv-bxs-sp { margin: 0; padding: 0; list-style: none; }
.bp-front .c-sp-body #mv-bxs-sp .mv-li img { width: 100%; height: auto; display: block; }

/* PCメインビジュアル：スライダー廃止・1枚固定表示。
 * front.css（自動生成）の旧スライダー比率 aspect-ratio:760/380 を打ち消し、
 * 画像本来の縦横比で表示する。 */
.bp-front .c-pc-body #mv { aspect-ratio: auto; margin: 0 0 7px; padding: 0; list-style: none; }

/* ============================================================
 * 美容クリニックtop（本家 common.css 由来）：
 *   セクション見出し .hd（グレー帯・太字）／太字 .bold ／
 *   緑ボタン .btn.btn-green（角丸20px）／余白・グリッドのユーティリティ。
 * front.css（list.css移植）には無いためここへ忠実移植する。
 * ※SP限定対応：PC(.c-pc-body)へ影響させないため、すべて .c-sp-body 配下へスコープする。
 * ============================================================ */
/* 見出し帯（common.css .hd） */
.bp-front .c-sp-body .hd {
	padding: 15px;
	color: #2b2827;
	font-weight: bold;
	background-color: #f5f5f1;
	/* 直前のボタン包み .col-xs-12 は float:left（bootstrap）。行(.row/clearfix)が無いため
	 * 未解除のフロートに見出しがめり込む。見出しで必ずフロートを解除して下から始める。 */
	clear: both;
}
.bp-front .c-sp-body .hd span { font-weight: normal; }

/* 人気キーワード見出しを Hタグ統一で h4→h3 に変更したため、本家の `h4.subtitle`（タグ依存）
 * 指定が外れる。同じ見た目をクラス基準で再指定してデザインを維持する。 */
.bp-front .c-sp-body .button-location .subtitle {
	margin: 40px 0 0 0; padding: 0; text-align: center;
	font-weight: bold; font-size: 14px; line-height: 1.4;
	color: #85ae90; background: none; border: none;
}

/* 余白ユーティリティ（common.css） */
.bp-front .c-sp-body .mt15 { margin-top: 15px; }
.bp-front .c-sp-body .mt50 { margin-top: 50px; }
.bp-front .c-sp-body .mb10 { margin-bottom: 10px; }
.bp-front .c-sp-body .mb30 { margin-bottom: 30px; }

/* bootstrap グリッド（最小限：ボタン包み <p class="col-xs-12">） */
.bp-front .c-sp-body .col-xs-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	width: 100%;
}

/* ボタン（bootstrap .btn 基底 ＋ common.css の上書き .btn/.btn-green） */
.bp-front .c-sp-body .btn {
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	padding: 6px 12px;
	font-size: 14px;
	color: #2b2827;
	border: 1px solid #ccc;      /* common.css: .btn{border-color:#CCC} */
	border-radius: 20px;         /* common.css: .btn{border-radius:20px} */
	text-decoration: none;
}
.bp-front .c-sp-body .btn-block { display: block; width: 100%; }
.bp-front .c-sp-body .pd12 { padding: 12px; }
.bp-front .c-sp-body .btn-green {
	position: relative;
	text-decoration: none;
	background-color: #9dbda6;
	color: #fff !important;
	border: solid 1px #9dbda6;
}
.bp-front .c-sp-body .btn-green:hover,
.bp-front .c-sp-body .btn-green:active {
	background-color: #fff;
	color: #9dbda6 !important;
}
/* 太字ユーティリティ（common.css .bold）。bootstrapの .btn{font-weight:normal} より後段に置き、
 * ボタンの bold クラス（例：もっと特集を見る）が太字になるようにする（本家と同じ勝敗）。 */
.bp-front .c-sp-body .bold { font-weight: bold; }


/* =============================================================
 * 監修者セクション（biyo.css .biyo-kansyusya を移植）
 * PC=3カラム / SP=1カラム角丸。`.c-*-body *` リセットより高詳細度で上書き。
 * ============================================================= */

/* --- PC（biyo.css @media min-width:769px 由来） --- */
.bp-front .c-pc-body .biyo-kansyusya { padding: 14px 0; }
.bp-front .c-pc-body .biyo-kansyusya ul { overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap; }
.bp-front .c-pc-body .biyo-kansyusya ul::after { content: ''; display: block; width: calc(33.33% - 5px); height: 0; }
.bp-front .c-pc-body .biyo-kansyusya li { border: solid 1px #aaaaaa; width: calc(33.33% - 5px); margin: 5px 0; padding: 7px; box-sizing: border-box; overflow: hidden; }
.bp-front .c-pc-body .biyo-kansyusya li a { display: block; overflow: hidden; text-decoration: none; }
.bp-front .c-pc-body .biyo-kansyusya li a:hover { text-decoration: none; }
.bp-front .c-pc-body .biyo-kansyusya .image { width: 80px; height: 57px; float: left; margin: 0 6px 0 0; }
.bp-front .c-pc-body .biyo-kansyusya .image img { width: 100%; height: 100%; object-fit: cover; }
.bp-front .c-pc-body .biyo-kansyusya .name { float: none; font-weight: bold; width: 144px; box-sizing: border-box; font-size: 110%; margin: 3px 0; white-space: nowrap; }
.bp-front .c-pc-body .biyo-kansyusya .content { display: block; }
.bp-front .c-pc-body .biyo-kansyusya .sub { background: #2b2827; color: #fff; padding: 5px; display: block; width: fit-content; margin-top: 5px; margin-bottom: 0px; font-size: 70%; clear: both; }

/* --- SP（biyo(1).css @media max-width:768px 由来） --- */
.bp-front .c-sp-body .biyo-kansyusya { padding: 0 10px; }
.bp-front .c-sp-body .biyo-kansyusya ul { overflow: hidden; }
.bp-front .c-sp-body .biyo-kansyusya li { border: solid 1px #e2e0df; border-radius: 20px; width: 100%; margin: 5px 0; padding: 7px; box-sizing: border-box; overflow: hidden; }
.bp-front .c-sp-body .biyo-kansyusya li a { display: block; overflow: hidden; text-decoration: none; }
.bp-front .c-sp-body .biyo-kansyusya li a:hover { text-decoration: none; }
.bp-front .c-sp-body .biyo-kansyusya .image { width: 80px; height: 57px; float: left; margin: 0 6px 0 0; border-radius: 10px; overflow: hidden; }
.bp-front .c-sp-body .biyo-kansyusya .image img { width: 100%; height: 100%; object-fit: cover; }
.bp-front .c-sp-body .biyo-kansyusya .name { float: left; font-weight: bold; width: calc(100% - 90px); box-sizing: border-box; font-size: 110%; margin: 0px 0; }
.bp-front .c-sp-body .biyo-kansyusya .content { display: block; }
.bp-front .c-sp-body .biyo-kansyusya .sub { background: #000; color: #fff; border-radius: 3px; padding: 5px; display: inline-block; margin-bottom: 9px; font-size: 70%; }


/* =============================================================
 * 特集/美容医療体験レポート/ドクターインタビューのバナーグリッド
 * （.feature-style 本体は front.css / front-sp.css に移植済み）
 * 本家は 760x380 固定のバナー画像だが、当方は記事アイキャッチ流用で
 * 縦横比がバラバラなため、本家と同じ 2:1 に切り抜いて段を揃える。
 * 枠は <a> 側に持たせる：壊れた画像（ローカルuploads未同期）は
 * img の aspect-ratio が効かず潰れるが、a なら枠が維持される。
 * ============================================================= */
.bp-front .c-pc-body .feature-style ul li a,
.bp-front .c-sp-body .feature-style ul li a {
	aspect-ratio: 760 / 380;
}
/* front.css / front-sp.css の img{height:auto} と同詳細度・後勝ちで上書き */
.bp-front .c-pc-body .feature-style ul li a img,
.bp-front .c-sp-body .feature-style ul li a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}