﻿:root {
	--green-primary: #009328;
	--brown-primary: #AB5F13;
	--text-primary: #202422;
	--text-secondary: #202020;
}

.emphasisText {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	margin-bottom: 16px;
}

.emphasisText:before,
.startDiagnosisLink p:before {
	content: '';
	display: block;
	width: 16px;
	height: 29px;
	margin-right: 16px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/text-em-l.png') no-repeat center;
	background-size: contain;
	z-index: 1;
}

.emphasisText:after,
.startDiagnosisLink p:after {
	content: '';
	display: block;
	width: 16px;
	height: 29px;
	margin-left: 16px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/text-em-r.png') no-repeat center;
	background-size: contain;
	z-index: 1;
}

.quizTitle {
	width: 100%;
	margin: 80px 0 0;
	font-size: 52px;
	line-height: 2.4;
	font-weight: 400;
	color: var(--text-primary);
	text-align: center;
}

.quizLeadText {
	width: 100%;
	text-align: center;
	font-size: 24px;
	line-height: 2;
}

.progressContainer {
	margin-bottom: 80px;
	padding: 0 32px;

}

.progressBar {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 60px 0;
}

.progressBarStart,
.progressBarEnd {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.progressBarIcon img {
	width: 40px;
	height: auto;
}

.progressBarLabel {
	font-size: 12px;
	color: #4a8c3c;
	margin-top: 5px;
}

.progressBarEnd .progressBarLabel {
	color: #666;
}

.progressBarTrack {
	flex-grow: 1;
	height: 4px;
	background-color: #ccc;
	position: relative;
	margin: 0 10px;
}

.progressBarFill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: #4a8c3c;
	transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progressBarSteps {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
}

.progressBarStep {
	position: relative;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #ccc;
	border: 2px solid #ccc;
}

.progressBarStep.active {
	border-color: var(--green-primary);
	background-color: var(--green-primary);
}

.progressBarStep.completed {
	background-color: #4a8c3c;
	border-color: #4a8c3c;
}

.progressBarStep.active:before {
	content: '';
	position: absolute;
	top: -60px;
	left: -35px;
	display: block;
	width: 72px;
	height: 59px;
	background-image: url(/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_leaf.png);
	background-size: cover;
	margin: 0 auto;
	margin-top: 2px;
	z-index: -1;
}

.progressBarStep:first-child:after {
	content: 'スタート';
	position: absolute;
	top: 15px;
	left: -35px;
	font-size: 18px;
	display: block;
	color: var(--green-primary);
	width: 75px;
}

.progressBarStep:last-child:after {
	content: '診断完了';
	position: absolute;
	top: 15px;
	left: -35px;
	font-size: 18px;
	display: block;
	color: var(--text-primary);
	width: 75px;
}

.prevButton {
	margin-bottom: 40px;
}

.prevButton a {
	width: fit-content;
	font-size: 20px;
	color: var(--green-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
}

.prevButton a:hover {
	text-decoration: underline;
	text-underline-offset: 10px;
}


.prevButton a:before {
	content: '';
	width: 38px;
	height: 30px;
	margin-right: 12px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_arrow-left.png') center no-repeat;
}

.questionContainer {
	padding: 40px;
	background: #fff;
	border-radius: 30px;
	margin-bottom: 40px;
	box-shadow: 0px 8px 10px 0px rgba(107, 107, 107, 0.1);
}

.questionContainer:last-child {
	margin-bottom: 0;
}

.questionGroup {
	margin-bottom: 120px;
}

.questionContainer .questionTitle {
	margin-bottom: 40px;
	font-size: 36px;
	font-weight: 400;
	line-height: 2;
	color: var(--text-primary);
	text-align: center;
}

.questionContainer .questionTitle p {
	display: flex;
	justify-content: center;
	text-align: left;
	font-size: 28px;
	align-items: center;
}

.questionContainer .questionTitle p span {
	font-family: "Outfit", sans-serif;
	font-size: 28px;
	width: 75px;
	margin-right: 16px;
	color: var(--green-primary);
}

.answerGroup {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	width: 640px;
	border-radius: 10px;
}

.answerGroup .answerOption:first-child {
	margin-left: 0;
}

.answerGroup .answerOption:last-child {
	margin-right: 0;
}

.answerOption {
	display: flex;
	flex-direction: column;
	margin: 0 40px;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: transform 0.2s ease;
	height: 160px;
}

.answerOption input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.answerOptionCircle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid var(--green-primary);
	background-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.answerOption:nth-child(3) .answerOptionCircle,
.answerOption:last-child .answerOptionCircle {
	border-color: var(--brown-primary);
}


.answerOption:nth-child(2) .answerOptionCircle {
	margin-top: 10px;
}

.answerOption:nth-child(3) .answerOptionCircle {
	margin-top: 10px;
}

.answerOption:first-child .answerOptionCircle,
.answerOption:last-child .answerOptionCircle {
	width: 100px;
	height: 100px;
}

.answerOptionLabel {
	font-size: 20px;
	color: var(--green-primary);
	text-align: center;
	line-height: 2.4;
	display: flex;
	align-items: center
}

.answerOption:nth-child(3) .answerOptionLabel,
.answerOption:last-child .answerOptionLabel {
	color: var(--brown-primary);
}

.answerOption input[type="radio"]:checked+.answerOptionCircle {
	background-color: var(--green-primary);
	border-color: var(--green-primary);
}

.answerOption:hover .answerOptionCircle {
	background-color: var(--green-primary);
}

.answerOption:nth-child(3) input[type="radio"]:checked+.answerOptionCircle,
.answerOption:last-child input[type="radio"]:checked+.answerOptionCircle {
	background-color: var(--brown-primary);
	border-color: var(--brown-primary);
}

.answerOption:nth-child(3):hover .answerOptionCircle,
.answerOption:last-child:hover .answerOptionCircle {
	background-color: var(--brown-primary);
	border-color: var(--brown-primary);
}

.nextButton a {
	width: 430px;
	margin-bottom: 120px;
}

.nextButton a span {
	font-weight: 400;
}

.nextButton a.disabled {
	pointer-events: none;
	background-color: #fff;
	color: #888;
	font-style: normal;
}

.nextButton a.disabled span:after {
	background-image: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_arrow-right_disabled.png');
}

.resultSection {
	background: #F7F3F0;
}

.resultContainer {
	background: #fff;
	padding: 40px;
	border-radius: 24px;
	margin-bottom: 120px;
}

.resultContainer .resultType {
	text-align: center;
}

.resultType .resultTypeTitle {
	line-height: 2;
	font-size: 36px;
	color: var(--green-primary);
}

.resultType .resultTypeText {
	font-size: 24px;
	line-height: 2;
}

.saveImage {
	padding: 56px;
	border-bottom: 3px dashed #C9C9C9;
}

.saveImage .saveImageText {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 16px;
	font-size: 36px;
}

.saveImageText:before,
.snsShareTitle:before,
.startDiagnosisLink p:before,
.trendSection .trendSectionTitle:before {
	content: '';
	display: block;
	width: 27px;
	height: 47px;
	margin-right: 16px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/text-em-l.png') no-repeat center;
}

.saveImageText:after,
.snsShareTitle:after,
.startDiagnosisLink p:after,
.trendSection .trendSectionTitle:after {
	content: '';
	display: block;
	width: 27px;
	height: 47px;
	margin-left: 16px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/text-em-r.png') no-repeat center;
}

.saveImage .saveButton a {
	width: 400px;
	margin-bottom: 16px;
}

.saveImage .campaignAnchor a {
	font-size: 16px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--green-primary);
}

.saveImage .campaignAnchor a:after {
	content: '';
	width: 16px;
	height: 16px;
	display: block;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_arrow-down.png') no-repeat center;
	background-size: contain;
}

.campaignAnchorLink {
	display: flex;
	justify-content: center;
	align-items: center;
}

.campaignAnchorLink a {
	display: flex;
	font-size: 16px;
	line-height: 1.8;
	color: var(--green-primary);
	justify-content: center;
	align-items: center;
	margin-right: 4px;
	text-decoration: none;
	width: fit-content;
}

.campaignAnchorLink a:after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_arrow-down.png') no-repeat center;
}

.campaignAnchorLink a:hover {
	text-decoration: underline;
	text-underline-offset: 8px;
}

.stickySnsShare {
	position: fixed;
	right: 0;
	top: 450px;
	z-index: 1000;
}

.stickySnsShare .emphasisText {
	display: none;
}

.stickySnsShareButtonsWrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stickySnsShare a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 12px;
	background: var(--green-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	border-radius: 50px 0 0 50px;
	transition: opacity 0.3s;
	white-space: nowrap;
	width: 222px;
}

.stickySnsShare a:hover {
	opacity: 0.85;
}

.stickySnsShare a img {
	width: 32px;
	height: 32px;
	margin-right: 8px;
	object-fit: contain;
	border-radius: 24px;
	background: #fff;
	padding: 4px;
}

.stickySnsShare a span {
	display: inline-flex;
	align-items: center;
}

.stickySnsShare a span:after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window.png') no-repeat center;
	background-size: contain;
}

.resultDescription  {
	display: flex;
	flex-direction: column-reverse;

}

.resultDescription .resultDescriptionItem .title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
	padding-top: 80px;
	font-size: 32px;
	color: var(--green-primary);
	line-height: 1.5;
}

.resultDescription .resultDescriptionItem .title:before {
	content: '';
	display: block;
	margin-top: 10px;
	width: 41px;
	height: 40px;
	flex-shrink: 0;
	margin-right: 10px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_leaf.png') no-repeat center;
	background-size: contain;
}

.resultDescription .resultDescriptionItem .desc {
	font-size: 24px;
	line-height: 2;
}

.resultDescription .resultDescriptionItem .desc ul {
	max-width: 700px;
	margin: 0 auto;
	padding-left: 140px;
}

.resultDescription .resultDescriptionItem .desc ul li {
	font-size: 18px;
	margin-bottom: 16px;
	margin-top: 0 !important;
}

.resultDescription .resultDescriptionItem .desc ul li:before {
	content: '・';
	top: 10px;
}

.resultDescription .resultDescriptionItem .desc ul li span {
	color: var(--green-primary);
	font-size: 24px;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation {
	display: flex;
	justify-content: space-between;
	border: 3px solid #009328;
	background: #F4FBF3;
	padding: 24px;
	border-radius: 24px;
	gap: 16px;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image,
.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image {
	width: 50%;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 560px;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image div {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #fff;
	margin-right: 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	margin-right: 24px !important;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image div img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .caption {
	font-size: 22px;
	color: var(--green-primary);
	text-wrap: nowrap;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .description {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: calc(100%/2 - 16px);
	text-align: center;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .description .emphasis {
	font-size: 25px;
	text-decoration: underline;
	text-underline-offset: 16px;
	line-height: 1.6;
	margin-bottom: 16px;
}

.resultDescription .resultDescriptionItem .resultDescriptionExplanation .description .emphasisSubtitle {
	font-size: 16px;
	line-height: 2;
}

.fullWidthBlock {
	position: relative;
}

.fullWidthBlock:before {
	content: '';
	width: clamp(300px, 26.979vw, 518px);
	height: clamp(120px, 11.09vw, 213px);
	position: absolute;
	top: 530px;
	left: 0;
	display: block;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_sprout-decoration.png') no-repeat center;
	background-size: contain;
	z-index: 1;
}

@media screen and (min-width: 767px) {

	.campaignSection {
		padding: 80px 0;
		background: #F4FBF3;
		border-radius: 24px !important;
	}

	.campaignSection .inner {
		margin: 0 auto;
		width: 1200px;
		text-align: center;
	}

	.campaignSection .campaignSectionTitle {
		font-size: 32px;
		color: var(--green-primary);
	}

	.campaignSection .campaignSectionHashTag {
		font-size: 52px;
		line-height: 2.4;
	}

	.campaignSection .campaignSectionLeadText {
		font-size: 24px;
		line-height: 2;
		margin-bottom: 80px;
	}

	.campaignSection .campaignSectionContent {
		display: flex;
		gap: 32px;
		justify-content: center;
		position: relative;
		margin-bottom: 80px;
	}

	.campaignSection .campaignSectionContent:before {
		content: '';
		position: absolute;
		width: 530px;
		height: 220px;
		background: url(/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_sprout-decoration.png) no-repeat center;
		background-size: cover;
		top: -155px;
		left: -362px;
		z-index: 3;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle,
	.campaignSection .campaignSectionContent .campaignSectionItemOther {
		position: relative;
		padding: 32px 32px 34px;
		width: calc(50% - 16px);
		border: 3px solid var(--green-primary);
		border-radius: 24px;
		background: #fff;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle:after {
		content: '';
		position: absolute;
		width: 64px;
		height: 64px;
		display: block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_plus.png') no-repeat center;
		background-size: cover;
		right: -50px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .note {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		width: 120px;
		height: 120px;
		top: -45px;
		left: -25px;
		font-size: 16px;
		background: var(--green-primary);
		color: #fff;
		line-height: 1;
		border-radius: 50%;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .note span {
		font-size: 30px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .title {
		display: flex;
		padding-bottom: 24px;
		justify-content: center;
		text-align: left;
		font-size: 26px;
		line-height: 1;
		border-bottom: 2px dashed #C9C9C9;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .title:before {
		content: '';
		width: 113px;
		height: 80px;
		display: block;
		background: url(/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_reward_raffle.png) center no-repeat;
		background-size: cover;
		margin-right: 12px;
		margin-left: 36px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .title .text p span {
		font-size: 60px;
		color: var(--green-primary);
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .desc {
		padding-top: 24px;
		font-size: 20px;
		line-height: 2;

	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .desc span {
		color: var(--green-primary);
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther:after {
		content: '';
		position: absolute;
		width: 260px;
		height: 143px;
		bottom: -100px;
		right: -70px;
		display: block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_reward_other.png') no-repeat center;
		background-size: cover;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title {
		font-size: 26px;
		line-height: 1;
		padding-bottom: 24px;
		border-bottom: 2px dashed #C9C9C9;
	}


	.campaignSection .campaignSectionContent .campaignSectionItemOther .title p:first-child {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1.2;
		font-size: 28px;
		gap: 16px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title p:first-child:before {
		content: '';
		display: block;
		width: 52px;
		height: 51px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_bubble-hashtag.png') no-repeat center;
		background-size: cover;
		position: relative;
		top: -10px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title p:first-child:after {
		content: '';
		display: block;
		width: 52px;
		height: 51px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_bubble-heart.png') no-repeat center;
		background-size: cover;
		position: relative;
		top: -10px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title p:last-child {
		font-size: 40px;
		color: var(--green-primary);
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .desc {
		padding-top: 24px;
		font-size: 20px;
		line-height: 2;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .desc span {
		color: var(--green-primary);
	}

	.campaignSection .campaignPeriod .campaignPeriodTitle {
		font-size: 32px;
		line-height: 2.4;
		margin-bottom: 32px;
	}

	.campaignSection .campaignPeriod .campaignPeriodContent {
		margin-bottom: 36px;
		padding: 32px;
		border: 2px solid var(--text-secondary);
		border-radius: 24px;
	}

	.campaignSection .campaignPeriod .campaignPeriodContent p {
		font-size: 40px;
		color: var(--green-primary);
	}

	.campaignSection .campaignPeriod .campaignPeriodContent p span {
		font-size: 18px;
	}

	.campaignSection .campaignPeriod .campaignPeriodContent p .dayMark {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle;
		width: 28px;
		height: 28px;
		margin: 0 3px;
		font-size: 18px;
		color: #fff;
		background-color: var(--green-primary);
		border-radius: 100px;
	}

	.campaignPeriod .startDiagnosisLinkButton a {
		width: 430px;
	}
}

.campaignSteps {
	padding: 80px 0;
	background: #F6F1ED;
}

.campaignProcedure {
	margin-bottom: 80px;
	width: 1200px;
	margin: 0 auto;
}

.campaignProcedure .stepsContainer {
	display: flex;
	gap: 32px;
	width: 100%;
	margin-bottom: 80px;
}

.campaignProcedure .campaignProcedureTitle {
	margin-bottom: 75px;
	font-weight: 400;
	text-align: center;
	font-size: 36px;
	color: var(--text-primary);
}

.campaignProcedure .stepsContainer .step01,
.campaignProcedure .stepsContainer .step02 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 50%;
	padding: 40px 24px;
	position: relative;
	background: #fff;
	border-radius: 24px;
	text-align: center;
}

.campaignProcedure .stepsContainer .step01:before {
	content: '';
	display: block;
	position: absolute;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	width: 175px;
	height: 63px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_step01.png') center no-repeat;
	background-size: contain;
}

.campaignProcedure .stepsContainer .step02:before {
	content: '';
	display: block;
	position: absolute;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	width: 297px;
	height: 63px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_step02.png') center no-repeat;
	background-size: contain;
}

.campaignProcedure .stepsContainer .title {
	font-size: 24px;
	line-height: 1.8;
	height: 90px;
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}

.campaignProcedure .stepsContainer .step01 .image,
.campaignProcedure .stepsContainer .step02 .image {
	display: block;
	margin-bottom: 24px;
}

.campaignProcedure .stepsContainer .step01 .image {
	width: 204px;
	height: 150px;
}


.campaignProcedure .stepsContainer .step01  .saveImageLink {
	display: block;
	margin-bottom: 24px;
}

.campaignProcedure .stepsContainer .step01  .saveImageLink a  {
	width: 330px;
	font-weight: 400;
}

.campaignProcedure .stepsContainer .step02 .image {
	width: 150px;
	height: 150px;
}

.campaignProcedure .stepsContainer .desc {
	font-size: 18px;
	line-height: 2;
}

.campaignProcedure .stepsContainer .step02 .desc {
	margin-bottom: 10px;
}

.campaignProcedure .stepsContainer div .noteAsterisk {
	font-size: 13px;
	line-height: 2;
}

.campaignSteps .startDiagnosisLink p {
	margin-bottom: 16px;
}

.campaignSteps .startDiagnosisLink .startDiagnosisLinkButton {
	margin-bottom: 80px;
}

.campaignSteps .campaignNote {
	padding: 24px;
	border: 1px solid #202422;
}

.campaignSteps .campaignNote .block01 {
	font-size: 20px;
	line-height: 2;
	color: var(--text-secondary);
	text-align: center;
	border-bottom: 3px dashed #C9C9C9;
	padding-bottom: 16px;
}

.campaignSteps .campaignNote .block02 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding-top: 16px;
	font-size: 16px;
}

.campaignSteps .campaignNote .block02 span {
	display: block;
}

.campaignSteps .campaignNote .block02 a {
	display: inline-block;
}

.snsShare {
	margin-bottom: 120px;
}

.snsShareTitle {
	font-size: 32px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 44px;
}

.snsShareButtons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}

.snsShareButtons p {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 400px;
	height: 87px;
}

.snsShareButtons p a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	border-radius: 50px;
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	background: var(--green-primary);
	color: #fff;
}

.snsShareButtons .snsShareButtonX a {
	padding-left: 50px;
}

.snsShareButtons .snsShareButtonX a:before {
	content: '';
	position: absolute;
	width: 73px;
	height: 73px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_sns_x.png') no-repeat center;
	display: block;
	left: 8px;
}

.snsShareButtons .snsShareButtonX a:after {
	content: '';
	height: 15px;
	width: 15px;
	display: block;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window.png') no-repeat center;
	background-size: contain;
	margin-left: 8px;
}

.snsShareButtons .snsShareButtonInstagram a {
	padding-left: 60px;
}

.snsShareButtons .snsShareButtonInstagram a:before {
	content: '';
	position: absolute;
	width: 73px;
	height: 73px;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_sns_instagram.png') no-repeat center;
	display: block;
	left: 8px;
}

.snsShareButtons .snsShareButtonInstagram a:after {
	content: '';
	height: 15px;
	width: 15px;
	display: block;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window.png') no-repeat center;
	background-size: contain;
	margin-left: 8px;
}

.trendSection {
	margin-bottom: 80px;
}

.trendSection .inner {
	width: 1200px;
	margin: 0 auto;
	border-radius: 24px;
	padding: 70px 0 0 65px;
	border: 2px solid var(--text-secondary);
}

.trendSection .trendSectionTitle{
	display: flex;
	margin-bottom: 40px;
	font-size: 34px;
	justify-content: center;
	align-items: last baseline;
	text-align: center;
}

.trendSection .trendSectionTitle .greenText {
	color: var(--green-primary)
}

.trendSection .trendSectionContent {
	display: flex;
	gap: 88px;
}

.trendSection .trendSectionContent .desc {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.trendSection .trendSectionContent .desc p {
	font-size: 24px;
	line-height: 2.2;
	margin-bottom: 37px;
}

.trendSection .trendSectionContent .desc .tryLink a {
	width: 400px;
	font-weight: 400;
}

.otherInformation {
	background: #F6F1ED;
	width: 100%;
	padding: 120px 0 0;
	position: relative;
}

.otherInformation::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(180deg, #EDE8E4 0%, #F6F1ED 100%);
	clip-path: ellipse(60% 100% at 50% 100%);
	z-index: 0;
}

.otherInformation .inner {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.otherInformation .otherInformationTitle {
	margin-bottom: 16px;
	font-size: 48px;
	line-height: 2;
	color: var(--green-primary);
	text-align: center;
}

.otherInformation .otherInformationSubtitle {
	margin-bottom: 16px;
	font-size: 24px;
	line-height: 2;
	text-align: center;
}

.otherInformation .offer {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 80px;
}

.otherInformation .offer .emphasisText {
	font-size: 20px;
	margin-bottom: 16px;
}

.otherInformation .offer .image {
	width: fit-content;
	margin-bottom: 16px;
	border-radius: 24px;
	overflow: hidden;
}

.otherInformation .offer .offerLink {
	display: flex;
	align-items: center;
	justify-content: center;
}

.otherInformation .offer .offerLink a {
	width: 400px;
}


.otherInformation .desc {
	font-size: 24px;
	line-height: 2;
	text-align: center;
	margin-bottom: 180px;
}

*[class^="normalBlockA"]>.blockInner>.blockTitle,
*[class*=" normalBlockA"]>.blockInner>.blockTitle {
	font-weight: 400;
}

.otherInformation .detailAccordion {
	margin-bottom: 120px;
}

.otherInformation .detailAccordion #sustainaPayAccContent01 {
	padding: 40px 140px;
}

.otherInformation .detailAccordion .blockDetail {
	font-size: 18px;
	line-height: 2;
}

.otherInformation .detailAccordion .blockDetail p {
	font-size: 18px;
	margin-bottom: 6px;
}

.otherInformation .detailAccordion .blockDetail ul li dl .title {
	color: var(--green-primary);
	margin-bottom: 8px;
}

.otherInformation .detailAccordion .blockDetail ul li dl dd .note li {
	font-size: 14px;
	margin-bottom: 8px;
}

.otherInformation .detailAccordion .blockDetail ul li dl dd .note li:before {
	content: "※";
	color: inherit;
}

.otherInformation .detailAccordion .blockDetail ul li dl dd span {
	margin-bottom: 8px;
}

.otherInformation .detailAccordion .blockDetail ul li dl dd a {
	color: var(--green-primary) !important;
	display: inline-flex;
	align-items: center;
}

.otherInformation .detailAccordion .blockDetail ul li dl dd a:after {
	content:'';
	width: 14px;
	height: 14px;
	display: block;
	background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window-green.png') no-repeat center;
	background-size: contain;
	margin-left: 8px;
}

@media screen and (min-width: 767px) {
	.sp-only {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {

	.pc-only {
		display: none !important;
	}

	.emphasisText {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin-bottom: 16px;
	}

	.emphasisText:before,
	.startDiagnosisLink p:before {
		content: '';
		display: block;
		width: 10px;
		height: 18px;
		margin-right: 16px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/text-em-l.png') no-repeat center;
		background-size: contain;
		z-index: 1;
	}

	.emphasisText:after,
	.startDiagnosisLink p:after {
		content: '';
		display: block;
		width: 10px;
		height: 18px;
		margin-left: 16px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/text-em-r.png') no-repeat center;
		background-size: contain;
		z-index: 1;
	}

	.quizTitle {
		font-size: 26px;
		margin: 32px 0 8px;
	}

	.quizLeadText {
		font-size: 16px;
		margin-bottom: 16px;
	}

	.progressContainer {
		padding: 0 15px;
		margin: 0 14px 40px 14px;
	}

	.progressBar {
		padding: 40px 0 20px 0;
	}

	.progressBarStep:first-child:after,
	.progressBarStep:last-child:after {
		font-size: 13px;
		left: -20px;
		line-height: 2;
	}

	.progressBarTrack {
		height: 2px;
	}

	.progressBarStep {
		width: 8px;
		height: 8px;
	}

	.progressBarStep.active:before {
		width: 45px;
		height: 36px;
		top: -40px;
		left: -22px;
	}

	.prevButton {
		margin-bottom: 24px;
	}

	.prevButton a {
		font-size: 16px;
		text-decoration: none;
	}

	.prevButton a::before {
		width: 26px;
		height: 20px;
		background-size: contain;
		margin-right: 10px;
	}

	.questionGroup {
		margin-bottom: 60px;
	}

	.questionContainer {
		padding: 12px 16px;
		margin-bottom: 24px;
	}

	.questionContainer .questionTitle {
		margin-bottom: 8px;
		line-height: 1.8;
	}

	.questionContainer .questionTitle p {
		display: flex;
		align-items: center;
		font-size: 18px;
		text-align: left;
		line-height: 1.8;
	}

	.questionContainer .questionTitle p span {
		display: block;
		width: 90px;
		font-size: 22px;
		margin-right: 10px;
		text-align: center;
	}

	.answerGroup {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: center;
	}

	.answerOption {
		margin: 0 14px 8px;
		justify-content: flex-start;
		height: auto;
	}

	.answerOption .answerOptionCircle {
		border: 2px solid var(--green-primary);
		margin-bottom: 8px;
	}

	.answerOption .answerOptionLabel {
		font-size: 13px;
		line-height: 1.4;
	}

	.answerOption:first-child .answerOptionCircle,
	.answerOption:last-child .answerOptionCircle {
		width: 56px;
		height: 56px;
	}

	.answerOption:nth-child(2) .answerOptionCircle,
	.answerOption:nth-child(3) .answerOptionCircle {
		width: 36px;
		height: 36px;
	}

	.answerOption:nth-child(2) .answerOptionLabel,
	.answerOption:nth-child(3) .answerOptionLabel {
		display: none;
	}

	.nextButton a {
		width: 310px;
		margin-bottom: 80px;
	}

	.nextButton a span:after {
		width: 30px !important;
		height: 25px !important;
	}

	.nextButton a.disabled span:after {
		width: 35px !important;
		height: 20px !important;
		background-size: contain !important;
	}

	.resultContainer {
		background: #fff;
		padding: 16px;
		margin-bottom: 80px;
	}

	.resultContainer .resultType {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.resultType .resultTypeTitle {
		line-height: 2;
		font-size: 22px;
		color: var(--green-primary);
	}

	.resultType .resultTypeText {
		font-size: 16px;
		line-height: 2;
		margin-bottom: 20px;
		line-height: 2.2;
	}

	.resultType .resultTypeImage {
		width: 200px;
		height: 210px;
	}

	.resultType .resultTypeImage img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.saveImage {
		text-align: center;
		padding: 0 0 40px;
		border-bottom: 3px dashed #C9C9C9;
	}

	.saveImage .emphasisText {
		margin-bottom: 16px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		line-height: 1.4;
	}

	.saveImage .emphasisText:before {
		margin-right: 8px;
	}

	.saveImage .emphasisText:after {
		margin-left: 8px;
	}

	.saveImage .emphasisText:before,
	.saveImage .emphasisText:after {
		content: '';
		display: block;
		width: 14px;
		height: 26px;
		background-size: contain;
		z-index: 1;
	}

	.saveImage .saveButton a {
		width: 100%;
		margin-bottom: 16px;
		font-weight: 400;
		margin-bottom: 16px;
	}

	.saveImage .campaignAnchor {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.saveImage .campaignAnchor a {
		display: flex;
		font-size: 14px;
		line-height: 1.8;
		color: var(--green-primary) !important;
		justify-content: center;
		align-items: center;
		margin-right: 4px;
		text-decoration: none;
		width: fit-content;
		text-decoration: underline;
		text-underline-offset: 6px;
	}

	.saveImage .campaignAnchor a:after {
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_arrow-down.png') no-repeat center;
	}

	.campaignAnchorLink a:hover {
		text-decoration: underline;
		text-underline-offset: 8px;
	}

	.stickySnsShare {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		background: #DBEFCE;
		padding: 0;
		border-radius: 0;
	}

	.stickySnsShare .emphasisText {
		display: flex;
		font-size: 12px;
		color: var(--text-primary);
		padding: 12px 16px;
		margin: 0;
	}

	.stickySnsShareButtonsWrap {
		flex-direction: row;
		justify-content: center;
		gap: 0;
		padding: 0;
	}

	.stickySnsShare a {
		padding: 12px 16px;
		font-size: 12px;
		border-radius: 0;
		width: auto;
		flex: 1;
		max-width: none;
		justify-content: center;
	}

	.stickySnsShare a:first-child {
		border-right: 1px solid #fff;
	}

	.stickySnsShare a img {
		width: 28px;
		height: 28px;
		margin-right: 8px;
		padding: 4px;
		border-radius: 50%;
		background: #fff;
	}

	.stickySnsShare a span:after {
		width: 14px;
		height: 14px;
		margin-left: 4px;
	}

	.resultDescription {
		display: flex;
		flex-direction: column-reverse;
	}

	.resultDescription .resultDescriptionItem .title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		padding-top: 56px;
		font-size: 22px;
		color: var(--green-primary);
		line-height: 1.5;
	}

	.resultDescription .resultDescriptionItem .title:before {
		content: '';
		display: block;
		margin-top: 10px;
		width: 41px;
		height: 40px;
		flex-shrink: 0;
		margin-right: 10px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_leaf.png') no-repeat center;
		background-size: contain;
	}

	.resultDescription .resultDescriptionItem .desc {
		font-size: 16px;
		line-height: 2;
	}

	.resultDescription .resultDescriptionItem .desc ul {
		padding-left: 0;
	}

	.resultDescription .resultDescriptionItem .desc ul li {
		font-size: 14px;
	}

	.resultDescription .resultDescriptionItem .desc ul li:before {
		content: '・';
		top: 10px;
	}

	.resultDescription .resultDescriptionItem .desc ul li span {
		color: var(--green-primary);
		font-size: 16px;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation {
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		border: 3px solid #009328;
		background: #F4FBF3;
		padding: 16px;
		border-radius: 24px;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image {
		width: 100%;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column-reverse;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image div {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		background: #fff;
		margin-right: 0 !important;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .image div img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .caption {
		font-size: 18px;
		color: var(--green-primary);
		margin-bottom: 8px;
		text-wrap: wrap;
		text-align: center;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .description {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		width: 100%;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .description .emphasis {
		font-size: 20px;
		text-decoration: underline;
		text-underline-offset: 10px;
		line-height: 1.6;
		margin-bottom: 16px;
	}

	.resultDescription .resultDescriptionItem .resultDescriptionExplanation .description .emphasisSubtitle {
		font-size: 14px;
		line-height: 2;
	}

	.fullWidthBlock {
		position: relative;
	}

	.fullWidthBlock:before {
		content: '';
		width: clamp(300px, 26.979vw, 518px);
		height: clamp(120px, 11.09vw, 213px);
		position: absolute;
		top: 530px;
		left: 0;
		display: block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_sprout-decoration.png') no-repeat center;
		background-size: contain;
		z-index: 1;
	}

	.campaignSection {
		background: #F4FBF3;
		padding: 80px 24px;
		border-radius: 24px;
	}

	.campaignSection .inner {
		width: 100%;
	}

	.campaignSection .campaignSectionTitle {
		display: block;
		font-size: 20px;
		color: var(--green-primary);
		text-align: center;
		line-height: 2;
	}

	.campaignSection .campaignSectionHashTag {
		text-align: center;
		font-size: 26px;
		margin-bottom: 25px;
	}

	.campaignSection .campaignSectionLeadText {
		text-align: center;
		font-size: 16px;
		margin-bottom: 92px;
	}

	.campaignSection .campaignSectionContent {
		display: flex;
		flex-direction: column;
		gap: 12px;
		position: relative;
	}

	.campaignSection .campaignSectionContent:before {
		content: '';
		position: absolute;
		width: 280px;
		height: 120px;
		background: url(/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_sprout-decoration.png) no-repeat center;
		background-size: cover;
		top: -95px;
		left: -50px;
		z-index: 2;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle,
	.campaignSection .campaignSectionContent .campaignSectionItemOther {
		padding: 24px 16px;
		border-radius: 24px;
		border: 3px solid var(--green-primary);
		position: relative;
		background: #FFF;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 32px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle:after {
		content: '';
		position: absolute;
		width: 48px;
		height: 48px;
		display: block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_plus.png') no-repeat center;
		background-size: cover;
		left: 50%;
		bottom: -30px;
		transform: translateX(-50%);
		z-index: 2;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .title,
	.campaignSection .campaignSectionContent .campaignSectionItemOther .title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: center;
		position: relative;
		border-bottom: 3px dashed #C9C9C9;
		font-size: 22px;
		line-height: 1;
		padding-bottom: 23px;
	}


	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .title:before {
		content: '';
		width: 75px;
		height: 80px;
		display: block;
		background: url(/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_reward_raffle.png) center no-repeat;
		background-size: contain;
		margin-right: 12px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .title span {
		font-size: 48px;
		color: var(--green-primary);
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .desc,
	.campaignSection .campaignSectionContent .campaignSectionItemOther .desc {
		font-size: 16px;
		padding-top: 23px;
		text-align: center;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .desc span,
	.campaignSection .campaignSectionContent .campaignSectionItemOther .desc span {
		color: var(--green-primary)
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .note {
		width: 90px;
		height: 90px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		background: var(--green-primary);
		font-weight: 400;
		color: #fff;
		border-radius: 50%;
		top: -66px;
		right: -20px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .note .noteUpper {
		font-size: 13px;
		line-height: 0.9;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .note .noteLower {
		line-height: 0.9;
		font-size: 13px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemRaffle .note .noteLower span {
		font-size: 26px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther {
		margin-bottom: 130px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title {
		margin-top: 28px;
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title span {
		font-size: 34px;
		color: var(--green-primary);
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title .text {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		font-size: 24px;
		line-height: 1;
		gap: 12px;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title:before {
		content: '';
		width: 52px;
		height: 51px;
		display: block;
		position: absolute;
		top: -20px;
		left: calc(50% - 130px);
		z-index: 2;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_bubble-hashtag.png') no-repeat center;
		background-size: cover;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther .title:after {
		content: '';
		width: 52px;
		height: 51px;
		display: block;
		position: absolute;
		top: -20px;
		right: calc(50% - 130px);
		z-index: 2;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_bubble-heart.png') no-repeat center;
		background-size: cover;
	}

	.campaignSection .campaignSectionContent .campaignSectionItemOther:after {
		content: '';
		position: absolute;
		width: 200px;
		height: 110px;
		bottom: -75px;
		right: -25px;
		display: block;
		z-index: 2;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_reward_other-sp.png') no-repeat center;
		background-size: cover;
	}

	.campaignPeriod {
		text-align: center;
	}

	.campaignPeriod .campaignPeriodTitle {
		font-size: 24px;
		color: var(--text-secondary);
	}

	.campaignPeriod .campaignPeriodContent {
		padding: 24px;
		border: 2px solid var(--text-secondary);
		border-radius: 24px;
		margin-bottom: 24px;
	}

	.campaignPeriod .campaignPeriodContent p {
		font-size: 30px;
		color: var(--green-primary);
		line-height: 1.5;
	}

	.campaignPeriod .campaignPeriodContent p span {
		font-size: 16px;
	}

	.campaignPeriod .startDiagnosisLink .emphasisText {
		line-height: 2;
		margin-bottom: 0;
	}

	.campaignSection .campaignPeriod .campaignPeriodContent p .dayMark {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle;
		padding: 2px;
		height: 20px;
		width: 20px;
		margin: 0 3px;
		font-size: 12px;
		color: #FFF;
		background: var(--green-primary);
		line-height: 1.5;
		border-radius: 100px;
	}

	.campaignPeriod .startDiagnosisLinkButton a {
		width: 90%;
		font-size: 18px;
	}

	.campaignProcedure {
		width: 100%;
	}

	.campaignProcedureSection.mainInner {
		margin-top: 80px !important;
	}

	.campaignSteps {
		padding: 40px 0;
		background: #F6F1ED;
	}

	.campaignProcedure .campaignProcedureTitle {
		font-size: 26px;
		text-decoration: none;
		margin-bottom: 85px;
	}

	.campaignProcedure .stepsContainer {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 83px;
	}

	.campaignProcedure {
		margin: 0 0 56px;
	}

	.campaignProcedure .stepsContainer .step01,
	.campaignProcedure .stepsContainer .step02 {
		width: calc(345px - 24px);
		padding: 32px 16px;
		background-color: #fff;
	}

	.campaignProcedure .stepsContainer .step02:before {

		width: 192px;
		height: 63px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/img_step02-sp.png') center no-repeat;
		background-size: contain;
	}


	.campaignProcedure .stepsContainer .title {
		font-size: 22px;
		margin-bottom: 16px;
		line-height: 2;
		height: auto;
	}

	.campaignProcedure .stepsContainer .desc {
		font-size: 16px;
		text-align: left;
	}

	.campaignProcedure .stepsContainer .noteAsterisk {
		font-size: 13px;
		text-align: left;
	}

	.campaignProcedure .stepsContainer .step01 .image {
		width: 215px;
		height: 160px;
		margin-bottom: 16px;
	}

	.campaignProcedure .stepsContainer .step01 .saveImageLink a {
		width: 310px;
		margin-bottom: 16px;
	}

	.campaignProcedure .startDiagnosisLink {
		margin-bottom: 56px;
	}

	.campaignSteps .campaignNote {
		border: 1px solid var(--text-secondary);
		padding: 24px 16px 30px;
		font-size: 18px;
		line-height: 1.7;
	}

	.campaignSteps .campaignNote .block01 {
		text-align: center;
		padding-bottom: 32px;
		border-bottom: 2px dashed #C9C9C9;
	}

	.campaignSteps .campaignNote .block02 {
		display: block;
		flex-direction: column;
		padding-top: 32px;
		font-size: 16px;
	}

	.campaignSteps .campaignNote .block02 span {
		display: block;
		margin-bottom: 24px;
	}

	.snsShare {
		padding: 0 24px;
		margin-bottom: 80px;
	}

	.snsShareTitle {
		font-size: 22px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-bottom: 24px;
	}

	.snsShareTitle:before,
	.snsShareTitle:after {
		width: 14px;
		height: 26px;
		margin: 0;
		background-size: cover;
	}

	.snsShareButtons {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 16px;
	}

	.snsShareButtons p {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 320px;
		height: 87px;
	}

	.snsShareButtons p a {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		border-radius: 50px;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		background: var(--green-primary);
		color: #fff;
		width: 360px;

	}

	.snsShareButtons .snsShareButtonX a:before {
		content: '';
		position: absolute;
		width: 73px;
		height: 73px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_sns_x.png') no-repeat center;
		display: block;
		left: 8px;
	}

	.snsShareButtons .snsShareButtonX a:after {
		content: '';
		height: 12px;
		width: 12px;
		display: block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window.png') no-repeat center;
		background-size: contain;
		margin-left: 8px;
	}

	.snsShareButtons .snsShareButtonX a {
		padding-left: 70px;
	}

	.snsShareButtons .snsShareButtonInstagram a {
		padding-left: 60px;
	}

	.snsShareButtons .snsShareButtonInstagram a:before {
		content: '';
		position: absolute;
		width: 73px;
		height: 73px;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/icon_sns_instagram.png') no-repeat center;
		display: block;
		left: 8px;
	}

	.snsShareButtons .snsShareButtonInstagram a:after {
		content: '';
		height: 12px;
		width: 12px;
		display: block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window.png') no-repeat center;
		background-size: contain;
		margin-left: 8px;
	}

	.trendSection {
		margin: 0 24px;
	}

	.trendSection .inner {
		width: 100%;
		padding: 40px 0;

	}

	.trendSection .trendSectionTitle {
		display: flex;
		margin-bottom: 32px;
		font-size: 24px;
		justify-content: center;
		align-items: flex-end;
		text-align: center;
	}

	.trendSection .trendSectionTitle:before,
	.trendSection .trendSectionTitle:after {
		content: '';
		width: 11px;
		height: 26px;
		background-size: cover;
	}

	.trendSection .trendSectionTitle .greenText {
		color: var(--green-primary);
	}

	.trendSection .trendSectionContent {
		display: flex;
		gap: 0;
		flex-direction: column-reverse;
	}

	.trendSection .trendSectionContent .desc {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-top: 0;
	}

	.trendSection .trendSectionContent .image {
		width: 300px;
	}

	.trendSection .trendSectionContent .desc p {
		font-size: 16px;
		line-height: 1.7;
		margin-bottom: 37px;
	}

	.trendSection .trendSectionContent .desc .tryLink a {
		width: 294px;
		font-weight: 400;
	}

	.otherInformation {
		background: #F6F1ED;
		width: 100%;
		padding: 80px 0 0;
	}

	.otherInformation::before {
		height: 25px;
		bottom: auto;
		clip-path: ellipse(60% 100% at 50% 100%);
		background: linear-gradient(180deg, #EDE8E4 0%, #F6F1ED 100%);
	}

	.otherInformation .inner {
		width: 100%;
	}

	.otherInformation .otherInformationTitle {
		margin-bottom: 48px;
		font-size: 26px;
		line-height: 2;
		color: var(--green-primary);
		text-align: center;
	}

	.otherInformation .otherInformationSubtitle {
		margin-bottom: 32px;
		font-size: 16px;
		line-height: 2;
		text-align: center;
	}

	.otherInformation .offer {
		text-align: center;
		margin-bottom: 80px;
	}

	.otherInformation .offer .emphasisText {
		font-size: 16px;
		margin-bottom: 16px;
	}

	.otherInformation .offer .offerLink a {
		max-width: 295px;
	}

	.otherInformation .desc {
		font-size: 24px;
		line-height: 2;
		text-align: center;
		margin-bottom: 180px;
	}

	*[class^="normalBlockA"]>.blockInner>.blockTitle,
	*[class*=" normalBlockA"]>.blockInner>.blockTitle {
		font-weight: 400;
	}

	.otherInformation .detailAccordion {
		padding: 0 24px;
		margin-bottom: 86px;
	}

	.otherInformation .detailAccordion .blockTitle .ttl {
		font-size: 24px;
	}

	.otherInformation .detailAccordion #sustainaPayAccContent01 {
		padding: 24px 16px;
	}

	.otherInformation .detailAccordion .blockDetail p {
		font-size: 16px;
	}

	.otherInformation .detailAccordion ul li {
		font-size: 16px;
	}

	.otherInformation .detailAccordion .blockDetail ul li dl dd a {
		color: var(--green-primary);
		position: relative !important;
		display: inline-block !important;
		align-items: center;
	}

	.otherInformation .detailAccordion .blockDetail ul li dl dd a:after {
		content:'';
		width: 14px;
		height: 14px;
		display: inline-block;
		background: url('/kojin/visa_debit/sustaina_pay/specialty/cam/images/ico_new-window-green.png') no-repeat center;
		background-size: contain;
		margin-left: 8px;
	}

	.widthStickyNavbarFull .simpleFooter {
		margin-bottom: 100px !important;
	}

	.spModalHint {
		font-size: 18px;
		color: var(--green-primary);
		font-weight: 400;
	}

	.spModalDownloadHint {
		font-size: 16px;
		color: var(--text-primary);
	}

	.spModalDownloadHint a {
		color: var(--green-primary);
	}

	.v3-boxModal {
		margin: 0 7px;
		border-radius: 10px;
	}

	.spModalImageBlock {
		margin-bottom: 30px;
	}

}

#sustainaPayPageTop .grayBG {
	background: #D9D9D9;
}

.sustainaPayBtn01.sustainaPayBtnArrowRight01 {
	font-weight: 400;
}