@charset "UTF-8";

/* ===================================================================
 * 一般公開画面（guest）のテーマ
 *
 * 一般的なマッチングサービスのトップページを想定した構成。
 *   ・白ベース＋ロゴの緑（#8cc63f）＋イエロー（#f2c400）＋茶系（信頼感）
 *   ・ボタン・カードは「下方向のベタ影（box-shadow: 0 5px 0）」で立体感を出す
 *   ・ホバー時は影を消して同じ量だけ沈み込ませる
 *   ・PCは 1132px 幅のコンテンツ、スマートフォンは 92% 幅
 *
 * クラス接頭辞は「bm-」。bebimama.css と同じ接頭辞のため、
 * body・header・footer・main・card のように名前が衝突するものは「bm-site-」を付けて区別する。
 * =================================================================== */

:root {
	/* ロゴの2色（cmn.cssの --bm-* と同じ値を使う） */
	--bm-green        : #8cc63f;
	--bm-green-dark   : #74ab2f;
	--bm-green-pale   : #eff7e2;
	--bm-yellow       : #f2c400;
	--bm-yellow-dark  : #d9ae00;
	--bm-yellow-pale  : #fdf5db;
	--bm-marker       : #fdefb8;
	/* 文字・枠線・背景は茶系（信頼感）で揃える */
	--bm-text         : #3f2f24;
	--bm-text-sub     : #8b7d70;
	--bm-border       : #e6dccd;
	--bm-shadow       : #ddd0bd;
	--bm-gray         : #efe8dd;
	--bm-gray-dark    : #d9c7ad;
	--bm-gray-bg      : #f7f2ea;
	--bm-brown        : #8a6a45;
	--bm-brown-dark   : #4a3728;
	--bm-white        : #ffffff;

	/* ヘッダーの高さ（本文の先頭余白と揃えるために変数で持つ） */
	--bm-site-header-h     : 60px;
}


/* -------------------------------------------------------------------
 * ベース
 * ------------------------------------------------------------------- */

body.bm-site-body,
body.bm-site-body input,
body.bm-site-body button,
body.bm-site-body select,
body.bm-site-body textarea {
	font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

body.bm-site-body {
	color: var(--bm-text);
	background: var(--bm-white);
	font-size: 14px;
	line-height: 1.38;
	letter-spacing: 0.07em;
}

/*
 * 一般公開画面のうち、トップページ以外はまだ既存の「bm-」系スタイルで作られている。
 *
 * 配色を「ロゴの2色＋白系＋茶系」で全画面統一したため、
 * 以前ここで行っていた色の上書きは不要になった（cmn.cssの定義がそのまま効く）。
 * 一般公開画面だけは背景を純白にしたいため、背景のみ上書きする。
 */
body.bm-site-body {
	--bm-bg : var(--bm-white);
}

.bm-site-body a {
	color: var(--bm-text);
	text-decoration: none;
}

.bm-site-body a:hover {
	color: var(--bm-text);
	text-decoration: none;
	opacity: 0.7;
}

/*
 * 本文中のリンク（会員登録画面の利用規約・プライバシーポリシーなど）
 *
 * 【注意】すぐ上の「.bm-site-body a」でリンクを本文と同じ色・下線なしにしているため、
 *         bebimama.css の .bm-text-link より詳細度が高く、そのままでは効かない。
 *         クリックできることが伝わるよう、ここで青＋下線に上書きする。
 *         ホバーの opacity も打ち消す（薄くなると逆に読みにくいため）。
 */
.bm-site-body .bm-text-link,
.bm-site-body .bm-check a {
	color: #1565c0;
	text-decoration: underline;
}

.bm-site-body .bm-text-link:hover,
.bm-site-body .bm-text-link:focus,
.bm-site-body .bm-check a:hover,
.bm-site-body .bm-check a:focus {
	color: #0d47a1;
	text-decoration: underline;
	opacity: 1;
}

/* 表示の出し分け（PC／スマートフォンでの出し分け用） */
.bm-pc {
	display: none !important;
}

.bm-sp {
	display: block !important;
}


/* -------------------------------------------------------------------
 * 共通パーツ：コンテンツ幅
 * ------------------------------------------------------------------- */

.bm-container {
	width: 100%;
}

.bm-content {
	width: 92%;
	margin: 0 auto;
}


/* -------------------------------------------------------------------
 * 共通パーツ：ボタン
 *
 * .bm-btn       … 角丸のカプセル型（メインの導線）
 * .bm-btn-arrow … 右端に「＞」が付くボタン
 * ------------------------------------------------------------------- */

.bm-btn,
.bm-btn-arrow {
	display: inline-block;
	box-sizing: border-box;
	padding: 14px 30px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	border: none;
	border-radius: 50px;
	transition: transform 0.2s, box-shadow 0.2s;
}

/* 色のバリエーション */
.bm-btn-green {
	color: var(--bm-white) !important;
	background: var(--bm-green);
	box-shadow: 0 5px 0 var(--bm-green-dark);
}

.bm-btn-yellow {
	color: var(--bm-text) !important;
	background: var(--bm-yellow);
	box-shadow: 0 5px 0 var(--bm-yellow-dark);
}

.bm-btn-gray {
	color: var(--bm-text) !important;
	background: var(--bm-gray);
	box-shadow: 0 5px 0 var(--bm-gray-dark);
}

/* 押し込みアニメーション（影の分だけ沈む） */
.bm-btn:hover,
.bm-btn-arrow:hover {
	opacity: 1;
	box-shadow: none;
	transform: translateY(5px);
}

.bm-btn-arrow {
	position: relative;
	padding-right: 40px;
}

.bm-btn-arrow::after {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	content: "";
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}


/* -------------------------------------------------------------------
 * 共通パーツ：セクション見出し
 *
 * 見出しは左寄せ。アイコンは文字の左へ小さなタイルとして置き、
 * 見出しの下に区切り線を引く。
 * ------------------------------------------------------------------- */

.bm-ttl {
	padding-bottom: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	border-bottom: 2px solid var(--bm-border);
}

.bm-ttl::before {
	box-sizing: border-box;
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-right: 12px;
	font-family: "Font Awesome 6 Free";
	font-size: 16px;
	font-weight: 900;
	line-height: 34px;
	color: var(--bm-green);
	text-align: center;
	vertical-align: middle;
	content: "\f004";
	background: var(--bm-green-pale);
	border-radius: 10px;
}

.bm-ttl-search::before  { content: "\f002"; }
.bm-ttl-guide::before   { content: "\f05a"; }
.bm-ttl-star::before    { color: var(--bm-yellow-dark); content: "\f005"; background: var(--bm-white); }
.bm-ttl-news::before    { content: "\f0f3"; }
.bm-ttl-column::before  { content: "\f02d"; }


/* -------------------------------------------------------------------
 * 共通パーツ：カード
 * ------------------------------------------------------------------- */

.bm-site-card {
	box-sizing: border-box;
	margin: 0 auto 5px;
	padding: 5.88%;
	overflow: hidden;
	background: var(--bm-white);
	border: 1px solid var(--bm-border);
	border-radius: 10px;
	box-shadow: 0 5px 0 var(--bm-shadow);
}

.bm-site-card-box {
	box-sizing: border-box;
	margin-bottom: 5px;
	background: var(--bm-white);
	border: 1px solid var(--bm-border);
	border-radius: 10px;
	box-shadow: 0 5px 0 var(--bm-shadow);
}


/* -------------------------------------------------------------------
 * ヘッダー
 * ------------------------------------------------------------------- */

.bm-site-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: var(--bm-site-header-h);
	background: var(--bm-white);
}

.bm-site-header__container {
	position: relative;
	height: var(--bm-site-header-h);
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.bm-site-header__inner {
	position: relative;
	margin: auto;
}

/* ロゴ */
.bm-site-header__logo {
	width: 36%;
	max-width: 160px;
	height: var(--bm-site-header-h);
	margin: 0 0 0 19.3%;
}

.bm-site-header__logo-link {
	display: flex;
	align-items: center;
	height: 100%;
}

/*
 * 【注意】元画像（デザイナー提供のロゴ）は 253x31px しかないため、
 *         にじみを避けるようネイティブの高さ以下で表示する。
 */
.bm-site-header__logo-img {
	display: block;
	width: auto;
	height: 26px;
	max-width: 100%;
}

/* ハンバーガー */
.bm-site-header__nav-trigger {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 60px;
	height: var(--bm-site-header-h);
	cursor: pointer;
}

.bm-site-header__nav-trigger span,
.bm-site-header__nav-trigger::before,
.bm-site-header__nav-trigger::after {
	position: absolute;
	left: 18px;
	width: 24px;
	height: 3px;
	content: "";
	background: var(--bm-green);
	border-radius: 3px;
	transition: all 0.2s;
}

.bm-site-header__nav-trigger::before { top: 20px; }
.bm-site-header__nav-trigger span    { top: 29px; }
.bm-site-header__nav-trigger::after  { top: 38px; }

.bm-site-header__nav-trigger.is-open::before { top: 29px; transform: rotate(45deg); }
.bm-site-header__nav-trigger.is-open span    { opacity: 0; }
.bm-site-header__nav-trigger.is-open::after  { top: 29px; transform: rotate(-45deg); }

/* スマートフォンの開閉メニュー */
.bm-site-header__hamburger {
	position: absolute;
	top: var(--bm-site-header-h);
	left: 0;
	display: none;
	box-sizing: border-box;
	width: 100%;
	max-height: calc(100vh - var(--bm-site-header-h));
	padding: 0;
	margin: 0;
	overflow-y: auto;
	list-style: none;
	background: var(--bm-white);
	border-top: 1px solid var(--bm-border);
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.bm-site-header__nav__list-item_1 {
	border-bottom: 1px solid var(--bm-border);
}

.bm-site-header__nav__link_1 {
	position: relative;
	display: block;
	padding: 20px 20px 17px 55px;
	font-weight: 700;
	letter-spacing: 0;
	cursor: pointer;
}

.bm-site-header__nav__link_1::before {
	position: absolute;
	top: 50%;
	left: 18px;
	margin-top: -11px;
	font-family: "Font Awesome 6 Free";
	font-size: 18px;
	font-weight: 900;
	color: var(--bm-green);
	content: "\f002";
}

.bm-nav-search   > .bm-site-header__nav__link_1::before { content: "\f002"; }
.bm-nav-job      > .bm-site-header__nav__link_1::before { content: "\f0c0"; }
.bm-nav-favorite > .bm-site-header__nav__link_1::before { content: "\f004"; }
.bm-nav-beginner > .bm-site-header__nav__link_1::before { content: "\f05a"; }
.bm-nav-faq      > .bm-site-header__nav__link_1::before { content: "\f059"; }

/* 「＞」を右端に出す */
.bm-arrow-right {
	position: relative;
}

.bm-arrow-right::after {
	position: absolute;
	top: 28px;
	right: 20px;
	width: 8px;
	height: 8px;
	content: "";
	border-top: 2px solid var(--bm-text-sub);
	border-right: 2px solid var(--bm-text-sub);
	transform: rotate(45deg);
}

/* 2階層目 */
.bm-site-header__nav__list_2 {
	padding: 0;
	margin: 0;
	list-style: none;
	background: var(--bm-green-pale);
}

.bm-site-header__nav__list-item_2 {
	position: relative;
	border-top: 1px solid var(--bm-border);
}

.bm-site-header__nav__list-item_2.bm-arrow-right::after {
	top: 20px;
}

.bm-site-header__nav__link_2 {
	display: block;
	padding: 15px 20px 13px 55px;
	font-size: 13px;
}

/* スマートフォンの右上ボタン（ログイン／新規登録） */
.bm-site-header__btn-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	width: 130px;
	height: 100%;
}

.bm-site-header__btn {
	position: relative;
	box-sizing: border-box;
	width: 50%;
	height: 100%;
	padding-top: 33px;
	font-size: 12px;
	font-weight: 700;
	color: var(--bm-text);
	text-align: center;
	cursor: pointer;
}

.bm-site-header__btn::before {
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	font-family: "Font Awesome 6 Free";
	font-size: 16px;
	font-weight: 900;
	content: "\f2f6";
}

.bm-site-header__btn-login {
	background: var(--bm-gray);
	border-bottom: 3px solid var(--bm-gray-dark);
}

.bm-site-header__btn-register {
	background: var(--bm-yellow);
	border-bottom: 3px solid var(--bm-yellow-dark);
}

.bm-site-header__btn-register::before {
	content: "\f007";
}

/* ログインの選択ポップアップ */
.bm-site-header-popup {
	position: absolute;
	top: var(--bm-site-header-h);
	right: 0;
	z-index: 20;
	display: none;
	box-sizing: border-box;
	width: 260px;
	padding: 20px;
	background: var(--bm-white);
	border: 1px solid var(--bm-border);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.bm-site-header-popup.is-open {
	display: block;
}

.bm-site-header-popup__btn {
	display: block;
	width: 100%;
	margin-bottom: 18px;
}

.bm-site-header-popup__btn:last-child {
	margin-bottom: 0;
}

.bm-site-header-popup__link {
	display: block;
	padding: 10px 0;
	font-weight: 700;
	border-bottom: 1px solid var(--bm-border);
}

.bm-site-header-popup__link:last-child {
	border-bottom: none;
}


/* -------------------------------------------------------------------
 * メイン
 * ------------------------------------------------------------------- */

.bm-site-main {
	padding-top: var(--bm-site-header-h);
}

/* トップページ以外の画面の共通ラッパー（既存のbm-系スタイルをそのまま使う） */
.bm-page-wrap {
	max-width: 1100px;
	padding: 20px 16px calc(80px + env(safe-area-inset-bottom));
	margin: 0 auto;
}

.bm-page-wrap:empty {
	padding: 0;
}


/* -------------------------------------------------------------------
 * メインビジュアル（トップページ）
 * ------------------------------------------------------------------- */

.bm-mainvisual {
	padding: 30px 0 15px;
	background:
		radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9) 0 12px, transparent 13px),
		radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.7) 0 18px, transparent 19px),
		radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.6) 0 26px, transparent 27px),
		linear-gradient(160deg, var(--bm-green-pale) 0%, #f7f4e2 45%, var(--bm-yellow-pale) 100%);
}

.bm-mainvisual__container {
	width: 92%;
	margin: 0 auto;
}

.bm-mainvisual__photo {
	margin: 0 0 20px;
}

.bm-mainvisual__photo img {
	display: block;
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.bm-mainvisual__catch {
	display: none;
}

.bm-mainvisual-search__box {
	box-sizing: border-box;
	width: 100%;
	padding: 26px 20px 30px;
	background: var(--bm-white);
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.bm-mainvisual-search__ttl {
	margin-bottom: 18px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

.bm-mainvisual-search__bnr {
	margin: 0 10px 15px;
}

.bm-mainvisual-search__bnr a {
	display: block;
	padding: 12px 14px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	background: var(--bm-yellow-pale);
	border: 1px solid var(--bm-border);
	border-radius: 5px;
}

.bm-mainvisual-search__bnr a:last-child {
	margin-bottom: 0;
	background: var(--bm-green-pale);
}

.bm-mainvisual-search__list {
	padding: 0;
	margin: 0 0 20px;
	list-style: none;
}

/* 検索条件は「塗りのボックス」で並べる（下線の行並びにはしない） */
.bm-mainvisual-search__list-item {
	position: relative;
	box-sizing: border-box;
	padding: 15px 30px 15px 44px;
	margin-bottom: 12px;
	font-weight: 700;
	cursor: pointer;
	background: var(--bm-gray-bg);
	border-radius: 10px;
}

.bm-mainvisual-search__list-item::before {
	position: absolute;
	top: 50%;
	left: 14px;
	margin-top: -12px;
	font-family: "Font Awesome 6 Free";
	font-size: 18px;
	font-weight: 900;
	color: var(--bm-green);
	content: "\f133";
}

.bm-search-icon-area::before { content: "\f3c5"; }
.bm-search-icon-age::before  { content: "\f1ae"; }

/* 下向きの「∨」 */
.bm-arrow-down::after {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 8px;
	height: 8px;
	margin-top: -7px;
	content: "";
	border-right: 2px solid var(--bm-text-sub);
	border-bottom: 2px solid var(--bm-text-sub);
	transform: rotate(45deg);
}

.bm-mainvisual-search__btn {
	display: block;
	width: 100%;
	margin: 4px 0 0;
}


/* -------------------------------------------------------------------
 * シッターカード（お近くのエリア／本日・明日対応／運営おすすめで共用）
 * ------------------------------------------------------------------- */

.bm-sitter-area {
	padding-bottom: 30px;
}

/* 見出しは左寄せになったため、本文と同じ幅に合わせる */
.bm-sitter-area__ttl,
.bm-recommend > .bm-ttl {
	box-sizing: border-box;
	width: 92%;
	margin: 0 auto;
}

.bm-sitter-area__ttl {
	padding-top: 30px;
}

/* カードの一覧（横スクロールではなく、上から積むグリッド） */
.bm-cardgrid {
	position: relative;
}

.bm-cardgrid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 10px 4% 20px;
	margin: 0;
	list-style: none;
}

.bm-cardgrid__item {
	box-sizing: border-box;
}

/* カードの中身 */
.bm-info__block {
	position: relative;
	min-height: 115px;
}

.bm-info__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
}

.bm-info__img .bm-photo {
	width: 100px;
	height: 100px;
	font-size: 40px;
	border-radius: 10px;
}

/* 顔写真の右側に回り込ませる領域（写真より短くならないようにする） */
.bm-info__body {
	min-height: 100px;
	margin-left: 115px;
}

.bm-info__icon {
	position: relative;
	padding-bottom: 15px;
	padding-left: 26px;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
}

.bm-info__icon::before {
	position: absolute;
	top: 1px;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-size: 14px;
	font-weight: 900;
	color: var(--bm-green);
	content: "\f3c5";
}

.bm-info__icon-charge::before { content: "\f157"; }
.bm-info__icon-age::before    { content: "\f1ae"; }

.bm-info__ttl {
	display: inline;
	margin: 0;
	font-weight: 700;
}

.bm-info__txt {
	display: inline;
	margin: 0;
}

.bm-info-sub__icon {
	font-size: 11px;
	color: var(--bm-text-sub);
}

/* 自己紹介（3行で省略） */
.bm-info__detail {
	display: -webkit-box;
	padding-top: 5px;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* 空き状況の曜日リスト */
.bm-week__list {
	display: flex;
	justify-content: space-between;
	padding: 0;
	margin: 14px 0 0;
	list-style: none;
}

.bm-week__list-item {
	box-sizing: border-box;
	width: 18.54%;
	padding: 6px;
	font-weight: 700;
	color: var(--bm-text-sub);
	text-align: center;
	background: var(--bm-gray);
	border-radius: 5px;
}

.bm-week__list-item.is-active {
	color: var(--bm-text);
	background: var(--bm-yellow);
}

.bm-week__list-week {
	display: block;
	font-size: 11px;
}

.bm-week__list-day {
	display: block;
	font-size: 15px;
}


/* -------------------------------------------------------------------
 * 本日／明日 対応できるシッター
 * ------------------------------------------------------------------- */

.bm-today {
	padding: 30px 0 40px;
	margin-top: 50px;
	background: var(--bm-gray-bg);
}

/* 切替は画面いっぱいのタブではなく、中央に置いた丸型のスイッチにする */
.bm-today .bm-content {
	display: flex;
	justify-content: center;
}

.bm-today__tab {
	display: inline-flex;
	gap: 6px;
	padding: 5px;
	margin-bottom: 25px;
	background: var(--bm-white);
	border: 1px solid var(--bm-border);
	border-radius: 50px;
}

.bm-today__tab-item {
	box-sizing: border-box;
	padding: 11px 20px;
	font-weight: 700;
	color: var(--bm-green);
	text-align: center;
	cursor: pointer;
	border-radius: 50px;
}

.bm-today__tab-item.is-active {
	color: var(--bm-white);
	background: var(--bm-green);
}

.bm-today__tab-marker {
	font-weight: 700;
}

.bm-today__tab-item.is-active .bm-today__tab-marker {
	background: linear-gradient(transparent 85%, var(--bm-yellow) 85%);
}

.bm-today__panel {
	display: none;
}

.bm-today__panel.is-active {
	display: block;
}


/* -------------------------------------------------------------------
 * ガイド
 * ------------------------------------------------------------------- */

.bm-guide {
	padding-top: 50px;
	margin-bottom: 35px;
}

.bm-guide__container {
	margin-top: 25px;
}

/* アイコンは小さなタイルにして左へ固定し、本文は右側へ流す */
.bm-guide__box {
	position: relative;
	padding: 22px 20px 24px 98px;
	margin-bottom: 20px;
	text-align: left;
}

.bm-guide__box__ttl {
	position: relative;
	display: inline-block;
	padding: 0 0 0 30px;
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.bm-guide__box__ttl::before {
	position: absolute;
	top: 2px;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-size: 20px;
	font-weight: 900;
	color: var(--bm-green);
	content: "\f05a";
}

.bm-guide__box__ttl-faq::before {
	content: "\f059";
}

.bm-guide__box__img {
	position: absolute;
	top: 22px;
	left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0;
	font-size: 26px;
	color: var(--bm-white);
	background: linear-gradient(140deg, #a9d46a 0%, var(--bm-green-pale) 100%);
	border-radius: 16px;
}

.bm-guide__box-faq .bm-guide__box__img {
	background: linear-gradient(140deg, #f5d24d 0%, var(--bm-yellow-pale) 100%);
}

.bm-guide__box__txt {
	padding: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
}

.bm-guide__box .bm-btn-arrow {
	box-sizing: border-box;
	width: 200px;
	padding: 13px 0;
	margin: 0;
}


/* -------------------------------------------------------------------
 * 運営おすすめのシッター
 * ------------------------------------------------------------------- */

.bm-recommend {
	padding: 30px 0 40px;
	background: var(--bm-yellow-pale);
}


/* -------------------------------------------------------------------
 * 想い・バナー
 * ------------------------------------------------------------------- */

.bm-desire {
	margin-top: 60px;
	text-align: left;
}

.bm-desire__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	font-size: 56px;
	color: var(--bm-white);
	background: linear-gradient(140deg, var(--bm-green) 0%, #d6e9b0 60%, var(--bm-yellow-pale) 100%);
	border-radius: 10px;
}

.bm-desire__txt {
	padding: 20px 0 22px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.bm-bnr {
	margin: 40px 0;
}

.bm-bnr__link {
	display: block;
	padding: 28px 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--bm-text) !important;
	text-align: center;
	background: linear-gradient(140deg, #fbe89b 0%, #f5d24d 100%);
	border-radius: 10px;
	box-shadow: 0 5px 0 var(--bm-yellow-dark);
	transition: transform 0.2s, box-shadow 0.2s;
}

.bm-bnr__link:hover {
	opacity: 1;
	box-shadow: none;
	transform: translateY(5px);
}

.bm-bnr__sub {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: normal;
}


/* -------------------------------------------------------------------
 * コラム
 * ------------------------------------------------------------------- */

.bm-column {
	padding: 40px 0 0;
	border-bottom: 1px solid var(--bm-border);
}

/* カードを並べるのではなく、サムネイルを左へ置いた一覧にする */
.bm-column__list {
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.bm-column__item {
	display: grid;
	grid-template-columns: 92px 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-content: center;
	padding: 16px 0;
	cursor: pointer;
	border-bottom: 1px solid var(--bm-border);
}

.bm-column__img {
	display: flex;
	grid-row: 1 / 3;
	align-self: center;
	align-items: center;
	justify-content: center;
	height: 92px;
	font-size: 28px;
	color: var(--bm-white);
	background: linear-gradient(140deg, #a9d46a 0%, #fbe89b 100%);
	border-radius: 12px;
}

.bm-column__ttl {
	align-self: end;
	padding: 0 0 6px;
	font-weight: 700;
	line-height: 1.5;
}

.bm-column__date {
	align-self: start;
}

.bm-column__date {
	font-size: 12px;
	color: var(--bm-text-sub);
}

.bm-txt-right {
	margin: 20px 0 40px;
	text-align: right;
}

.bm-txt-right a {
	font-weight: 700;
	color: var(--bm-green-dark) !important;
}


/* -------------------------------------------------------------------
 * 運営よりお知らせ
 * ------------------------------------------------------------------- */

.bm-news {
	padding: 40px 0 25px;
}

.bm-news__list {
	padding: 0;
	margin: 25px 0 0;
	list-style: none;
}

.bm-news__list-item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding: 14px 0 12px;
	border-bottom: 1px solid var(--bm-border);
}

.bm-news__date {
	flex: 0 0 78px;
	font-size: 13px;
	color: var(--bm-text-sub);
}

.bm-news__tag {
	display: inline-block;
	padding: 2px 10px;
	margin: 4px 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--bm-white);
	background: var(--bm-brown);
	border-radius: 3px;
}

.bm-news__txt {
	flex: 1 1 100%;
	margin: 0;
	line-height: 1.5;
}


/* -------------------------------------------------------------------
 * 新規会員登録の誘導
 * ------------------------------------------------------------------- */

.bm-newmember {
	padding: 60px 0 50px;
	text-align: center;
	background:
		radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.8) 0 14px, transparent 15px),
		radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.6) 0 20px, transparent 21px),
		linear-gradient(180deg, var(--bm-green-pale) 0%, var(--bm-yellow-pale) 100%);
}

.bm-newmember__txt {
	margin-bottom: 26px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.9;
}

.bm-newmember__txt-big {
	font-size: 22px;
}

.bm-newmember__txt-marker {
	background: linear-gradient(transparent 65%, var(--bm-marker) 65%);
}

.bm-newmember__btn {
	width: 80%;
	max-width: 340px;
}


/* -------------------------------------------------------------------
 * フッター
 * ------------------------------------------------------------------- */

.bm-site-footer {
	position: relative;
	background: var(--bm-white);
}

.bm-site-footer__container {
	padding-top: 20px;
}

.bm-site-footer__list,
.bm-site-footer__list_center {
	padding: 0;
	margin: 0;
	list-style: none;
}

.bm-site-footer__list-item {
	font-size: 13px;
	border-bottom: 1px solid var(--bm-border);
}

.bm-site-footer__list-link {
	display: block;
	padding: 17px 17px 14px 13px;
}

.bm-site-footer__logo {
	padding: 30px 0 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--bm-green);
	text-align: center;
}

.bm-site-footer__links {
	display: flex;
	justify-content: center;
	padding: 24px 0 10px;
}

.bm-site-footer__links > a + a {
	margin-left: 10px;
}

.bm-sns-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	color: var(--bm-white) !important;
	border-radius: 10px;
}

.bm-sns-fb    { background: #56a9e0; box-shadow: 0 5px 0 #347dbd; }
.bm-sns-insta { background: #febbe5; box-shadow: 0 5px 0 #fb6e86; }
.bm-sns-mail  { background: var(--bm-green); box-shadow: 0 5px 0 var(--bm-green-dark); }

.bm-site-footer__copyright {
	padding: 18px;
	margin: 20px 0 0;
	font-size: 12px;
	color: var(--bm-white);
	text-align: center;
	background: var(--bm-green);
}

.bm-site-footer__note {
	display: block;
	margin-top: 4px;
	opacity: 0.85;
}

/* ページトップ */
.bm-pagetop {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--bm-white) !important;
	cursor: pointer;
	background: var(--bm-green);
	border-radius: 50%;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

.bm-pagetop.is-show {
	display: flex;
}


/* -------------------------------------------------------------------
 * モーダル（検索条件・ログイン）
 * ------------------------------------------------------------------- */

.bm-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
	display: none;
	width: 100%;
	height: 100%;
}

.bm-modal.is-open {
	display: block;
}

.bm-modal__wall {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.bm-modal__container {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 92%;
	max-width: 500px;
	max-height: 86vh;
	overflow-y: auto;
	background: var(--bm-white);
	border-radius: 10px;
	transform: translate(-50%, -50%);
}

.bm-modal__inner {
	position: relative;
	padding: 30px 20px 25px;
}

.bm-modal__close {
	position: absolute;
	top: 8px;
	right: 14px;
	font-size: 24px;
	line-height: 1;
	color: var(--bm-text-sub);
	cursor: pointer;
}

.bm-modal__ttl {
	position: relative;
	margin-bottom: 18px;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

.bm-modal__box {
	margin-bottom: 20px;
}

.bm-modal__txt {
	margin-bottom: 8px;
	font-size: 13px;
}

.bm-modal__input,
.bm-modal__pulldown {
	box-sizing: border-box;
	width: 100%;
	padding: 12px;
	font-size: 15px;
	background: var(--bm-white);
	border: 1px solid var(--bm-border);
	border-radius: 5px;
}

.bm-modal__btn {
	display: block;
	width: 100%;
}

.bm-modal__note {
	margin-top: 16px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--bm-text-sub);
	text-align: center;
}

/* 本文のスクロールを止める */
body.bm-modal-open {
	overflow: hidden;
}


/* ===================================================================
 * タブレット以上
 * =================================================================== */

@media (min-width: 768px) {

	:root {
		--bm-site-header-h: 80px;
	}

	.bm-pc {
		display: block !important;
	}

	.bm-sp {
		display: none !important;
	}

	body.bm-site-body {
		font-size: 16px;
	}

	.bm-content {
		box-sizing: border-box;
		width: 100%;
		max-width: 1132px;
		padding: 0 54px;
		margin: 0 auto;
	}

	/* ---------------- ヘッダー ---------------- */

	.bm-site-header__container {
		height: var(--bm-site-header-h);
		background: var(--bm-white);
	}

	.bm-site-header__inner {
		display: flex;
		align-items: center;
		max-width: 1300px;
		height: var(--bm-site-header-h);
		margin: 0 auto;
	}

	.bm-site-header__logo {
		box-sizing: content-box;
		width: auto;
		max-width: none;
		height: var(--bm-site-header-h);
		padding: 0 29px 0 20px;
		margin: 0;
		background: var(--bm-white);
		border-radius: 0 0 50px 0;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	}

	.bm-site-header__logo-img {
		height: 31px;
	}

	.bm-site-header__wrapper {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
	}

	/* 「.bm-pc」のdisplay指定を上書きして横並びにする */
	.bm-site-header__nav-pc {
		display: flex !important;
		align-items: center;
		height: 100%;
		white-space: nowrap;
	}

	.bm-site-header__nav-pc > ul {
		display: flex;
		height: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.bm-site-header__nav-pc .bm-site-header__nav__list-item_1 {
		position: relative;
		height: 100%;
		border-bottom: none;
	}

	.bm-site-header__nav-pc .bm-site-header__nav__link_1 {
		display: block;
		height: 100%;
		padding: 44px 12px 0;
		font-size: 14px;
		text-align: center;
	}

	.bm-site-header__nav-pc .bm-site-header__nav__link_1::before {
		top: 16px;
		left: 0;
		width: 100%;
		margin-top: 0;
		text-align: center;
	}

	.bm-site-header__nav-pc .bm-site-header-popup {
		top: var(--bm-site-header-h);
		right: auto;
		left: 50%;
		width: 220px;
		padding: 10px 20px;
		margin-left: -110px;
		border-radius: 0 0 10px 10px;
	}

	/* ヘッダー右側のボタン群 */
	.bm-site-header-user {
		display: flex;
		gap: 10px;
		align-items: center;
		margin-left: 16px;
	}

	.bm-site-header-user__btn {
		padding: 12px 16px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* ---------------- メインビジュアル ---------------- */

	/* キャッチを上に置き、その下へ横長の検索バーを敷く */
	.bm-mainvisual {
		display: block;
		height: auto;
		padding: 56px 0 64px;
	}

	.bm-mainvisual__container {
		box-sizing: border-box;
		width: 100%;
		max-width: 1132px;
		padding: 0 54px;
		margin: 0 auto;
	}

	.bm-mainvisual__photo {
		max-width: 480px;
		margin: 0 auto 28px;
	}

	.bm-mainvisual__photo img {
		border-radius: 16px;
	}

	.bm-mainvisual__catch {
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: 800px;
		padding-top: 0;
		margin: 0 auto 32px;
		font-size: 26px;
		font-weight: 700;
		line-height: 1.7;
		text-align: center;
		/* 淡いグラデーションの上に載るため、こげ茶でコントラストを確保する */
		color: var(--bm-brown-dark);
		text-shadow: 0 2px 6px rgba(255, 255, 255, 0.8);
	}

	.bm-mainvisual__catch-sub {
		display: block;
		margin-top: 14px;
		font-size: 15px;
		font-weight: normal;
		line-height: 1.9;
	}

	.bm-mainvisual-search__box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		max-width: 980px;
		padding: 24px 28px 26px;
		margin: 0 auto;
		border-radius: 14px;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	}

	.bm-mainvisual-search__ttl {
		flex: 0 0 100%;
		margin-bottom: 16px;
		font-size: 20px;
	}

	/* タブレット幅では条件を横一列にし、ボタンはその下へ回す */
	.bm-mainvisual-search__list {
		display: flex;
		flex: 1 1 100%;
		gap: 14px;
		margin: 0 0 14px;
	}

	.bm-mainvisual-search__list-item {
		flex: 1;
		padding: 14px 26px 14px 40px;
		margin-bottom: 0;
	}

	.bm-mainvisual-search__btn {
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
	}

	/* ---------------- 共通 ---------------- */

	.bm-ttl {
		padding-bottom: 18px;
		font-size: 28px;
	}

	.bm-ttl::before {
		width: 46px;
		height: 46px;
		margin-right: 16px;
		font-size: 22px;
		line-height: 46px;
		border-radius: 14px;
	}

	.bm-site-card {
		padding: 30px;
		border-radius: 20px;
	}

	.bm-site-card-box {
		border-radius: 20px;
	}

	.bm-sitter-area {
		padding: 0 0 40px;
	}

	.bm-sitter-area__ttl {
		width: 100%;
		max-width: 1132px;
		padding: 60px 54px 18px;
	}

	.bm-recommend > .bm-ttl {
		width: 100%;
		padding: 0 54px 18px;
	}

	/* ---------------- スライダー ---------------- */

	.bm-cardgrid {
		box-sizing: border-box;
		max-width: 1132px;
		padding: 0 54px;
		margin: 0 auto;
	}

	.bm-cardgrid__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		padding: 10px 0 20px;
	}

	.bm-cardgrid-lg .bm-cardgrid__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.bm-cardgrid-xl .bm-cardgrid__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.bm-info__icon {
		padding-bottom: 10px;
	}

	.bm-week__list-item {
		width: 16.54%;
		padding: 8px;
		border-radius: 10px;
	}

	/* ---------------- 本日／明日 対応できるシッター ---------------- */

	.bm-today {
		padding: 50px 0 60px;
	}

	.bm-today__tab-item {
		padding: 14px 36px;
	}

	/* ---------------- ガイド ---------------- */

	.bm-guide {
		padding-top: 80px;
		margin-bottom: 80px;
	}

	.bm-guide__container {
		display: flex;
		gap: 40px;
		justify-content: center;
	}

	.bm-guide__box {
		position: relative;
		box-sizing: border-box;
		width: 50%;
		max-width: 504px;
		padding: 24px 22px 26px 110px;
		text-align: left;
	}

	.bm-guide__box__ttl {
		padding: 0 0 0 36px;
		margin: 0 0 12px;
		font-size: 20px;
	}

	.bm-guide__box__ttl::before {
		top: 2px;
		font-size: 24px;
	}

	.bm-guide__box__img {
		top: 24px;
		left: 22px;
		width: 72px;
		height: 72px;
		font-size: 28px;
		border-radius: 18px;
	}

	.bm-guide__box .bm-btn-arrow {
		margin: 0;
	}

	/* ---------------- 運営おすすめのシッター ---------------- */

	.bm-recommend {
		box-sizing: border-box;
		max-width: 1132px;
		padding: 40px 0 50px;
		margin: 0 auto;
		border-radius: 10px;
	}

	/* ---------------- 想い・バナー ---------------- */

	.bm-desire {
		margin-top: 130px;
	}

	/* 画像を左、文章とボタンを右へ置く2カラム */
	.bm-desire .bm-content {
		display: grid;
		grid-template-columns: 40% 1fr;
		grid-template-rows: auto auto;
		column-gap: 44px;
		align-items: center;
	}

	.bm-desire__img {
		grid-row: 1 / 3;
		height: 100%;
		min-height: 300px;
		font-size: 80px;
	}

	.bm-desire__txt {
		align-self: end;
		padding: 0 0 24px;
		font-size: 24px;
	}

	.bm-desire .bm-btn-arrow {
		align-self: start;
		justify-self: start;
	}

	.bm-bnr__link {
		padding: 44px 20px;
		font-size: 26px;
	}

	/* ---------------- コラム ---------------- */

	.bm-column__item {
		grid-template-columns: 132px 1fr;
		column-gap: 24px;
		padding: 22px 0;
	}

	.bm-column__img {
		height: 108px;
		font-size: 34px;
	}

	/* ---------------- お知らせ ---------------- */

	.bm-news {
		padding: 70px 0 0;
	}

	.bm-news__list-item {
		display: flex;
		gap: 20px;
		align-items: baseline;
		padding: 15px 0 13px;
	}

	.bm-news__date {
		flex: 0 0 100px;
	}

	/* PCは日付と本文を同じ行に並べる */
	.bm-news__txt {
		flex: 1 1 auto;
		margin: 0;
	}

	/* ---------------- 新規会員登録 ---------------- */

	.bm-newmember {
		padding: 100px 0 90px;
	}

	.bm-newmember__txt {
		font-size: 22px;
	}

	.bm-newmember__txt-big {
		font-size: 32px;
	}

	.bm-newmember__btn {
		width: 340px;
	}

	/* ---------------- フッター ---------------- */

	.bm-site-footer__wrapper {
		display: flex;
		box-sizing: border-box;
		max-width: 1132px;
		padding: 30px 54px 15px;
		margin: 0 auto;
	}

	.bm-site-footer__logo {
		flex: 0 0 231px;
		order: 1;
		padding-top: 10px;
		text-align: left;
	}

	.bm-site-footer__list-block {
		box-sizing: border-box;
		flex: 1;
		order: 2;
		padding-left: 32px;
	}

	.bm-site-footer__list_center {
		width: 240px;
		margin: 0 auto 10px;
		overflow: hidden;
		text-align: center;
	}

	.bm-site-footer__list {
		padding-top: 10px;
	}

	.bm-site-footer__list-item {
		display: inline-block;
		font-size: 13px;
		line-height: 1;
		border-bottom: none;
	}

	.bm-site-footer__list-border {
		border-right: 1px solid var(--bm-text);
	}

	.bm-site-footer__list-link {
		padding: 0 14px;
	}

	.bm-site-footer__copyright {
		padding: 14px;
	}
}


/* ===================================================================
 * PC（大きい画面）
 * =================================================================== */

@media (min-width: 1200px) {

	.bm-site-header__logo {
		padding: 0 29px 0 40px;
	}

	.bm-site-header__nav-pc .bm-site-header__nav__link_1 {
		padding: 44px 16px 0;
		font-size: 15px;
	}

	/* 横幅に余裕があるときは、検索条件とボタンを1行に収める */
	.bm-mainvisual-search__list {
		flex: 1 1 auto;
		margin: 0 18px 0 0;
	}

	.bm-mainvisual-search__btn {
		flex: 0 0 210px;
		width: 210px;
	}

	/* ---------------- ガイド ---------------- */

	.bm-guide__box {
		padding: 28px 28px 30px 132px;
	}

	.bm-guide__box__img {
		top: 28px;
		left: 28px;
		width: 80px;
		height: 80px;
		font-size: 32px;
		border-radius: 20px;
	}
}