/* =========================================================
   Restaurant Ad Builder — front CSS
   デザインは Hotel Ad Builder と完全に同じ（hab-* クラスを流用）。
   このファイルだけ読み込めば単独でも同じ見た目になるよう、
   共通スタイル（hab-*）も内包しています。
    -------------------------------------------------------
   ■ クラス構成
   - hab-*  : ホテルと共通のデザイン（形状・サイズ・グリッド）
   - rab-*  : レストラン分離用。後でホテルと分けたくなったらここを上書き
   - rab-btn-{slug} : ボタンの「色」専用クラス（ホテルとは別管理）
   - rab-btn-label-ribbon : 各ボタン上のリボン状ラベル（添付画像準拠）
   ========================================================= */

/* ===== 全体ボックス（ホテル hab-block 互換） ===== */
.hab-ad.rab-ad { margin: 1.5em 0; }

.rab-ad .hab-block {
	width: 100%;
	background: #F6F5F0;             /* 全体の背景カラー（ホテルと同じ） */
	overflow: hidden;
	border-radius: 0;
	box-sizing: border-box;
	padding: 3% 4%;
	margin-bottom: 1.8em;
}
.rab-ad .hab-block:last-child { margin-bottom: 0; }

/* ===== 見出し（ホテル hab-heading 互換） ===== */
.rab-ad .hab-heading {
	width: 100%;
	margin: 0 auto 10px auto;
	padding: 0 0 0 7px;
	border-left: 3px solid #e8a2a2;
	text-align: left;
	font-weight: 700;
	font-size: 16px;
	color: #333;
	line-height: 1.5;
	box-sizing: border-box;
}

/* ===== 後文言（ホテル hab-after 互換） ===== */
.rab-ad .hab-after {
	font-size: 14px;
	color: #555;
	margin-top: 14px;
	line-height: 1.8;
}

/* =========================================================
   ボタングリッド（ホテル hab-b-buttons 互換）
   1ボタンは .rab-btn-wrap（ラベル＋ボタン）単位で並ぶ
   ========================================================= */
.rab-ad .hab-b-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px 14px;
	align-items: end;          /* ラベル有無で高さがズレても下端を揃える */
}

/* 1ボタン分のラッパ（ラベルとボタンを縦に積む） */
.rab-btn-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* =========================================================
   共通ボタン（ホテル hab-btn 互換：ピル型）
   ※色は付けない。色は rab-btn-{slug} で個別指定。
   ========================================================= */
.rab-ad .hab-btn {
	width: 100%;
	display: inline-block;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	color: #FFFFFF !important;
	font-size: 14px;
	font-weight: bold;
	line-height: 180%;
	padding: 4% 1% 3% 1%;
	margin: 1px 0;
	background: #e8a2a2;                   /* 既定色（rab-btn-{slug}で上書き） */
	border-bottom: solid 3px #c08585;     /* 立体感（既定。slug側で上書き） */
	border-radius: 100px;                 /* ピル型 */
	transition: opacity .15s ease, transform .08s ease;
}
.rab-ad .hab-btn:hover  { opacity: .9; color:#fff !important; }
.rab-ad .hab-btn:active {
	transform: translateY(2px);
	border-bottom-width: 1px;
}
.rab-ad .hab-btn-label { display: inline-block; }

/* 右端の矢印（ホテル互換：白線2本を45度回転した「>」） */
.rab-ad .hab-btn::before {
	content: '';
	width: 6px;
	height: 6px;
	border-top: solid 2px #FFFFFF;
	border-right: solid 2px #FFFFFF;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   ▼ ボタンの色（レストラン専用・ホテルとは別クラス）
   後から色を変えたいときは、ここの background / border-bottom を編集。
   ========================================================= */
/* 一休.comレストラン（紺系） */
.rab-btn-ikyu_res {
	background: #b30000;
	border-bottom-color: #800000;
}
/* OZmall（オズモールのピンク〜マゼンタ系） */
.rab-btn-ozmall {
	background: #e2007a;
	border-bottom-color: #a60059;
}
/* 公式サイト（落ち着いたグレー系） */
.rab-btn-official {
	background: #5a5a5a;
	border-bottom-color: #3c3c3c;
}

/* =========================================================
   ▼ ボタン上のラベル（赤文字・背景なし）
   ボタンの上に置く「ポイント10倍！」のような小さなラベル。
   色は rab-ribbon-{slug} で個別変更可。
   ========================================================= */
.rab-btn-label-ribbon {
	display: block;
	width: 100%;
	margin: 0 0 4px 0;
	padding: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	color: #e60000;            /* 赤文字（既定） */
	background: none;
	text-align: center;
	box-sizing: border-box;
}

/* ラベルの文字色（レストラン専用・slugごと）。後から色変更する場合はここを編集。 */
.rab-ribbon-ikyu_res { color: #e60000; }
.rab-ribbon-ozmall   { color: #e60000; }
.rab-ribbon-official { color: #e60000; }

/* =========================================================
   レスポンシブ（ホテル互換：スマホ2列）
   ========================================================= */
@media screen and (max-width: 480px) {
	.rab-ad .hab-b-buttons {
		grid-template-columns: 1fr 1fr;
		gap: 10px 8px;
	}
	.rab-ad .hab-btn {
		font-size: 80%;
	}
	.rab-btn-label-ribbon {
		font-size: 10px;
	}
}

/* =========================================================
   ▼ カスタマイズ用サンプル
   ========================================================= */
/* 例）OZmallボタンを非表示： .rab-btn-ozmall { display:none !important; } */
/* 例）一休レストランの色変更： .rab-btn-ikyu_res { background:#1a3a6b; border-bottom-color:#102347; } */
/* 例）一休のラベル色変更： .rab-ribbon-ikyu_res{ color:#ff6600; } */

/* 見出しの接尾文言を非表示： .rab-ad .hab-suffix { display:none !important; } */
/* ボタン後の文言を非表示： .rab-ad .hab-after { display:none !important; } */
/* 店舗名だけ色変更： .rab-ad .hab-hotel-name { color:#c0392b; } */