/* =========================================================
   会議室予約システム — フロント
   デザイン: 白ベース / 墨色アクセント / ヘアライン / 余白広め
   ========================================================= */

#mrb-app,
#mrb-app *,
.mrb-modal-overlay,
.mrb-modal-overlay *,
.mrb-mmodal,
.mrb-mmodal *,
.mrb-tip,
.mrb-tip * {
	box-sizing: border-box;
}

.mrb-app {
	--mrb-ink: #1a1a1a;
	--mrb-ink-soft: #6b6b6b;
	--mrb-line: #ececec;
	--mrb-line-strong: #dcdcdc;
	--mrb-paper: #ffffff;
	--mrb-bg: #f7f7f5;
	--mrb-accent: #1a1a1a;
	--mrb-danger: #b4232a;
	--mrb-radius: 12px;
	--mrb-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px rgba(17, 17, 17, .05);
	--mrb-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

	font-family: var(--mrb-font);
	color: var(--mrb-ink);
	background: var(--mrb-paper);
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	overflow: hidden;
	box-shadow: var(--mrb-shadow);
	-webkit-font-smoothing: antialiased;
}

/* ---------- トップバー ---------- */
.mrb-topbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 22px 26px 18px;
	border-bottom: 1px solid var(--mrb-line);
	background: var(--mrb-paper);
}

.mrb-title {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
}

.mrb-subtitle {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--mrb-ink-soft);
	letter-spacing: .02em;
}

.mrb-datenav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mrb-navbtn {
	width: 36px;
	height: 36px;
	border: 1px solid var(--mrb-line-strong);
	background: var(--mrb-paper);
	border-radius: 9px;
	font-size: 20px;
	line-height: 1;
	color: var(--mrb-ink);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.mrb-navbtn:hover { background: var(--mrb-bg); border-color: var(--mrb-ink); }

.mrb-today {
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--mrb-line-strong);
	background: var(--mrb-paper);
	border-radius: 9px;
	font-size: 13px;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.mrb-today:hover { background: var(--mrb-bg); border-color: var(--mrb-ink); }

.mrb-date-display { position: relative; display: flex; align-items: center; }

.mrb-date-input {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--mrb-line-strong);
	border-radius: 9px;
	font-family: var(--mrb-font);
	font-size: 13px;
	color: var(--mrb-ink);
	background: var(--mrb-paper);
	min-width: 156px;
}
.mrb-date-input:focus { outline: none; border-color: var(--mrb-ink); }

.mrb-date-label {
	margin-left: 10px;
	font-size: 13px;
	color: var(--mrb-ink-soft);
	letter-spacing: .03em;
	white-space: nowrap;
}

/* ---------- ボード ---------- */
.mrb-board-wrap {
	background: var(--mrb-bg);
	padding: 10px 12px;
	overflow: auto;
	max-height: 72vh;
}

.mrb-board {
	background: var(--mrb-paper);
}
.mrb-board-v {
	display: flex;
	min-width: max-content;
	background: var(--mrb-paper);
}

.mrb-empty {
	padding: 60px 20px;
	width: 100%;
	text-align: center;
	color: var(--mrb-ink-soft);
	font-size: 13px;
	letter-spacing: .04em;
}

/* 時刻軸 */
.mrb-timeaxis {
	flex: 0 0 56px;
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--mrb-paper);
	border-right: 1px solid var(--mrb-line);
}
.mrb-timeaxis .mrb-col-head {
	border-bottom: 1px solid var(--mrb-line);
}
.mrb-time-slot {
	position: relative;
	border-top: 1px solid transparent;
}
.mrb-time-slot.is-hour { border-top-color: var(--mrb-line); }
.mrb-time-slot .mrb-time-label {
	position: absolute;
	top: -8px;
	right: 8px;
	font-size: 11px;
	color: var(--mrb-ink-soft);
	letter-spacing: .02em;
}

/* 会議室カラム */
.mrb-room {
	flex: 1 0 168px;
	min-width: 168px;
	border-right: 1px solid var(--mrb-line);
}
.mrb-room:last-child { border-right: none; }

.mrb-col-head {
	height: 62px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mrb-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	background: var(--mrb-paper);
	position: sticky;
	top: 0;
	z-index: 2;
}
.mrb-room-name {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .02em;
}
.mrb-room-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.mrb-room-meta {
	font-size: 11px;
	color: var(--mrb-ink-soft);
	letter-spacing: .02em;
}

/* トラック（予約を載せる領域） */
.mrb-track {
	position: relative;
}
.mrb-slot {
	border-top: 1px solid transparent;
	cursor: pointer;
	transition: background .12s ease;
}
.mrb-slot.is-hour { border-top-color: var(--mrb-line); }
.mrb-slot.is-half { border-top: 1px dashed #f1f1f1; }
.mrb-slot:hover { background: rgba(26, 26, 26, .035); }

/* 予約ブロック */
.mrb-booking {
	position: absolute;
	left: 5px;
	right: 5px;
	border-radius: 8px;
	padding: 6px 9px;
	overflow: hidden;
	color: #fff;
	cursor: default;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
	border: 1px solid rgba(255, 255, 255, .25);
}
.mrb-booking.is-editable { cursor: pointer; }
.mrb-booking.is-editable:hover { filter: brightness(1.05); }
.mrb-booking .mrb-b-time {
	font-size: 10.5px;
	opacity: .9;
	letter-spacing: .02em;
}
.mrb-booking .mrb-b-title {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	margin-top: 1px;
	word-break: break-word;
}
.mrb-booking .mrb-b-booker {
	font-size: 10.5px;
	opacity: .92;
	margin-top: 1px;
}

/* ---------- モーダル ---------- */
.mrb-modal-overlay {
	--mrb-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, .42);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 48px);
	z-index: 99999;
	animation: mrb-fade .16s ease;
}
/* hidden 属性のときは確実に隠す（display:flex が [hidden] を上書きするのを防ぐ） */
.mrb-modal-overlay[hidden] {
	display: none !important;
}
@keyframes mrb-fade { from { opacity: 0; } to { opacity: 1; } }

.mrb-modal {
	font-family: var(--mrb-font);
	width: 100%;
	max-width: 540px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	overflow: hidden;
	animation: mrb-pop .18s cubic-bezier(.2, .8, .25, 1);
}
@keyframes mrb-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.mrb-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 28px;
	border-bottom: 1px solid #efefef;
}
.mrb-modal-head h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #1a1a1a;
}
.mrb-modal-close {
	border: none;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 0 4px;
}
.mrb-modal-close:hover { color: #1a1a1a; }

.mrb-modal-body { padding: 26px 28px 10px; }

.mrb-field { margin-bottom: 22px; }
.mrb-field-row { display: flex; gap: 18px; }
.mrb-field-row .mrb-field { flex: 1; }

.mrb-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	margin-bottom: 9px;
	letter-spacing: .03em;
}
.mrb-req { color: #b4232a; }

.mrb-input {
	width: 100%;
	padding: 15px 16px;
	border: 1px solid #cccccc;
	border-radius: 11px;
	font-family: var(--mrb-font);
	font-size: 16px;
	color: #1a1a1a;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mrb-input:focus {
	outline: none;
	border-color: #1a1a1a;
	box-shadow: 0 0 0 3px rgba(26, 26, 26, .07);
}
textarea.mrb-input { resize: vertical; line-height: 1.6; min-height: 92px; }

.mrb-modal-error {
	margin: 2px 0 10px;
	padding: 9px 12px;
	background: #fcf0f0;
	border: 1px solid #f1d6d6;
	border-radius: 8px;
	color: #b4232a;
	font-size: 12.5px;
}

.mrb-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 28px 24px;
	border-top: 1px solid #efefef;
}
.mrb-foot-right { display: flex; gap: 12px; margin-left: auto; }

.mrb-btn-primary,
.mrb-btn-ghost,
.mrb-btn-danger {
	height: 52px;
	padding: 0 26px;
	border-radius: 11px;
	font-family: var(--mrb-font);
	font-size: 16px;
	letter-spacing: .03em;
	cursor: pointer;
	transition: all .15s ease;
}
.mrb-btn-primary {
	background: #1a1a1a;
	color: #fff;
	border: 1px solid #1a1a1a;
}
.mrb-btn-primary:hover { background: #000; }
.mrb-btn-primary:disabled { opacity: .5; cursor: default; }
.mrb-btn-ghost {
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #dcdcdc;
}
.mrb-btn-ghost:hover { background: #f7f7f5; border-color: #1a1a1a; }
.mrb-btn-danger {
	background: #fff;
	color: #b4232a;
	border: 1px solid #eccccc;
}
.mrb-btn-danger:hover { background: #fcf0f0; }

/* ---------- ログインゲート ---------- */
.mrb-login-gate {
	font-family: var(--mrb-font);
	text-align: center;
	padding: 48px 24px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	color: #1a1a1a;
}
.mrb-login-gate p { margin: 0 0 18px; color: #6b6b6b; font-size: 14px; }
.mrb-login-btn {
	display: inline-block;
	padding: 11px 26px;
	background: #1a1a1a !important;
	color: #fff !important;
	text-decoration: none;
	border-radius: 9px;
	font-size: 14px;
	letter-spacing: .04em;
}
.mrb-login-btn:hover { background: #000 !important; color: #fff !important; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 600px) {
	.mrb-topbar { padding: 16px 16px 12px; }
	.mrb-room { flex-basis: 140px; min-width: 140px; }
	.mrb-field-row { flex-direction: column; gap: 0; }
}

/* ===================== 表示切替トグル ===================== */
.mrb-viewtoggle { display: inline-flex; border: 1px solid var(--mrb-line-strong); border-radius: 11px; overflow: hidden; margin-right: 10px; }
.mrb-vt { height: 44px; min-width: 64px; padding: 0 20px; border: none; background: var(--mrb-paper); color: var(--mrb-ink-soft); font-family: var(--mrb-font); font-size: 16px; font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mrb-vt + .mrb-vt { border-left: 1px solid var(--mrb-line-strong); }
.mrb-vt:hover { background: var(--mrb-bg); }
.mrb-vt.is-active { background: var(--mrb-ink); color: #fff; }

/* ===================== 横型ボード ===================== */
.mrb-board-h { min-width: max-content; background: var(--mrb-paper); }
.mrb-hrow { display: flex; align-items: stretch; }
.mrb-hrow + .mrb-hrow { border-top: 1px solid var(--mrb-line); }
.mrb-hhead { position: sticky; top: 0; z-index: 6; background: var(--mrb-paper); }
.mrb-hgutter {
	position: sticky; left: 0; z-index: 3;
	flex: 0 0 132px; width: 132px;
	background: var(--mrb-paper); border-right: 1px solid var(--mrb-line);
	padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.mrb-hhead .mrb-hgutter { border-bottom: 1px solid var(--mrb-line); z-index: 7; }
.mrb-haxis { position: relative; height: 34px; border-bottom: 1px solid var(--mrb-line); background: var(--mrb-paper); }
.mrb-haxis-label { position: absolute; top: 10px; font-size: 11px; color: var(--mrb-ink-soft); letter-spacing: .02em; transform: translateX(-3px); }
.mrb-htrack { position: relative; background: var(--mrb-paper); }
.mrb-hslot { position: absolute; top: 0; bottom: 0; cursor: pointer; transition: background .12s ease; }
.mrb-hslot.is-hour { border-left: 1px solid var(--mrb-line); }
.mrb-hslot:not(.is-hour) { border-left: 1px dashed #f1f1f1; }
.mrb-hslot:hover { background: rgba(26, 26, 26, .035); }
.mrb-hroom .mrb-room-name { font-size: 13px; font-weight: 600; }
.mrb-hbooking {
	position: absolute; top: 6px; bottom: 6px; border-radius: 8px; color: #fff;
	padding: 6px 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.mrb-hbooking.is-editable { cursor: pointer; }
.mrb-hbooking.is-editable:hover { filter: brightness(1.05); }
.mrb-hb-title { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrb-hb-time { font-size: 10px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===================== ランディング外観（.mrb-site にスコープ）===================== */
.mrb-site{
	--s-ink:#16160f; --s-soft:#6c6a60; --s-line:#e3e1d8; --s-line2:#d4d2c8;
	--s-paper:#f6f5f0; --s-white:#fff; --s-blue:#3b6ea5; --s-green:#2f8f6b; --s-amber:#b5722f;
	--s-sans:"Zen Kaku Gothic New",-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
	--s-mincho:"Zen Old Mincho",serif; --s-mono:"Space Mono",ui-monospace,monospace;
	font-family:var(--s-sans); color:var(--s-ink); background:var(--s-paper);
	line-height:1.8; -webkit-font-smoothing:antialiased;
}
.mrb-site *:where(:not(.mrb-app, .mrb-app *)){box-sizing:border-box;margin:0;padding:0}
.mrb-site a{color:inherit;text-decoration:none}
.mrbs-wrap{width:80%;max-width:1400px;margin:0 auto;padding:0}
@media(max-width:1000px){.mrbs-wrap{width:88%}}
@media(max-width:640px){.mrbs-wrap{width:92%}}
.mrbs-eyebrow{font-family:var(--s-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--s-soft)}

/* nav */
.mrbs-nav{position:sticky;top:0;z-index:50;background:rgba(246,245,240,.85);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--s-line)}
.mrbs-nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.mrbs-brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.02em}
.mrbs-mark{width:26px;height:26px;border-radius:7px;background:var(--s-ink);position:relative;flex:0 0 auto}
.mrbs-mark::after{content:"";position:absolute;inset:7px 7px auto 7px;height:3px;border-radius:2px;background:var(--s-paper);box-shadow:0 6px 0 var(--s-paper)}
.mrbs-name{font-size:17px}.mrbs-name b{font-weight:900}
.mrbs-lockup{display:inline-flex;align-items:flex-end;gap:11px}
.mrbs-pba-wrap{display:block;line-height:0}
.mrbs-pba{height:16px;width:auto;display:block}
.mrbs-links{display:flex;align-items:center;gap:28px}
.mrbs-links a:not(.mrbs-btn){font-size:13.5px;color:var(--s-soft);transition:color .2s}
.mrbs-links a:not(.mrbs-btn):hover{color:var(--s-ink)}
.mrbs-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--s-sans);font-size:14px;font-weight:500;letter-spacing:.03em;padding:12px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s,background .18s,color .18s,border-color .18s}
.mrbs-btn .arr{transition:transform .25s}.mrbs-btn:hover .arr{transform:translateX(4px)}
.mrb-site a.mrbs-btn-ink,.mrb-site .mrbs-btn-ink{background:#16160f !important;color:#f6f5f0 !important;border-color:#16160f}
.mrb-site a.mrbs-btn-ink:hover,.mrb-site .mrbs-btn-ink:hover{background:#000 !important;transform:translateY(-2px)}
.mrb-site a.mrbs-btn-ghost,.mrb-site .mrbs-btn-ghost{background:transparent !important;color:#16160f !important;border-color:#d4d2c8}
.mrb-site a.mrbs-btn-ghost:hover,.mrb-site .mrbs-btn-ghost:hover{border-color:#16160f;transform:translateY(-2px)}
.mrb-site a.mrbs-btn-light,.mrb-site .mrbs-btn-light{background:#f6f5f0 !important;color:#16160f !important;border-color:#f6f5f0}
.mrb-site a.mrbs-btn-light:hover,.mrb-site .mrbs-btn-light:hover{transform:translateY(-2px)}
.mrb-site .mrbs-btn .arr{color:inherit}
.mrbs-nav .mrbs-btn{padding:10px 20px}
@media(max-width:760px){.mrbs-links a:not(.mrbs-btn){display:none}.mrbs-pba{height:14px}.mrbs-lockup{gap:9px}}

/* hero */
.mrbs-hero{position:relative;padding:74px 0 64px;text-align:center;overflow:hidden}
.mrbs-hero::before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:680px;height:680px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none}
.mrbs-hero .mrbs-eyebrow{display:block;margin-bottom:20px}
.mrbs-hero h1{font-family:var(--s-mincho);font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.3;letter-spacing:.01em;margin-bottom:24px}
.mrbs-hero h1 .mrbs-acc{position:relative;white-space:nowrap}
.mrbs-hero h1 .mrbs-acc::after{content:"";position:absolute;left:0;right:0;bottom:.12em;height:.18em;background:var(--s-amber);opacity:.85;z-index:-1;border-radius:2px}
.mrbs-hero p.mrbs-lead{font-size:16px;color:var(--s-soft);max-width:34em;margin:0 auto 32px;line-height:2}
.mrbs-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mrbs-anim{opacity:0;animation:mrbs-up .8s cubic-bezier(.2,.7,.2,1) forwards}
.mrbs-d1{animation-delay:.08s}.mrbs-d2{animation-delay:.16s}.mrbs-d3{animation-delay:.24s}
@keyframes mrbs-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* セクション共通 */
.mrbs-sec{padding:72px 0}
.mrbs-sec-head{max-width:760px;margin:0 auto 44px;text-align:center}
.mrbs-sec-head .mrbs-eyebrow{display:block;margin-bottom:16px}
.mrbs-sec-head h2{font-family:var(--s-mincho);font-weight:700;font-size:clamp(25px,3.4vw,38px);line-height:1.4;text-wrap:balance}
.mrbs-sec-head p{margin-top:16px;color:var(--s-soft);font-size:15px}

/* 予約セクション（ボードを内包） */
.mrbs-reserve{background:var(--s-white);border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.mrbs-reserve .mrbs-wrap{width:100%;max-width:none}
.mrbs-reserve .mrb-app{width:auto;max-width:none;margin:0}

/* features */
.mrbs-features{background:var(--s-paper)}
.mrbs-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--s-line);border:1px solid var(--s-line);border-radius:16px;overflow:hidden}
.mrbs-feat{background:var(--s-white);padding:34px 30px;transition:background .3s}
.mrbs-feat:hover{background:#fbfaf6}
.mrbs-feat .mrbs-ic{width:46px;height:46px;border:1px solid var(--s-line2);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.mrbs-feat .mrbs-ic svg{width:22px;height:22px;stroke:var(--s-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mrbs-feat h3{font-size:18px;font-weight:700;margin-bottom:10px}
.mrbs-feat p{font-size:14px;color:var(--s-soft);line-height:1.9}
@media(max-width:760px){.mrbs-feat-grid{grid-template-columns:1fr}}

/* steps */
.mrbs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:960px;margin:0 auto}
.mrbs-step{padding-top:24px;border-top:2px solid var(--s-ink)}
.mrbs-step .mrbs-num{font-family:var(--s-mono);font-size:13px;letter-spacing:.1em;color:var(--s-soft)}
.mrbs-step h3{font-family:var(--s-mincho);font-size:22px;font-weight:700;margin:12px 0 10px}
.mrbs-step p{font-size:14px;color:var(--s-soft);line-height:1.9}
@media(max-width:760px){.mrbs-steps{grid-template-columns:1fr;gap:22px}}

/* cta */
.mrbs-cta{background:var(--s-ink);color:var(--s-paper);text-align:center}
.mrbs-cta-inner{padding:96px 0}
.mrbs-cta .mrbs-eyebrow{color:rgba(246,245,240,.55);display:block;margin-bottom:20px}
.mrbs-cta h2{font-family:var(--s-mincho);font-weight:700;font-size:clamp(27px,4.2vw,46px);line-height:1.35;margin-bottom:34px}
.mrbs-dots{display:flex;gap:8px;justify-content:center;margin-bottom:30px}
.mrbs-dots i{width:9px;height:9px;border-radius:50%}

/* footer */
.mrbs-footer{background:var(--s-paper);border-top:1px solid var(--s-line)}
.mrbs-foot{display:flex;align-items:center;justify-content:space-between;padding:32px 0;flex-wrap:wrap;gap:16px}
.mrbs-foot .mrbs-copy{font-family:var(--s-mono);font-size:11.5px;color:var(--s-soft);letter-spacing:.04em}
.mrbs-foot-links{display:flex;gap:22px;font-size:13px;color:var(--s-soft)}
.mrbs-foot-links a:hover{color:var(--s-ink)}

/* ロゴ画像（外観設定で指定時） */
.mrbs-logo-img{height:28px;width:auto;display:block}
@media(max-width:760px){.mrbs-logo-img{height:24px}}

/* スタンドアロン全画面表示 */
body.mrb-standalone{margin:0;background:#f6f5f0}
body.mrb-standalone .mrb-site{min-height:100vh}

/* 現在時刻ライン */
.mrb-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #e53935; z-index: 5; pointer-events: none; }
.mrb-hnow { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #e53935; z-index: 5; pointer-events: none; }

/* ===================== スマホ対応 ===================== */
@media (max-width: 640px) {
	/* ボードのトップバーを縦積みに */
	.mrb-topbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 14px 12px; }
	.mrb-datenav { flex-wrap: wrap; gap: 8px; }
	.mrb-date-label { display: none; }            /* 日付は入力欄に出るのでラベルは省略 */
	.mrb-date-input { min-width: 130px; flex: 1; }
	.mrb-viewtoggle { margin-right: auto; }        /* トグルは左寄せで大きく */
	.mrb-vt { height: 46px; min-width: 70px; font-size: 17px; }
	.mrb-board-wrap { max-height: 66vh; }
	.mrb-title { font-size: 19px; }

	/* ランディング各セクションの余白を圧縮 */
	.mrbs-hero { padding: 44px 0 40px; }
	.mrbs-sec { padding: 52px 0; }
	.mrbs-cta-inner { padding: 64px 0; }
	.mrbs-sec-head { margin-bottom: 32px; }
	.mrbs-nav-inner { height: 58px; }
	.mrbs-hero-cta { gap: 10px; }
	.mrbs-btn { width: 100%; justify-content: center; }   /* CTAは横いっぱいで押しやすく */
	.mrbs-nav .mrbs-btn { width: auto; }                  /* ナビのボタンは従来サイズ */
	.mrbs-feat { padding: 26px 22px; }
}

/* ごく狭い画面ではナビのクレジットを隠してロゴ＋予約ボタンを優先（フッターには表示） */
@media (max-width: 480px) {
	.mrbs-nav .mrbs-pba-wrap { display: none; }
	.mrbs-name { font-size: 16px; }
}

/* モーダル: 縦に長いときは本文だけスクロール（ヘッダ/フッタ固定） */
.mrb-modal { display: flex; flex-direction: column; max-height: 90vh; }
.mrb-modal-head, .mrb-modal-foot { flex: 0 0 auto; }
.mrb-modal-body { flex: 1 1 auto; overflow-y: auto; }

/* モーダルのスマホ最適化 */
@media (max-width: 640px) {
	.mrb-modal { max-height: 92vh; }
	.mrb-modal-head { padding: 18px 18px; }
	.mrb-modal-body { padding: 18px 18px 6px; }
	.mrb-input { font-size: 16px; padding: 14px; }   /* 16px=iOSの自動ズーム防止＆タップしやすさ */
	.mrb-field { margin-bottom: 16px; }
	.mrb-field-row { flex-direction: column; gap: 0; }
	.mrb-modal-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 18px 18px; }
	.mrb-foot-right { width: 100%; margin-left: 0; gap: 10px; }
	.mrb-foot-right .mrb-btn-ghost, .mrb-foot-right .mrb-btn-primary { flex: 1; }
	.mrb-btn-danger { width: 100%; }
}

/* =========================================================
   ナビの会議室セレクト ＋ 月間カレンダー（v1.7.0）
   ========================================================= */
.mrb-roompick{
	font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
	color: var(--s-ink, #16160f); background-color: #fff;
	border: 1px solid var(--s-line, #dcdad0); border-radius: 999px;
	padding: 9px 32px 9px 15px; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316160f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; background-size: 9px 7px;
	max-width: 220px;
}
.mrb-roompick:hover{ border-color: #bdbab0; }
.mrb-roompick:focus{ outline: none; border-color: var(--s-ink, #16160f); box-shadow: 0 0 0 3px rgba(22,22,15,.08); }

.mrb-mmodal{
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: flex-start; justify-content: center;
	padding: clamp(12px, 4vw, 48px);
	background: rgba(20, 20, 15, .46); overflow-y: auto;
	animation: mrb-fade .16s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}
.mrb-mmodal[hidden]{ display: none !important; }
.mrb-mmodal-card{
	width: 100%; max-width: 760px; margin: auto; background: #fff;
	border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.28);
	overflow: hidden; animation: mrb-pop .18s cubic-bezier(.2,.8,.25,1);
}
.mrb-mm-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #efefef; }
.mrb-mm-title{ display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: .02em; color: #1a1a1a; }
.mrb-mm-dot{ width: 12px; height: 12px; border-radius: 50%; background: #1a1a1a; flex: 0 0 auto; }
.mrb-mm-name::after{ content: "の予約状況"; margin-left: 2px; font-size: 14px; font-weight: 500; color: #6b6b6b; }
.mrb-mm-close{ border: none; background: none; font-size: 26px; line-height: 1; color: #9a9a9a; cursor: pointer; padding: 0 4px; }
.mrb-mm-close:hover{ color: #1a1a1a; }

.mrb-mm-nav{ display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 24px 6px; }
.mrb-mm-arrow{ border: 1px solid #e2e2e2; background: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; line-height: 1; color: #1a1a1a; cursor: pointer; }
.mrb-mm-arrow:hover{ background: #f4f4f2; }
.mrb-mm-label{ font-size: 16px; font-weight: 700; letter-spacing: .04em; min-width: 120px; text-align: center; }

.mrb-mm-body{ padding: 8px 18px 22px; }
.mrb-mm-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mrb-mm-wd{ text-align: center; font-size: 12px; font-weight: 700; color: #8a8a86; padding: 4px 0; }
.mrb-mm-wd.is-sun{ color: #c0392b; }
.mrb-mm-wd.is-sat{ color: #2a72b5; }
.mrb-mm-cell{ min-height: 86px; border: 1px solid #eee; border-radius: 9px; padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 3px; background: #fff; }
.mrb-mm-cell.is-empty{ border: none; background: transparent; }
.mrb-mm-cell.is-clickable{ cursor: pointer; }
.mrb-mm-cell.is-clickable:hover{ border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(26,26,26,.06); }
.mrb-mm-cell.is-today{ background: #fbf7ee; border-color: #e6c48a; }
.mrb-mm-num{ font-size: 12px; font-weight: 700; color: #444; }
.mrb-mm-cell.is-sun .mrb-mm-num{ color: #c0392b; }
.mrb-mm-cell.is-sat .mrb-mm-num{ color: #2a72b5; }
.mrb-mm-chip{ font-size: 10.5px; line-height: 1.35; color: #fff; background: #1a1a1a; border-radius: 4px; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrb-mm-more{ font-size: 10px; color: #8a8a86; padding-left: 2px; }
.mrb-mm-loading{ grid-column: 1 / -1; text-align: center; color: #8a8a86; padding: 44px 0; font-size: 14px; }

.mrb-mm-detail{ margin-top: 18px; border-top: 1px solid #eee; padding-top: 16px; }
.mrb-mm-detail-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mrb-mm-detail-head span{ font-size: 15px; font-weight: 700; color: #1a1a1a; }
.mrb-mm-jump{ border: 1px solid #dcdcdc; background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; color: #1a1a1a; white-space: nowrap; }
.mrb-mm-jump:hover{ background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.mrb-mm-detail-list{ display: flex; flex-direction: column; gap: 8px; }
.mrb-mm-drow{ display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; background: #f7f7f5; border-radius: 8px; }
.mrb-mm-dtime{ font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: #1a1a1a; flex: 0 0 auto; }
.mrb-mm-dtitle{ font-size: 14px; color: #1a1a1a; flex: 1 1 auto; }
.mrb-mm-dbooker{ font-size: 12px; color: #6b6b6b; flex: 0 0 auto; }

@media (max-width: 560px){
	.mrb-mm-body{ padding: 6px 10px 18px; }
	.mrb-mm-grid{ gap: 4px; }
	.mrb-mm-cell{ min-height: 60px; padding: 3px; }
	.mrb-mm-num{ font-size: 11px; }
	.mrb-mm-chip{ font-size: 9px; padding: 1px 3px; }
	.mrb-mm-detail-head{ flex-direction: column; align-items: stretch; }
}

/* ===== 予約のホバー・ツールチップ（v1.7.1） ===== */
.mrb-tip{
	position: fixed; z-index: 99990; max-width: 300px;
	background: #1f1f17; color: #f3f1ea;
	border-radius: 11px; padding: 12px 14px;
	box-shadow: 0 12px 34px rgba(0,0,0,.30);
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	font-size: 12.5px; line-height: 1.55; letter-spacing: .01em;
	pointer-events: none; animation: mrb-fade .12s ease;
}
.mrb-tip[hidden]{ display: none !important; }
.mrb-tip-title{ font-size: 14px; font-weight: 700; letter-spacing: .02em; margin-bottom: 8px; }
.mrb-tip-row{ display: flex; gap: 9px; margin-top: 4px; }
.mrb-tip-label{ flex: 0 0 auto; width: 3.6em; color: #a9a69b; font-size: 11.5px; }
.mrb-tip-val{ flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; }

/* ===== ゲスト最小表示（予約ボードのみ・v1.8.0） ===== */
/* 折りたたみ式: 既定は予約ボードだけ。ボタンで開くと全部見える */
.mrb-site-minimal .mrbs-hero,
.mrb-site-minimal .mrbs-features,
.mrb-site-minimal #mrbs-how,
.mrb-site-minimal .mrbs-cta,
.mrb-site-minimal .mrbs-foot-links{ display: none; }
.mrb-site-minimal.is-intro-open .mrbs-hero,
.mrb-site-minimal.is-intro-open .mrbs-features,
.mrb-site-minimal.is-intro-open #mrbs-how,
.mrb-site-minimal.is-intro-open .mrbs-cta{ display: block; }
.mrb-site-minimal.is-intro-open .mrbs-foot-links{ display: flex; }
.mrb-site-minimal:not(.is-intro-open) .mrbs-reserve{ padding-top: clamp(30px, 6vw, 66px); }

/* ナビの「案内を見る」最小化トグル */
.mrbs-introtoggle{
	font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
	color: var(--s-ink, #16160f); background: #fff;
	border: 1px solid var(--s-line, #dcdad0); border-radius: 999px;
	padding: 9px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
	transition: background .15s, border-color .15s;
}
.mrbs-introtoggle:hover{ background: #f1efe8; border-color: #bdbab0; }
.mrbs-introtoggle .arr{ font-size: 11px; }

/* ===== 予約モーダルの色スウォッチ（v1.9.0） ===== */
.mrb-swatches{ display: flex; flex-wrap: wrap; gap: 9px; }
.mrb-sw{ width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); background: var(--sw, #ccc); cursor: pointer; padding: 0; }
.mrb-sw.is-sel{ outline: 2px solid #1a1a1a; outline-offset: 2px; }
.mrb-sw-auto{ width: auto; height: 30px; padding: 0 12px; background: #fff; border: 1px dashed #b9b9b9; font-size: 11.5px; color: #555; font-family: var(--mrb-font); }
.mrb-sw-auto.is-sel{ outline: 2px solid #1a1a1a; outline-offset: 2px; color: #1a1a1a; }

/* ===== 背景ドラッグで予約作成（v1.10.0） ===== */
.mrb-track, .mrb-htrack { -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.mrb-htrack { touch-action: pan-x; }
.mrb-selrange{
	position: absolute; z-index: 4; pointer-events: none;
	background: rgba(26,26,26,.12);
	border: 1.5px dashed #1a1a1a; border-radius: 7px;
}
.mrb-draghint{
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 12px; padding: 9px 12px;
	background: #f3efe6; border: 1px solid #e7dfcc; border-radius: 10px;
	color: #6a5a3a; font-size: 13px; line-height: 1.5;
}
.mrb-draghint[hidden]{ display: none; }
.mrb-draghint-ic{ flex: 0 0 auto; color: #b5722f; }
.mrb-draghint strong{ font-weight: 700; color: #4a3c22; }
.mrb-draghint span{ flex: 1 1 auto; }
.mrb-draghint-x{
	flex: 0 0 auto; border: none; background: none; cursor: pointer;
	font-size: 18px; line-height: 1; color: #b0a486; padding: 0 2px;
}
.mrb-draghint-x:hover{ color: #6a5a3a; }

/* ===== ゲスト編集パスワード欄 / カレンダー予約ボタン（v1.11.0） ===== */
.mrb-field-note{ margin: 7px 0 0; font-size: 12px; color: #8a8a86; line-height: 1.5; }
.mrb-field[hidden]{ display: none; }

.mrb-mm-detail-btns{ display: flex; gap: 8px; flex-wrap: wrap; }
.mrb-mm-add{
	border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff;
	border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.mrb-mm-add:hover{ background: #000; }
.mrb-mm-none{ color: #8a8a86; font-size: 13.5px; padding: 6px 2px 2px; }