/* [sbhk_cb_text] の段落。ショートコードの出力は記事本文の直下の段落にならないので、テーマの段落間隔が当たらない。
   SWELLの段落と同じ間隔を自前で当てる(文字の大きさや行間はテーマのまま) */
.sbhk-p {
	margin: 0 0 var(--swl-block-margin, 2em);
}

/* [sbhk_cb_table] の表。列の多い表(実質月額など)が本文の幅を超えて横の目次に重ならないよう、表だけを横にスクロールさせる(hikari-cashback-ranking と同じ) */
.wp-block-table.sbhk-scroll {
	overflow-x: auto;
	max-width: 100%;
}

/* まとめの表の「受け取りの手続き」の列。スマホでは列を隠し、受け取り時期の下に小さく出す(列が多くて窓口名と額が折り返すため) */
.sbhk-proc-sp {
	display: none;
}

@media (max-width: 599px) {
	.wp-block-table .sbhk-proc {
		display: none;
	}

	.sbhk-proc-sp {
		display: block;
		margin-top: .3em;
	}
}

/* [sbhk_cb_table type="ranking"] の区分の切り替え(ドコモ光の切り替えボタンと同じ見た目) */
.sbhk-sw-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em;
	margin: 0 0 .7em;
}

.sbhk-sw-bar[hidden],
.sbhk-sw-panel[hidden] {
	display: none !important;
}

.sbhk-sw-btn {
	appearance: none;
	border: 2px solid #e8452c;
	background: #fff;
	color: #e8452c;
	padding: .35em 1.1em;
	border-radius: 999px;
	font-weight: bold;
	line-height: 1.4;
	cursor: pointer;
}

.sbhk-sw-btn[aria-pressed="true"] {
	background: #e8452c;
	color: #fff;
}

.sbhk-sw-btn:focus-visible {
	outline: 2px solid #1d2327;
	outline-offset: 2px;
}

/* ===== ランキング表(ドコモ光 hikari-cashback-ranking のランキング表と同じ形と装飾) ===== */
/* 項目名(th)は中央・内容(td)は左寄せ、上下は中央。文字の色・大きさと枠線はテーマに任せる */
.wp-block-table.sbhk-rank-wrap {
	margin: 0 0 .6em;
	overflow-x: auto;
	container-type: inline-size;
}

/* 列幅は中身から決める。折れない語(窓口名・額・ボタン)の幅が確保され、折り返すのは手続きの文だけ */
.sbhk-rank-wrap .sbhk-rtable {
	width: 100%;
	table-layout: auto !important;
}

.sbhk-rank-wrap .sbhk-rtable th,
.sbhk-rank-wrap .sbhk-rtable td {
	padding: .8em .5em;
	vertical-align: middle;
}

.sbhk-rank-wrap .sbhk-rtable thead th {
	word-break: keep-all;
}

.sbhk-rank-wrap .sbhk-rtable th {
	text-align: center;
}

.sbhk-rank-wrap .sbhk-rtable td {
	text-align: left;
}

/* 順位バッジ(1〜3位はメダルの色) */
.sbhk-rank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	margin: 0 auto .45em;
	border-radius: 50%;
	background: #8c96a0;
	color: #fff;
	font-weight: bold;
	line-height: 1;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

.sbhk-rank small {
	font-size: .6em;
	margin-left: .05em;
	font-weight: bold;
}

.sbhk-rank-1 {
	background: linear-gradient(135deg, #f9e27d 0%, #d9a514 55%, #b8860b 100%);
	box-shadow: 0 2px 6px rgba(184, 134, 11, .45);
}

.sbhk-rank-2 {
	background: linear-gradient(135deg, #eef1f4 0%, #aab3bc 55%, #8a949e 100%);
}

.sbhk-rank-3 {
	background: linear-gradient(135deg, #f0c39b 0%, #c27c45 55%, #9c5a2b 100%);
}

/* 窓口名の上のロゴ(ドコモ光と同じ高さ24px) */
.sbhk-logo {
	display: block;
	height: 24px;
	width: auto;
	max-width: 100%;
	margin: 0 auto .3em;
	object-fit: contain;
}

.sbhk-namebox {
	display: block;
}

/* 窓口名は単語の途中で切らない(列のほうが窓口名に合わせて広がる) */
.sbhk-name {
	display: block;
	word-break: keep-all;
}

/* 額 */
.sbhk-amount {
	display: block;
	font-weight: bold;
	white-space: nowrap;
	font-size: 1.15em;
}

/* 受け取り時期(太字)と、その下の手続き(バッジ) */
.sbhk-when {
	display: block;
	font-weight: bold;
	word-break: keep-all;
	margin-bottom: .2em;
}

.sbhk-rank-wrap .sbhk-proc {
	display: inline-block;
	margin: 0 0 .3em;
	padding: 0 .5em;
	border-radius: .8em;
	font-size: .85em;
	letter-spacing: 0;
}

/* 額がページに無い窓口(なし) */
.sbhk-rtable tr.sbhk-row-none th,
.sbhk-rtable tr.sbhk-row-none td {
	color: #888;
}

/* 申し込みボタン(ドコモ光と同じ赤いボタン。表の中では少し小さく、セル幅いっぱい) */
.sbhk-btn {
	display: inline-block;
	padding: .6em 1.2em;
	border-radius: 6px;
	background: #e8452c;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: bold;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 3px 0 #b8321d;
	transition: transform .1s, box-shadow .1s;
}

.sbhk-btn::after {
	content: "›";
	margin-left: .4em;
}

.sbhk-btn:hover {
	transform: translateY(1px);
	box-shadow: 0 2px 0 #b8321d;
}

.sbhk-rank-wrap .sbhk-rtable td.sbhk-c-apply .sbhk-btn {
	display: block;
	font-size: .85em;
	padding-left: .5em;
	padding-right: .5em;
	letter-spacing: 0;
	text-align: center;
}

/* 狭いとき: 1窓口1枚のカード。画面幅ではなく「表に使える幅」で切り替える */
@container (max-width: 760px) {
	.sbhk-rtable,
	.sbhk-rtable tbody,
	.sbhk-rtable tr,
	.sbhk-rtable th,
	.sbhk-rtable td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.sbhk-rtable thead {
		display: none;
	}

	.sbhk-rtable tr {
		margin: 0 0 1.2em;
	}

	.sbhk-rtable th.sbhk-c-name {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .6em;
		padding: .8em;
	}

	.sbhk-rtable th.sbhk-c-name .sbhk-rank {
		margin: 0;
	}

	.sbhk-rtable th.sbhk-c-name .sbhk-name {
		display: inline;
	}

	/* 見出しを上、内容を左寄せで下に */
	.sbhk-rtable td {
		padding: .7em 1em !important;
	}

	.sbhk-rtable td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: .2em;
		font-weight: bold;
	}

	/* 空の欄(｢なし｣の窓口の受け取り、ボタンの無い窓口)はカードに出さない */
	.sbhk-rtable td:empty {
		display: none;
	}
}