.option-card {
	background: #fff;
	border-radius: clamp(10px, 2vw, 20px);
	display: grid;
	grid-template-columns: 20% 1fr;
	max-width: 1000px;
	padding: clamp(10px, 3vw, 30px);
	gap: clamp(10px, 3vw, 30px);
	width: 100%;
	margin: 0 auto;
}
.option-text {
	font-size: clamp(13px, 1.8vw, 18px);
	display: block;
	font-weight: 600;
	color: #173e8c;
}
.option-card .option-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.option-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	color: #173e8c;
}
.option-item {
	text-align: center;
	align-content: center;
	border: 1px solid #173e8c;
	border-radius: 30px;
	letter-spacing: -0.05em;
	font-size: 15px;
	padding: 0 15px;
	line-height: 1.2;
}
@media screen and (min-width: 768px) {
	.option-item {
		height: 49.03px;
	}
}
.option-list .option-item {
	width: calc((100% - 30px) / 3);
	box-sizing: border-box;
}
@media screen and (min-width: 768px) and (max-width: 960px) {
	.option-list .option-item {
		width: calc((100% - 15px) / 2);
	}
}
.option-card .option-item:nth-child(n + 6) {
	display: none;
}
.option-item .option-text {
	font-size: 15px;
	color: #173e8c;
}
.more-button.all-option-button {
	color: #999999;
	position: relative;
	margin-top: 5px;
}
.more-button.all-option-button:after {
	content: "";
	background: url(https://asset.baystars.co.jp/images/fanclub/mypage/arrow_r_gray.png) center / contain no-repeat;
	width: clamp(3px, 0.9vw, 9px);
	height: clamp(3px, 0.9vw, 9px);
	right: -20%;
	display: inline-block;
	position: absolute;
	top: 53%;
	transform: translateY(-50%) rotate(90deg);
}

@media screen and (min-width: 768px) {
	.link-button--arrow:after {
		width: 9px;
		height: 13.5px;
	}
}

/* ========================================
   Suggest Modal (using <dialog> for top-layer)
   ======================================== */
dialog#optionModal {
	border: none;
	padding: 0;
	background: transparent;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100vh;
	overflow-y: hidden;
	margin: 0;
}
dialog#optionModal::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
.option-modal {
	background: #fff;
	border-radius: 16px;
	width: calc(100% - 40px);
	max-width: 400px;
	margin: 80px auto;
	box-shadow: 0 8px 40px rgba(0,0,0,0.3);
	animation: slideUp 0.3s ease;
}
body:has(dialog[open]) {
	overflow: hidden;
}
@keyframes slideUp {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
dialog[open]#optionModal {
	display: grid;
	place-items: center;
}
dialog[open] .option-modal {
	display: block;
	max-width: 1000px;
	width: calc(100% - 40px);
	padding: 24px;
}
.option-modal {
	background: #fff; border-radius: 16px; max-width: 400px;
	width: 100%; overflow: hidden;
	box-shadow: 0 8px 40px rgba(0,0,0,0.3); animation: slideUp 0.3s ease;
}
.option-modal .heading.heading_mb {
	margin: clamp(24px, 5vw, 52px) 0;
}
.option-modal-container {
	padding: 24px;
	overflow-y: auto;
	max-height: 60vh;
	scrollbar-width: thin;
	scrollbar-color: #888888 transparent;
}
.option-modal-container::-webkit-scrollbar {
	width: 6px;
}
.option-modal-container::-webkit-scrollbar-track {
	background: transparent;
}
.option-modal-container::-webkit-scrollbar-thumb {
	background: #888888;
	border-radius: 10px;
}
.option-modal-container::-webkit-scrollbar-thumb:hover {
	background: #666666;
}
.option-modal-header {
	padding-bottom: 24px ;
}
.option-title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	font-size: 14px;
	color: #666666;
}
.option-title::before,
.option-title::after {
	content: "";
	flex-grow: 1;
	border-top: 2px dotted #bbbbbb;
}
.option-title::before {
	margin-right: 15px;
}
.option-title::after {
	margin-left: 15px;
}
.modal-actions {
	display: flex; flex-direction: column; gap: 10px;
}
.option-modal-actions {
	padding-top: 10px;
}

.option-modal-actions .btn-modal {
	display: block;
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 8px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s;
	text-align: center;
	text-decoration: none;
}

.option-modal-actions .btn-modal:hover {
	opacity: 0.85;
}

.option-modal-actions .btn-primary {
	background: #173e8c;
	color: #fff;
}

.option-modal-actions .btn-secondary {
	background: transparent;
	color: #999;
	font-weight: 400;
	font-size: 13px;
	padding: 10px;
}
.text__color--accent {
	color: #f75239;
}
/* ========================================
   SP
   ======================================== */
.option-card.sp {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 20px 0;
	box-sizing: border-box;
	margin-bottom: 20px;
	border-bottom: 2px dotted #bbbbbb;
	border-radius: 0;
}
.option-card.sp .option__left-column {
	width: 100%;
	margin-bottom: 20px;
}
.option-card.sp .left-text {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	font-size: 13px;
	color: #666666;
	font-weight: bold;
}
.option-card.sp .left-text::before,
.option-card.sp .left-text::after {
	content: "";
	flex-grow: 1;
	border-top: 2px dotted #bbbbbb;
}
.option-card.sp .left-text::before { margin-right: 15px; }
.option-card.sp .left-text::after { margin-left: 15px; }
.option-card.sp .option__right-column {
	width: 100%;
}
@media screen and (max-width: 768px) {
	.option-text {
		color: #666666;
	}
	.option-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
		margin-bottom: 20px;
	}
	.option-list .option-item {
		width: 100%;
		border: 1.5px solid #173e8c;
		color: #173e8c;
		border-radius: 25px;
		padding: 0 15px;
		box-sizing: border-box;
		text-align: center;
		background-color: #ffffff;
		line-height: 38px;
	}
	dialog[open] .option-modal {
		padding: 15px;
	}
	.option-modal-container {
		padding: 8px;
	}
	.option-modal .option-list .option-item {
		line-height: 1.2;
		min-height: 49.5px;
	}
}
.option-card.sp .option-item .option-text {
	display: block;
	font-size: 14px;
	color: #173e8c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
}
.option-card.sp .more-button.all-option-button {
	background: none;
	border: none;
	color: #666666;
	font-size: 13px;
	padding-right: 18px;
	position: relative;
	cursor: pointer;
	width: 100%;
	margin: 0;
}
.option-card.sp .more-button.all-option-button::after {
	content: "";
	background: url(https://asset.baystars.co.jp/images/fanclub/mypage/arrow_r_gray.png) center / contain no-repeat;
	width: 8px;
	height: 14px;
	position: absolute;
	right: 34%;
	top: 52%;
	transform: translateY(-50%) rotate(90deg);
}