@charset "UTF-8";

#booking_mail {
	width: 95%;
	max-width: 1100px;
	margin: 30px auto 60px auto;
	color: #faf7e3;
	text-align: center;
}

#booking_mail .bm-lead {
	font-size: 22px;
	line-height: 1.6;
	margin-bottom: 30px;
}

/* 各セクション */

#booking_mail .bm-section {
	padding: 30px 0;
	border-top: 1px solid rgba(201, 151, 63, 0.4);
}

#booking_mail h3 {
	font-size: 26px;
	font-weight: bold;
	color: #f2d38a;
	margin-bottom: 20px;
}

#booking_mail .bm-note {
	font-size: 17px;
	line-height: 1.5;
	color: #ccc;
	margin: 0 auto 10px auto;
	max-width: 700px;
}

/* ボタン（ヘッダーの Book Now! と同じ金色） */

#booking_mail .bm-btn-wrap {
	margin-bottom: 15px;
}

#booking_mail .bm-btn {
	display: inline-block;
	min-width: 360px;
	padding: 18px 40px;
	background: linear-gradient(to bottom, #fbe6a8 0%, #e6b85c 55%, #c9973f 100%);
	border: 2px solid #f2d38a;
	border-radius: 8px;
	color: #111;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;
	transition: 0.3s;
}

#booking_mail .bm-btn i {
	margin-right: 10px;
}

#booking_mail .bm-btn:hover {
	opacity: 0.8;
}

#booking_mail .bm-btn-tel {
	font-size: 32px;
}

/* メールアドレス（手で選択してコピーできるように表示） */

#booking_mail .bm-address {
	display: inline-block;
	font-size: 22px;
	padding: 8px 15px;
	background: #000;
	border: 1px solid #666;
	border-radius: 4px;
	-webkit-user-select: all;
	user-select: all;
}

/* reset.css は nav 内の ul しか黒丸を消していないため、ここで消す */
#booking_mail ul {
	list-style: none;
}

/* メッセージアプリ（ヘッダーのQR一覧と同じ並び） */
/* 古いiPhoneのSafariは flex の gap に対応していないため、余白は margin で取る */

#booking_mail .bm-apps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#booking_mail .bm-apps li {
	width: 180px;
	margin: 0 7px 15px 7px;
	background: #fff;
	border-radius: 6px;
	transition: 0.3s;
}

#booking_mail .bm-apps li:hover {
	box-shadow: 0 0 10px 2px rgba(242, 211, 138, 0.8);
}

#booking_mail .bm-apps a,
#booking_mail .bm-apps li > div {
	display: block;
	padding: 10px 10px 12px 10px;
	color: #111;
	text-decoration: none;
}

#booking_mail .bm-apps img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}

#booking_mail .bm-app-name,
#booking_mail .bm-app-id {
	display: block;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
}

/* 書いてほしい内容 */

#booking_mail .bm-items {
	display: inline-block;
	text-align: left;
	font-size: 19px;
	line-height: 1.8;
}

#booking_mail .bm-items li:before {
	content: "・";
	color: #f2d38a;
}

/* スマホ */

@media screen and (max-width: 768px) {
	#booking_mail .bm-btn {
		min-width: 0;
		width: 90%;
		box-sizing: border-box;
	}

	#booking_mail .bm-apps li {
		width: 45%;
		max-width: 220px;
	}
}