:root {
	--ja: 'Noto Sans JP', sans-serif;
	--en: 'Poppins', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--ja);
	background-color: #f0eeec;
	min-height: 100vh;
	height: auto !important;
	color: #000;
	padding-bottom: 180px;
}

.brandingscore-container {
	max-width: 1024px;
	margin: 0 auto;
	padding: 1rem;
	margin-top: 22px;
	margin-left: 0;
}

/* PC版（大画面）: Our Clientと同じ左パディングを設定 */
@media screen and (min-width: 1281px) {
	.brandingscore-container {
		padding-left: 256px; /* 固定値256px - Our Clientの.innerと揃える */
		max-width: calc(1024px + 256px); /* パディング分を最大幅に追加 */
	}
}

.card {
	background: transparent;
	border-radius: 0px;
	overflow: hidden;
	min-height: 520px;
	will-change: height;
	transition: height 0.3s;
	border: none;
	box-shadow: none;
	background-color: #ffffff;
	/* 白背景を左に40px延長 */
	margin-left: -40px;
	padding-left: 40px;
}

/* PC版のみ: 白枠の右マージン */
@media screen and (min-width: 801px) {
	.card {
		/* 白枠の右側にマージンを追加してグレー余白を残す */
		/* margin-right: 100px; */
	}
}

/* 1280px以下: padding-leftをリセット */
@media screen and (max-width: 1280px) and (min-width: 801px) {
	.brandingscore-container {
		padding-left: 1rem; /* 中間サイズ: 左パディングをリセット */
	}
	
	.card {
		margin-left: 100px; /* 中間サイズ: 白背景の延長をリセット */
		/* padding-left: 0; */
		margin-right: 100px;
	}
}

.card-content {
	padding: 40px 0;
}

#intro-screen .title {
	width: 100%;
	font-size: 56px;
	line-height: 39px;
	font-family: var(--en);
	font-weight: 200;
	margin-bottom: 70px;
}

#intro-screen .subtitle {
	font-family: var(--ja);
	font-weight: 500;
	font-size: 15px;
	line-height: 10px;
	margin-top: 24px;
}

#intro-screen .divider {
	width: 80px;
	height: 1px;
	background-color: #d1d5db;
	margin: 2rem auto;
	display: none;
}
#intro-screen .text-center {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
#intro-screen .mb-8 {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 60px;
	max-width: 646px;
	width: 100%;
}
#intro-screen .mb-8 .text-gray {
	line-height: 1.5;
	letter-spacing: 0.03em;
	font-size: 14px;
}
/* ボタンのホバーアニメーション */
#intro-screen .btn {
	max-width: 646px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	padding: 0;
	background-color: transparent;
	color: black;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	overflow: hidden;
	height: 48px;
	position: relative;
}
#intro-screen .btn::before,
#intro-screen .btn::after {
	content: '';
	display: block;
	background: currentcolor;
	right: 24%;
	height: 1px;
	width: 100%;
	position: absolute;
	bottom: 0;
	transition: 0.5s;
}
#intro-screen .btn::before {
	transform: rotate(45deg);
	transform-origin: right bottom;
	margin-bottom: -1px;
	margin-right: -1px;
}
#intro-screen .btn:hover::before,
#intro-screen .btn:hover::after {
	right: 16%; /* 1%から15%に変更（矢印を短くする） */
}
#intro-screen .btn + p {
	margin-top: 30px;
	font-size: 12px;
	line-height: 1;
	max-width: 646px;
	width: 100%;
}

#question-screen .progress-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	font-weight: 300;
}
#question-screen .progress-title .left {
	font-size: 13px;
	line-height: 10px;
}
#question-screen .progress-title .right {
	font-size: 12px;
	line-height: 9px;
	letter-spacing: 0.03em;
}
#question-screen .progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	font-weight: 300;
	font-size: 12px;
	line-height: 9px;
	letter-spacing: 0.03em;
}
#question-screen .question-wrap {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 30px;
}
#question-screen #question-question {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
#question-screen #question-text {
	text-box: trim-both cap alphabetic;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.03em;
	font-weight: 300;
}
#question-screen #question-subtext {
	text-box: trim-both cap alphabetic;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.03em;
	font-weight: 300;
}
#result-screen.card-content {
	padding: 0;
}
#result-screen .bgw {
	padding: 40px 0;
}
#result-screen .bgw + .bgw {
	border-top: 10px solid #f0eeec;
}
#result-screen .text-center {
	text-align: center;
}
#result-screen .result-title {
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-indent: 0.03em;
	text-box: trim-both cap alphabetic;
}
.option-btn {
	width: 100%;
	text-align: left;
	padding: 16px 48px 16px 20px;
	margin-bottom: 6px;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	background: white;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 11px;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
.option-btn::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border-right: 1px solid #aaa;
	border-top: 1px solid #aaa;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg);
	transform-origin: right top;
	transition: 0.3s;
}
.option-btn:hover::after {
	right: 15px;
	border-color: #000;
}
.option-btn:has(.option-desc) {
	padding-left: 55px;
}
.option-btn:has(.option-desc):nth-child(1) {
	background: url(icons/icon-q-1.png) left 15px center/28px 28px no-repeat;
}
.option-btn:has(.option-desc):nth-child(2) {
	background: url(icons/icon-q-2.png) left 15px center/28px 28px no-repeat;
}
.option-btn:has(.option-desc):nth-child(3) {
	background: url(icons/icon-q-3.png) left 15px center/28px 28px no-repeat;
}
.option-btn:has(.option-desc):nth-child(4) {
	background: url(icons/icon-q-4.png) left 15px center/28px 28px no-repeat;
}
.option-btn:has(.option-desc):nth-child(5) {
	background: url(icons/icon-q-5.png) left 15px center/28px 28px no-repeat;
}

.option-btn:hover {
	background-color: #e6e6e6 !important;
}

.option-btn:has(.option-desc):hover:nth-child(1) {
	background: url(icons/icon-q-1.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
}
.option-btn:has(.option-desc):hover:nth-child(2) {
	background: url(icons/icon-q-2.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
}
.option-btn:has(.option-desc):hover:nth-child(3) {
	background: url(icons/icon-q-3.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
}
.option-btn:has(.option-desc):hover:nth-child(4) {
	background: url(icons/icon-q-4.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
}
.option-btn:has(.option-desc):hover:nth-child(5) {
	background: url(icons/icon-q-5.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
}

.option-btn:active,
.option-btn:focus,
.option-btn:focus-visible {
	background-color: white !important;
	outline: none;
}

.option-btn:active::after,
.option-btn:focus::after {
	border-color: #aaa;
}

@media (hover: hover) {
	.option-btn:hover {
		background-color: #e6e6e6 !important;
	}
	
	.option-btn:has(.option-desc):hover:nth-child(1) {
		background: url(icons/icon-q-1.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
	}
	.option-btn:has(.option-desc):hover:nth-child(2) {
		background: url(icons/icon-q-2.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
	}
	.option-btn:has(.option-desc):hover:nth-child(3) {
		background: url(icons/icon-q-3.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
	}
	.option-btn:has(.option-desc):hover:nth-child(4) {
		background: url(icons/icon-q-4.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
	}
	.option-btn:has(.option-desc):hover:nth-child(5) {
		background: url(icons/icon-q-5.png) left 15px center/28px 28px no-repeat #e6e6e6 !important;
	}
}

.option-title {
	font-size: 14px;
	font-weight: 300;
	text-box: trim-both cap alphabetic;
}

.option-desc {
	font-size: 14px;
	font-weight: 300;
	color: #6b7280;
	text-box: trim-both cap alphabetic;
}

.progress-bar {
	width: 100%;
	height: 3px;
	background-color: #e6e6e6;
	border-radius: 9999px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background-color: #787878;
	border-radius: 9999px;
	transition: width 0.5s ease-out;
}
.progress-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
}

.score-circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #f0eeec;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 30px auto;
}
.score-circle > div {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding-bottom: 25px;
}
.score-number {
	font-family: var(--en);
	font-weight: 200;
	font-size: 56px;
	line-height: 1.1;
	text-box: trim-both cap alphabetic;
}
.score-full {
	font-family: var(--en);
	font-weight: 200;
	font-size: 24px;
	line-height: 1.1;
	text-box: trim-both cap alphabetic;
	position: relative;
	padding-left: 15px;
}
.score-full::before {
	content: '';
	width: 1px;
	height: 20px;
	background: currentcolor;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: rotate(26.5deg);
	transform-origin: center bottom;
}
.score-label {
	position: absolute;
	white-space: nowrap;
	bottom: 46px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 20px;
	line-height: 1.2;
	font-weight: 500;
	text-box: trim-both cap alphabetic;
	text-decoration: underline;
	text-underline-offset: 10px;
	text-decoration-thickness: 1px;
}

.recommendation-title {
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-indent: 0.03em;
	text-box: trim-both cap alphabetic;
	margin-bottom: 40px;
}

.recommendation {
	background-color: #fff;
	border-radius: 4px;
	overflow: hidden;
	transition: 0.5s;
}
.recommendation:has(.expanded) {
	background-color: #f6f6f6;
}

.recommendation-header {
	padding: 20px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.5s;
	border-bottom: 1px solid #e6e6e6;
}
.recommendation-header:hover {
	background-color: #f6f6f6;
}
.recommendation-header-inner {
	display: flex;
	align-items: center;
}

.recommendation-header > div {
	gap: 20px;
}
.recommendation-header > div > .num {
    width: 56px;
    height: 56px;
    font-family: var(--en);
    text-align: center;
    background: #787878;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-top: 2px;
}
.recommendation-header > div > .num big {
    font-weight: 300;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-indent: 0.03em;
    text-box: trim-both cap alphabetic;
}
.recommendation-header > div > .num small {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-indent: 0.03em;
    text-box: trim-both cap alphabetic;
    padding-top: 0px;
    padding-bottom: 0px;

}
.recommendation-header > div > .txt {
	flex-grow: 1;
	padding-right: 124px;
	position: relative;
}
.recommendation-header > div > .txt h4 + p {
	margin-top: 12px;
}
.recommendation-header > div > .txt h4,
.recommendation-header > div > .txt p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
}
.recommendation-header > div > .txt .toggle-text {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
	padding-right: 22px;
}
.recommendation .recommendation-header > div > .txt .toggle-text::after {
	content: '';
	width: 13px;
	height: 7px;
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -3px;
	background: url(icons/icon-arrow.svg) center center/contain no-repeat;
	transform: rotate(180deg);
	transition: 0.2s;
}
.recommendation:has(.expanded) .recommendation-header > div > .txt .toggle-text::after {
	transform: rotate(0deg);
}

.recommendation-content {
	padding: 30px 0px 30px 96px;
	display: none;
}
.recommendation-content p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
}

.recommendation-content.expanded {
	display: block;
}

.hidden {
	display: none;
}

/* フェードアニメーション */
.fade-container {
	opacity: 1;
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-out {
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in {
	animation: fadeInSmooth 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInSmooth {
	from { 
		opacity: 0;
		transform: translateY(20px);
	}
	to { 
		opacity: 1;
		transform: translateY(0);
	}
}

/* 選択肢のアニメーション */
.option-btn {
	animation: slideInSmooth 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
	transform-origin: center;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-btn:nth-child(1) { animation-delay: 0.1s; }
.option-btn:nth-child(2) { animation-delay: 0.15s; }
.option-btn:nth-child(3) { animation-delay: 0.2s; }
.option-btn:nth-child(4) { animation-delay: 0.25s; }
.option-btn:nth-child(5) { animation-delay: 0.3s; }

@keyframes slideInSmooth {
	from {
		opacity: 0;
		transform: translateY(15px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* プログレスバーのアニメーション */
.progress-fill {
	height: 100%;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 質問テキストのアニメーション */
.question-content {
	animation: fadeInContent 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInContent {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}



.summary-box {
	background-color: #fff;
	border: 1px solid #aaa;
	border-radius: 0;
	padding: 40px;
	margin-top: 44px;
	position: relative;
}
.summary-title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 0 10px;
	background: #fff;
	text-box: trim-both cap alphabetic;
}
.summary-text {
	font-size: 14px;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
}

.proposal-box {
	padding: 60px 0px 0;
	background: #f0eeec;
	text-align: center;
	margin-bottom: 40px;
}
.proposal-title {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
}
.proposal-desc {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.03em;
	text-box: trim-both cap alphabetic;
}
.proposal-title + .proposal-desc {
	margin-top: 18px;
}
.proposal-title br,
.proposal-desc br {
	display: none;
}

.proposal-btns {
	margin-top: 60px;
	margin-bottom: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding-bottom: 30px;
}
.proposal-btns a.btn {
	height: 100px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 100%;
	width: 442px;
	color: #fff;
	background: #787878;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-indent: 0.05em;
	position: relative;
	transition: 0.3s;
}
.proposal-btns a.btn:hover {
	background: #000;
}
.proposal-btns a.btn::after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	position: absolute;
	top: 50%;
	right: 30px;
	transform: rotate(45deg);
	transform-origin: right top;
}
.proposal-btns button.btn {
	cursor: pointer;
	border: none;
	background: transparent;
	border-radius: 0;
	padding-right: 16px;
	position: relative;
	font-size: 14px;
	line-height: 1;
	font-weight: 300;
	letter-spacing: 0.03em;
	transition: 0.3s;
	color: #000;
}
.proposal-btns button.btn:hover {
	opacity: 0.6;
}
.proposal-btns button.btn::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border-right: 1px solid currentcolor;
	border-top: 1px solid currentcolor;
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(45deg);
	transform-origin: right top;
}


@media screen and (max-width: 800px) {
	/* SP版：アクティブ状態でも白背景を維持（タップしても色を変えない） */
	.option-btn:active,
	.option-btn:focus,
	.option-btn:focus-visible {
		background-color: white !important;
		background: white !important;
	}
	
	.option-btn:has(.option-desc):active:nth-child(1),
	.option-btn:has(.option-desc):focus:nth-child(1) {
		background: url(icons/icon-q-1.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):active:nth-child(2),
	.option-btn:has(.option-desc):focus:nth-child(2) {
		background: url(icons/icon-q-2.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):active:nth-child(3),
	.option-btn:has(.option-desc):focus:nth-child(3) {
		background: url(icons/icon-q-3.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):active:nth-child(4),
	.option-btn:has(.option-desc):focus:nth-child(4) {
		background: url(icons/icon-q-4.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):active:nth-child(5),
	.option-btn:has(.option-desc):focus:nth-child(5) {
		background: url(icons/icon-q-5.png) left 15px center/28px 28px no-repeat white !important;
	}
	
	/* SP版：アクティブ状態でも矢印の色をグレーのままにする */
	.option-btn:active::after,
	.option-btn:focus::after {
		border-color: #aaa !important;
		right: 20px !important;
	}
	
	/* SP版：アクティブ状態でない時は確実に白背景にする */
	.option-btn:not(:active):not(:focus) {
		background-color: white !important;
		background: white !important;
	}
	
	/* SP版：アクティブ状態でない時は矢印の色をグレーにリセット */
	.option-btn:not(:active):not(:focus)::after {
		border-color: #aaa !important;
		right: 20px !important;
	}
	
	.option-btn:has(.option-desc):not(:active):not(:focus):nth-child(1) {
		background: url(icons/icon-q-1.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):not(:active):not(:focus):nth-child(2) {
		background: url(icons/icon-q-2.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):not(:active):not(:focus):nth-child(3) {
		background: url(icons/icon-q-3.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):not(:active):not(:focus):nth-child(4) {
		background: url(icons/icon-q-4.png) left 15px center/28px 28px no-repeat white !important;
	}
	.option-btn:has(.option-desc):not(:active):not(:focus):nth-child(5) {
		background: url(icons/icon-q-5.png) left 15px center/28px 28px no-repeat white !important;
	}
	
	.brandingscore-container {
		padding-left: 1rem; /* SP版: 左パディングをリセット */
	}
	
	.card {
		min-height: 547px;
		background: transparent;
		border: none;
		box-shadow: none;
		margin-left: 0; /* SP版: 白背景の延長をリセット */
		padding-left: 0;
	}

	.card-content {
		padding: 20px 60px;
	}
	#intro-screen.card-content {
		padding-top: 80px;
		padding-bottom: 60px;
		padding-left: 30px;
		padding-right: 30px;
		background-color: #ffffff;
	}
	#intro-screen .title {
		font-size: 38px;
		line-height: 40px;
		margin-bottom: 40px;
	}
	#intro-screen .subtitle {
		font-size: 13px;
		margin-top: 10px;
	}
	#intro-screen .mb-8 {
		margin-bottom: 50px;
	}
	#intro-screen .mb-8 .text-gray {
		font-size: 13px;
	}
	#intro-screen .btn::before,
	#intro-screen .btn::after {
		right: 9%;
	}
	#question-screen .question-wrap {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	#question-screen #question-text {
		font-size: 18px;
	}
	#question-screen #question-subtext {
		font-size: 13px;
	}
	.option-title {
		font-size: 13px;
	}
	.option-desc {
		font-size: 13px;
	}
	.option-btn {
		padding-right: 38px;
	}
	.option-btn::after {
		right: 15px;
	}
	#result-screen .bgw {
		padding: 40px 60px;
	}
	.score-circle {
		width: 160px;
		height: 160px;
		margin: 25px auto;
	}
	.score-circle > div {
		padding-bottom: 13px;
		gap: 6px;
	}
	.score-number {
		font-size: 44px;
	}
	.score-full {
		font-size: 20px;
		padding-left: 12px;
	}
	.score-full::before {
		height: 17px;
	}
	.score-label {
		font-size: 16px;
		bottom: -20px;
	}
	#score-level {
		margin-top: 20px;
	}
	.summary-box {
		padding: 30px 60px;
		margin-left: 0;
		margin-right: 0;
	}
	.recommendation-title {
		text-align: center;
	}
	.recommendation-header-inner {
		align-items: flex-start;
	}
	.recommendation-header {
		padding: 20px 60px;
	}
	.recommendation-header > div {
		gap: 13px;
	}
	.recommendation-header > div > .num {
		width: 40px;
		height: 40px;
	}
	.recommendation-header > div > .num small {
		font-size: 9px;
	}
	.recommendation-header > div > .num big {
		font-size: 16px;
	}
	.recommendation-header > div > .txt {
		padding-right: 0;
		padding-bottom: 30px;
	}
	.recommendation-header > div > .txt .toggle-text {
		font-size: 13px;
	}
	.recommendation-content {
		padding: 30px 60px 30px 60px;
	}
	.proposal-box {
		padding: 0px 0px 0;
	}
	.proposal-title br,
	.proposal-desc br {
		display: block;
	}
	.proposal-btns {
		padding: 0 60px;
	}
	.proposal-btns a.btn {
		background: #000;
		padding-right: 24px;
	}
	.proposal-btns a.btn::after {
		margin-top: 1px;
	}
	
	/* スマホ用のproposal調整 */
	.proposal-title {
		font-size: 24px;
		line-height: 1.6;
		padding-top: 40px !important;
	}
	.proposal-desc {
		font-size: 24px;
		line-height: 1.6;
	}
	.proposal-btns {
		padding: 0 20px;
	}
	.proposal-btns button.btn {
		margin-bottom: 40px;
		color: #000;
	}
}

/* ===================================
   モーダル関連のスタイル
=================================== */

/* モーダルオーバーレイ（背景） */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal-overlay.show {
	display: block;
	opacity: 1;
}

/* モーダルコンテナ */
.modal-container {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1024px;
	height: 90vh;
	background-color: #ffffff;
	z-index: 9999;
	border-radius: 8px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-container.show {
	display: block;
	opacity: 1;
}

/* モーダルヘッダー（閉じるボタンエリア） */
.modal-header {
	position: sticky;
	top: 0;
	background-color: transparent;
	padding: 20px 24px;
	z-index: 10;
	border-bottom: none;
	height: 80px;
}

/* 閉じるボタン */
.modal-close {
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 11;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid #000;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	padding: 0;
}

.modal-close:hover {
	background-color: #000;
}

.modal-close::before,
.modal-close::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 1px;
	background-color: #000;
	transition: background-color 0.2s ease;
}

.modal-close:hover::before,
.modal-close:hover::after {
	background-color: #fff;
}

.modal-close::before {
	transform: rotate(45deg);
}

.modal-close::after {
	transform: rotate(-45deg);
}

/* モーダルコンテンツエリア（スクロール可能） */
.modal-content {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(90vh - 80px);
	padding: 20px 40px 40px;
}

/* スクロールバーのスタイル（Webkit系ブラウザ） */
.modal-content::-webkit-scrollbar {
	width: 8px;
}

.modal-content::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* モーダル内のカードコンテンツ */
.modal-container .card-content {
	padding: 0;
}

/* body スクロール無効化 */
body.modal-open {
	overflow: hidden;
}

/* タブレット対応 */
@media all and (max-width: 1024px) {
	.modal-container {
		width: 92%;
		max-height: 88vh;
	}
	
	.modal-content {
		max-height: calc(88vh - 80px);
		padding: 20px 30px 30px;
	}
}

/* PC用のスタイル */
@media screen and (min-width: 801px) {
	.modal-container {
		height: 720px;
	}
}

/* スマホ対応 */
@media all and (max-width: 499px) {
	.modal-container {
		width: 95%;
		max-width: none;
		max-height: 92vh;
		border-radius: 4px;
	}
	
	.modal-header {
		padding: 16px 20px;
		height: 68px;
	}
	
	.modal-close {
		width: 36px;
		height: 36px;
		top: 24px;
		right: 20px;
	}
	
	.modal-close::before,
	.modal-close::after {
		width: 14px;
	}
	
	.modal-content {
		max-height: calc(92vh - 68px);
		padding: 16px 20px 24px;
	}
}

.option-btn,
.option-btn:link,
.option-btn:visited,
.option-btn .option-title,
.option-btn .option-desc {
    color: #000000;
    -webkit-text-fill-color: #000000;
    text-decoration: none;
}