/*
 * 宿プランの見た目。
 *
 * ねらいは「カードだけだと押されにくい」の解消なので、**ボタンを目立たせる**。
 * SWELL の本文幅に収まるよう、はみ出す要素を作らない。
 */

.yadoplan {
	border: 1px solid #e2e5e9;
	border-radius: 10px;
	padding: 16px;
	margin: 1.6em 0;
	background: #fff;
}

.yadoplan__name {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.5;
	margin: 0 0 4px;
}

.yadoplan__special {
	font-size: 0.86em;
	color: #5b6472;
	margin: 0 0 10px;
}

/* --- 画像。無いものは出さないので、1枚でも2枚でも崩れない並べ方にする --- */
.yadoplan__images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.yadoplan__img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.yadoplan__images a {
	flex: 1 1 220px;
	min-width: 0; /* flex の中で画像がはみ出さないように */
}

/* --- 数字 --- */
.yadoplan__facts {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.92em;
}

.yadoplan__facts li { margin: 0; }
.yadoplan__facts strong { color: #c1272d; }

.yadoplan__rates {
	list-style: none;
	margin: 0 0 12px;
	padding: 10px;
	background: #f7f8fa;
	border-radius: 6px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 4px 10px;
	font-size: 0.84em;
}

.yadoplan__rates li {
	margin: 0;
	display: flex;
	justify-content: space-between;
	gap: 6px;
}

.yadoplan__rate-name { color: #5b6472; }
.yadoplan__rate-val { font-weight: 700; }

/* --- プラン --- */
.yadoplan__plans {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.9em;
}

.yadoplan__plans li {
	margin: 0;
	padding: 8px 0;
	border-top: 1px dashed #e2e5e9;
}

.yadoplan__plan-name { display: block; }
.yadoplan__plan-room { display: block; color: #5b6472; font-size: 0.92em; }
.yadoplan__plan-charge { font-weight: 700; color: #c1272d; }

/* --- ボタン。ここが本題 --- */
.yadoplan__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.yadoplan__btn {
	flex: 1 1 46%;
	min-width: 0;
	text-align: center;
	padding: 12px 10px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.3;
	color: #fff;
	background: #bf0000; /* 楽天の赤 */
}

.yadoplan__btn:hover { filter: brightness(1.08); }

/* 主役はプラン一覧。それ以外は控えめにして迷わせない */
.yadoplan__btn--plan { flex-basis: 100%; font-size: 1.02em; }
.yadoplan__btn--dp { background: #d4761a; }
.yadoplan__btn--review,
.yadoplan__btn--info {
	background: #fff;
	color: #414a56;
	border: 1px solid #cfd5dc;
	font-weight: 600;
	font-size: 0.9em;
	padding: 9px 10px;
}

/* --- アクセス --- */
.yadoplan__map { margin-top: 12px; }
.yadoplan__access { font-size: 0.86em; color: #5b6472; margin: 0 0 8px; }
.yadoplan__img--map { border: 1px solid #e2e5e9; }

/* --- 規約のクレジット。右下に小さく（消さないこと） --- */
.yadoplan__credit {
	margin: 12px 0 0;
	text-align: right;
	font-size: 0.72em;
	line-height: 1.5;
	color: #8b95a1;
}

.yadoplan__credit a { color: #8b95a1; text-decoration: underline; }
.yadoplan__credit-sub { display: block; }

@media (max-width: 480px) {
	.yadoplan { padding: 12px; }
	.yadoplan__btn { flex-basis: 100%; }
}

/* --- 簡易表示。1記事に何枚も入るので、うるさくしない --- */
.yadoplan--compact {
	padding: 12px 14px;
	background: #fbfcfd;
}

.yadoplan--compact .yadoplan__name {
	font-size: 0.95em;
	margin-bottom: 6px;
}

.yadoplan--compact .yadoplan__facts { margin-bottom: 8px; font-size: 0.88em; }
.yadoplan--compact .yadoplan__btns { margin-top: 8px; }
.yadoplan--compact .yadoplan__btn { padding: 10px; font-size: 0.95em; }
.yadoplan--compact .yadoplan__btn--plan { flex-basis: 100%; }
.yadoplan--compact .yadoplan__credit { margin-top: 8px; }