/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* --- 読みやすさのための本文サイズ ------------------------------------ */

/* Salient親テーマの body{font-size:14px; line-height:26px} を全要素が継承しており、
   日本語の本文としては小さい（現行 me-labo.com は16px）。見出しは個別指定なので
   ここを上げても影響しない。1箇所で全体が揃う */
html body {
	font-size: 17px;
	line-height: 30px;
}

/* Salient が .main-content td を14pxで固定しているので表も揃える */
#ajax-content-wrap table.melabo-price td,
#ajax-content-wrap table.melabo-price th,
#ajax-content-wrap table.melabo-docs td,
#ajax-content-wrap table.melabo-docs th {
	font-size: 17px;
	line-height: 1.8;
}

@media (max-width: 690px) {
	html body {
		font-size: 16px;
		line-height: 28px;
	}
}

/* --- 現行 me-labo.com の見た目に合わせる調整 --------------------------- */

/* 全画面メニューの背景。Salient は #slide-out-widget-area-bg.fullscreen を
   巨大な「アクセント色を敷く」ルール群に含めており、Theme Options の
   header-slide-out-widget-area-background-color では変えられない。
   現行サイトは黒背景・白文字なので、詳細度で勝って上書きする */
html body #slide-out-widget-area-bg.fullscreen,
html body #slide-out-widget-area-bg.fullscreen .bg-inner {
	background-color: #000;
}

html body #slide-out-widget-area.fullscreen .off-canvas-menu-container ul.menu > li > a {
	font-size: 32px;
}

/* ヘッダー右の TEL / MAIL。MAIL は現行と同じ枠線ピル */
#header-outer .nectar-header-text-content .melabo-tel {
	color: #000;
	font-size: 15px;
	white-space: nowrap;
}

#header-outer .nectar-header-text-content .melabo-mail {
	display: inline-block;
	margin-left: 16px;
	padding: 5px 22px;
	border: 1px solid #000;
	border-radius: 999px;
	color: #000;
	font-size: 14px;
	line-height: 1.6;
}

#header-outer .nectar-header-text-content .melabo-mail:hover {
	background: #000;
	color: #fff;
}

/* フッター。現行は中央揃えでリンク2本＋SETロゴだけ */
#footer-outer .melabo-footer {
	text-align: center;
}

#footer-outer .melabo-footer .melabo-footer-links a {
	display: inline-block;
	margin: 0 1em;
	color: #000;
	font-size: 13px;
}

#footer-outer .melabo-footer .melabo-footer-logo {
	margin-top: 1.5em;
}

/* Salient の .row .col img に負けて伸びないよう詳細度を上げておく */
#footer-outer .melabo-footer .melabo-footer-logo img {
	width: 140px;
	height: auto;
}

/* TOPの施設カード3枚。ロゴの縦横比がバラバラ（830×141 / 700×350 / 842×595）なので
   高さで揃える。Salient の .row .col img{height:auto} に負けないよう詳細度を上げている */
#ajax-content-wrap img.melabo-card-logo {
	max-height: 130px;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto 1.2em;
}

/* 施設ページ（me-labo1/2/3）共通 */

/* ヒーローの白ロゴ */
#ajax-content-wrap img.melabo-hero-logo {
	margin-bottom: 2rem;
}

/* 設備アイコン。元画像は187×187だが大きすぎるので揃える */
#ajax-content-wrap img.melabo-service-icon {
	width: 105px;
	height: auto;
	margin: 0 auto 0.6em;
}

/* 空室表 */
#ajax-content-wrap table.melabo-price {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

#ajax-content-wrap table.melabo-price th,
#ajax-content-wrap table.melabo-price td {
	padding: 0.7em 0.5em;
	border-bottom: 1px solid #ccc;
	text-align: center;
}

#ajax-content-wrap table.melabo-price thead th {
	border-bottom: 2px solid #000;
	font-weight: 500;
}

/* me-labo2 のヒーロー。現行サイトと同じく4枚を回し、その上にロゴ＋キャッチを重ねる */
#ajax-content-wrap .melabo-hero-slider > .col {
	position: relative;
}

#ajax-content-wrap .melabo-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 2;
	pointer-events: none;
}

#ajax-content-wrap .melabo-hero-overlay p,
#ajax-content-wrap .melabo-hero-overlay h2,
#ajax-content-wrap .melabo-hero-overlay h5 {
	margin: 0 0 0.6em;
	color: #000;
}

#ajax-content-wrap .melabo-hero-overlay img.melabo-hero-logo-img {
	width: 240px;
	height: auto;
}

@media (max-width: 690px) {
	#ajax-content-wrap .melabo-hero-overlay img.melabo-hero-logo-img { width: 150px; }
	#ajax-content-wrap .melabo-hero-overlay h5 { display: none; }
}

/* APPLICATION のステップ見出し。番号バッジ＋見出し＋下罫線（現行と同じ形） */
#ajax-content-wrap h3.melabo-step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding-bottom: 0.6em;
	border-bottom: 2px solid #003f96;
	margin-bottom: 1.4em;
}

#ajax-content-wrap h3.melabo-step .melabo-step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: #003f96;
	color: #fff;
	font-size: 0.75em;
	flex: 0 0 auto;
}

/* 必要書類の表 */
#ajax-content-wrap table.melabo-docs {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto 1em;
	font-size: 14px;
}

#ajax-content-wrap table.melabo-docs th,
#ajax-content-wrap table.melabo-docs td {
	border: 1px solid #ccc;
	padding: 1em;
	vertical-align: top;
}

#ajax-content-wrap table.melabo-docs th {
	background: #f6f6f6;
	text-align: center;
	font-weight: 500;
}

@media (max-width: 690px) {
	#ajax-content-wrap table.melabo-docs,
	#ajax-content-wrap table.melabo-docs tbody,
	#ajax-content-wrap table.melabo-docs tr,
	#ajax-content-wrap table.melabo-docs td { display: block; width: 100%; }
	#ajax-content-wrap table.melabo-docs thead { display: none; }
}

/* FAQ。現行はアコーディオンではなく、Q/Aバッジ付きのフラットな一覧 */
#ajax-content-wrap .melabo-faq-item {
	margin-bottom: 3em;
}

#ajax-content-wrap .melabo-faq-q,
#ajax-content-wrap .melabo-faq-a {
	display: flex;
	gap: 0.8em;
	align-items: flex-start;
}

#ajax-content-wrap .melabo-faq-q {
	font-size: 22px;
	font-weight: 700;
	align-items: center;
	padding-bottom: 0.7em;
	border-bottom: 1px dotted #bbb;
	margin-bottom: 1.2em;
}

#ajax-content-wrap .melabo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}

#ajax-content-wrap .melabo-badge-q { background: #41678c; }
#ajax-content-wrap .melabo-badge-a { background: #ff3333; }

@media (max-width: 690px) {
	#ajax-content-wrap .melabo-faq-q { font-size: 18px; }
	#ajax-content-wrap .melabo-badge { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }
}

/* LPのお問い合わせフォーム（CF7）。Salientのフォームスタイルだと
   1行入力欄が縦に伸びるので高さを戻す */
#ajax-content-wrap .wpcf7-form input[type="text"],
#ajax-content-wrap .wpcf7-form input[type="email"],
#ajax-content-wrap .wpcf7-form input[type="tel"] {
	height: 3em;
	min-height: 0;
	padding: 0 1em;
}

#ajax-content-wrap .wpcf7-form .melabo-form-row {
	margin-bottom: 1.6em;
}

#ajax-content-wrap .wpcf7-form .melabo-form-row > label {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 500;
}

#ajax-content-wrap .wpcf7-form .req {
	color: #ff3333;
	font-size: 0.85em;
	margin-left: 0.3em;
}

/* ラジオは横並びで折り返す */
#ajax-content-wrap .wpcf7-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.6em;
}

#ajax-content-wrap .wpcf7-form .wpcf7-list-item {
	margin: 0;
}

#ajax-content-wrap .wpcf7-form .melabo-form-privacy,
#ajax-content-wrap .wpcf7-form .melabo-form-submit {
	text-align: center;
}

#ajax-content-wrap .wpcf7-form input[type="submit"] {
	min-width: 220px;
}

/* ========== 2026-08-19 クライアント指摘対応 ========== */

/* TOP 施設カード。背景に各施設の写真を敷く。ロゴも本文も黒なので
   白ヴェールを重ねて可読性を確保し、ホバーで写真を前に出す */
#ajax-content-wrap .melabo-card {
	--veil: rgba(255, 255, 255, 0.8);
	background-image: linear-gradient(var(--veil), var(--veil)), var(--photo);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#ajax-content-wrap .melabo-card:hover { --veil: rgba(255, 255, 255, 0.62); }
#ajax-content-wrap .melabo-card-1 { --photo: url(/wp-content/uploads/2026/08/me-labo1-768x576.jpeg); }
#ajax-content-wrap .melabo-card-2 { --photo: url(/wp-content/uploads/2026/08/me-labo2-768x512.jpg); }
#ajax-content-wrap .melabo-card-3 { --photo: url(/wp-content/uploads/2026/08/me-labo3-768x512.jpg); }
/* ロゴの縦寸がバラバラなので枠の高さを固定し、3枚の本文の頭を揃える */
#ajax-content-wrap .melabo-card .img-with-aniamtion-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}
/* 写真の上に乗るので本文を少し濃くする */
#ajax-content-wrap .melabo-card .wpb_text_column p { color: #333333; }

/* CONCEPT 右の湘南写真 */
#ajax-content-wrap img.melabo-concept-photo {
	width: 100%;
	height: auto;
}

/* ギャラリー。元写真の縦横比がバラバラなので 4:3 に切り揃える */
#ajax-content-wrap img.melabo-gallery-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 全画面メニューの施設3項目は、現行サイトと同じく白ロゴ画像で見せる。
   現行は高さではなく「幅200px揃え」なので、比率はaspect-ratioで持たせる。
   テキストはDOMに残したまま font-size:0 で隠す（読み上げ・SEO用） */
html body #slide-out-widget-area.fullscreen .off-canvas-menu-container ul.menu > li.melabo-menu-logo > a {
	font-size: 0;
	line-height: 0;
}
html body #slide-out-widget-area.fullscreen .off-canvas-menu-container ul.menu > li.melabo-menu-logo > a::before {
	content: "";
	display: block;
	width: 240px;
	max-width: 62vw;
	margin: 0 auto;
	background-image: var(--menu-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
html body #slide-out-widget-area.fullscreen ul.menu > li.melabo-menu-1 > a::before {
	aspect-ratio: 601 / 156;
	--menu-logo: url(/wp-content/uploads/2021/02/logo-w.png);
}
html body #slide-out-widget-area.fullscreen ul.menu > li.melabo-menu-2 > a::before {
	aspect-ratio: 700 / 350;
	--menu-logo: url(/wp-content/uploads/2021/02/melabo%E2%85%A1_logo_w.png);
}
html body #slide-out-widget-area.fullscreen ul.menu > li.melabo-menu-3 > a::before {
	aspect-ratio: 830 / 141;
	--menu-logo: url(/wp-content/uploads/2021/11/me-labo3_logo-w.png);
}

/* ロゴ群とテキストリンクの間の点線区切り（現行サイトに合わせる） */
html body #slide-out-widget-area.fullscreen ul.menu > li.melabo-menu-1 {
	padding-bottom: 20px;
	margin-bottom: 12px;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.45);
}

@media (max-width: 690px) {
	html body #slide-out-widget-area.fullscreen .off-canvas-menu-container ul.menu > li.melabo-menu-logo > a::before {
		width: 190px;
	}
}