/* =========================================================
   Hotel Ad Builder — front CSS
   トマレバ互換デザイン（淡いピンクのピル型ボタン）
   タイプA = 左に画像 + 右に同じボタン群（PC時は横並び）
   タイプB = ボタン群のみ（PC時は横並び自動）
   各ボタンは .hab-btn-{slug} で個別制御可能
   ========================================================= */

.hab-ad { margin: 1.5em 0; }

/* 全体ボックス（トマレバ .tomarebalink-box 互換） */
.hab-block {
	width: 100%;
	background: #F6F5F0;             /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 0;
	box-sizing: border-box;
	padding: 3% 4%;
	margin-bottom: 1.8em;
}
.hab-block:last-child { margin-bottom: 0; }

/* 見出し（トマレバ .cstmreba_ttl01 互換） */
.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 {
	font-size: 14px;
	color: #555;
	margin-top: 14px;
	line-height: 1.8;
}

/* ===== 共通ボタン（トマレバ互換のピル型） ===== */
.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: 10px 1% 8px 1%;
	margin: 0;
	background: #e8a2a2;                   /* トマレバのピンク */
	border-bottom: solid 3px #c08585;     /* 立体感のある下ボーダー */
	border-radius: 100px;                 /* ピル型 */
	transition: opacity .15s ease, transform .08s ease;
}
.hab-btn:hover  { opacity: .9; color:#fff !important; }
.hab-btn:active {
	transform: translateY(2px);
	border-bottom-width: 1px;             /* 押し込むと影が縮む */
}

.hab-btn-label { display: inline-block; }

/* 右端の矢印（トマレバ互換：白線2本を45度回転した「>」型・全ボタン共通） */
.hab-btn::before {
	content: '';
	width: 6px;
	height: 6px;
	border-top: solid 2px #FFFFFF;
	border-right: solid 2px #FFFFFF;
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   【PCサイズ】タイプB：ボタン群のみ（横幅に合せて自動配置）
   ========================================================= */
.hab-b-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 14px;
}

/* =========================================================
   【PCサイズ】タイプA：左に画像 + 右に同じボタン群
   ========================================================= */
.hab-a-wrap {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.hab-a-image {
	flex: 0 0 240px;
	max-width: 240px;
	width: 100%;
}
.hab-a-image img {
	width: 100%;
	aspect-ratio: 16 / 9;           /* PC時も16:9比率 */
	height: auto;
	object-fit: cover;              /* つぶさず上下を切る */
	object-position: center;
	border-radius: 6px;
	display: block;
}
.hab-a-buttons {
	flex: 1 1 auto;
	display: grid;
	/* PCサイズでBのボタン幅と極力揃えるため、Aの最小幅も200pxに統一 */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 14px;
	align-content: flex-start;
}

/* =========================================================
   レスポンシブ：Bが2列になるタイミング（740px以下）でAも連動
   ========================================================= */
@media screen and (max-width: 740px) {
	/* タイプA：PCの左右並びを解除、画像を上、ボタンを下に */
	.hab-a-wrap {
		display: block;
	}
	.hab-a-image {
		width: 100%;
		max-width: 100%;
		margin-bottom: 12px;
	}
	.hab-a-image img {
		aspect-ratio: 16 / 9;       /* 常に16:9比率を維持して上下カット */
		height: auto;
	}
	.hab-a-buttons {
		width: 100%;
	}
	
	/* A・B 共通：この画面幅以下では、強制的に「全く同じ幅の均等2列」に固定 */
	.hab-b-buttons,
	.hab-a-buttons {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px;
	}
	.hab-btn {
		font-size: 85%;
	}
}

/* 小さなスマホ向け調整 */
@media screen and (max-width: 380px) {
	.hab-btn {
		font-size: 75%;
	}
}