@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
html,
body {
	@media (width <= 768px) {
		font-size: 2.6666vw;
	}
}

.header_navi_company a {
	color: #666;
	font-size: 1.4rem;
	border-bottom: 1px solid #666;
	@media (width <= 768px) {
		font-size: 1.2rem;
	}
}

.header_navi_company::after {
	content: "";
	width: 8px;
	height: 12px;
	vertical-align: -0.25rem;
	margin-left: 0.5rem;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #009c74;
	border-right: 2px solid #009c74;
	margin-left: -1px;
	transform: translateY(-50%) rotate(45deg);
	@media (width <= 768px) {
		position: relative;
		top: 1px;
	}
}

body {
	&.is-camp-fixed {
		height: 100%;
		overflow: hidden;
		position: relative;
		&::before {
			position: fixed;
			content: "";
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100vh;
			z-index: 800;
		}
	}
}

.campaign {
	--color--main: #009c74;
	--color--yellow: #ffdb65;
	padding-bottom: 80px;
	* {
		box-sizing: border-box;
		word-break: break-word; /* 長い単語を強制的に折り返す */
		overflow-wrap: break-word; /* 同様の目的。対応ブラウザが広い */
		line-break: strict; /* 節での自然な改行を優先（日本語では特に有効） */
		white-space: normal; /* 普通の折り返し挙動に */
	}
	@media (width <= 768px) {
		padding-bottom: 2rem;
	}
	.section__ttl {
		font-size: 4.8rem;
		font-weight: bold;
		color: #ffef8f;
		text-align: center;
		@media (width <= 768px) {
			font-size: 3.2rem;
		}
	}
	.sp {
		display: none;
		@media (width <= 768px) {
			display: block;
		}
	}
	.sp-inline {
		display: none;
		@media (width <= 768px) {
			display: inline;
		}
	}
	.pc {
		display: block;
		@media (width <= 768px) {
			display: none;
		}
	}
	.pc-inline {
		display: inline;
		@media (width <= 768px) {
			display: none;
		}
	}
	.color-white {
		color: #fff;
	}
	.min {
		font-family: "Noto Serif JP", serif;
	}
	.modal {
		position: fixed;
		z-index: 10001;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: grid;
		place-content: center;
		display: none;
		&.is-show {
			display: block;
		}
		@media (width <= 768px) {
			padding: 1.6rem;
		}
	}
	.modal__bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(135, 134, 134, 0.64);
	}
	.modal__close {
		position: absolute;
		top: 0;
		right: 0;
		width: 54px;
		height: 54px;
		border-radius: 100%;
		border: 5px solid #fff;
		background-color: #000;
		color: #fff;
		display: grid;
		place-content: center;
		top: -30px;
		right: -30px;
		z-index: 13;
		transition: opacity 0.3s;
		@media (any-hover: hover) {
			&:hover {
				opacity: 0.7;
			}
		}
		@media (width <= 768px) {
			width: 3.6rem;
			height: 3.6rem;
			position: fixed;
			top: 0.5rem;
			right: 0.5rem;
			border-width: 0.3rem;
		}
		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 26px;
			height: 4px;
			border-radius: 20px;
			background-color: #fff;
			top: 50%;
			left: 0;
			right: 0;
			margin-inline: auto;
			@media (width <= 768px) {
				width: 1.8rem;
				height: 2.5px;
			}
		}
		&::before {
			transform: translateY(-50%) rotate(45deg);
		}
		&::after {
			transform: translateY(-50%) rotate(-45deg);
		}
	}
	.modal__content {
		.deco {
			position: relative;
			width: 840px;
			margin: 0 auto;
			@media (width <= 768px) {
				width: auto;
			}
			&::before,
			&::after {
				position: absolute;
				content: "";
				width: 66px;
				height: 65px;
				background: url(../img/campaign/frame.png) no-repeat center/100% auto;
				@media (width <= 768px) {
					height: 5.1rem;
					width: 5.1rem;
				}
			}
			&.upper {
				&::before {
					left: 0;
					top: 0;
				}
				&::after {
					right: 0;
					top: 0;
					transform: scale(-1, 1);
				}
			}
			&.bottom {
				@media (width <= 768px) {
					margin-inline: -1rem;
					width: calc(100% + 2rem);
				}
				&::before {
					left: 0;
					bottom: 0;
					transform: scale(1, -1);
				}
				&::after {
					right: 0;
					bottom: 0;
					transform: scale(-1, -1);
				}
			}
		}
	}
	.modal__wrapper {
		position: relative;
		width: fit-content;
		margin-inline: auto;
	}
	.modal__inner {
		width: 960px;
		background-color: #fff;
		position: relative;
		z-index: 10;
		padding: 30px;
		max-height: 100vh;
		overflow: auto;
		@media (width <= 768px) {
			width: auto;
			padding: 1.6rem;
			border-radius: 0.5rem;
		}
	}
	.point__ttl {
		width: 464px;
		margin-inline: auto;
		@media (width <= 768px) {
			width: auto;
			padding-top: 1rem;
		}
	}
	.point__list {
		padding: 0;
		list-style: none;
		max-width: 700px;
		margin: 10px auto 0;
		@media (width <= 768px) {
			padding-inline: 1.2rem;
			padding-bottom: 2rem;
		}
		li {
			padding-block: 20px;
			border-bottom: 1px solid rgb(0, 105, 78, 0.3);
			&:last-of-type {
				border-bottom: none;
			}
			@media (width <= 768px) {
				padding-block: 0.8rem;
			}
		}
		p {
			font-size: 1.8rem;
			@media (width <= 768px) {
				font-size: 1.2rem;
			}
		}
	}
	.point__item-ttl {
		color: #00694e;
		font-size: 2.8rem;
		font-weight: 900;
		line-height: 1.3;
		@media (width <= 768px) {
			font-size: 2.2rem;
		}
	}
	.mv {
		picture {
			display: block;
		}
		img {
			width: 100%;
		}
	}
}
.btn-wrapper {
	width: 480px;
	margin: 48px auto 0;
	position: relative;
	z-index: 10;
	@media (width <= 768px) {
		width: 34.3rem;
		margin: 3.2rem auto 0;
	}
	a {
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
	}
}

.bnt-cta {
	border-radius: 10px;
	color: #fff;
	min-height: 64px;
	font-size: 1.8rem;
	font-weight: bold;
	background-color: #eb6120;
	border: 2px solid #cb5118;
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
	display: grid;
	place-content: center;
	p {
		font-size: inherit;
	}
	@media (width <= 768px) {
		min-height: 6.4rem;
		border-radius: 1rem;
		font-size: 1.8rem;
		padding-top: 0.5rem;
		padding-right: 1rem;
	}
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 30px;
		width: 8px;
		height: 8px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: translateY(-50%) rotate(45deg);
		will-change: opacity;
		@media (width <= 768px) {
			width: 0.8rem;
			height: 0.8rem;
			right: 2rem;
			top: 55%;
		}
	}
	.txt-sub {
		position: absolute;
		top: -15px;
		left: 0;
		right: 0;
		width: fit-content;
		margin-inline: auto;
		font-size: 1.3rem;
		color: #6c2a2a;
		padding: 5px 20px;
		border-radius: 100px;
		min-width: 153px;
		line-height: 1;
		text-align: center;
		background: linear-gradient(
			90deg,
			rgba(233, 195, 75, 1) 0%,
			rgba(255, 248, 225, 1) 54%,
			rgba(233, 195, 75, 1) 100%
		);
		@media (width <= 768px) {
			min-width: 15.3rem;
			top: -1.5rem;
			font-size: 1.4rem;
			left: 2rem;
		}
		&::after {
			content: "";
			position: absolute;
			width: 38px;
			height: 38px;
			right: calc(100% - 3px);
			background: url(../img/campaign/min60.png) no-repeat center/contain;
			top: 45%;
			transform: translateY(-50%);
			@media (width <= 768px) {
				right: calc(100% - 2rem);
				width: 3.8rem;
				height: 3.8rem;
				background-image: url(../img/campaign/min60_sp.png);
			}
		}
	}
}

.bg_heading {
	height: 160px;
	padding-block: 40px;
	position: relative;
	z-index: 10;
	@media (width <= 768px) {
		height: 13.3rem;
		padding-block: 2.4rem;
	}
}

.special {
	background: url(../img/campaign/bg_special.png) #e2fbf7 no-repeat calc(50% + 80px) calc(100% + 60px) / 1500px auto;
	padding-block: 40px;
	@media (width <= 768px) {
		padding-block: 4rem;
		background: url(../img/campaign/bg_special_sp.png) #e2fbf7 no-repeat top -6.9rem center / 150% auto;
	}
}

.special__heading {
	width: fit-content;
	margin-inline: auto;
	position: relative;
	@media (width <= 768px) {
		width: auto;
	}
	&::before,
	&::after {
		content: "";
		position: absolute;
	}
	&::before {
		width: 152px;
		height: 148px;
		background: url(../img/campaign/img_special01.png) no-repeat center/100% auto;
		left: 0;
		bottom: 54px;
		@media (width <= 768px) {
			width: 10rem;
			height: 12rem;
			bottom: auto;
			top: 0rem;
			left: 1.6rem;
		}
	}
	&::after {
		width: 178px;
		height: 191px;
		background: url(../img/campaign/img_special02.png) no-repeat center/100% auto;
		right: 0;
		bottom: 54px;
		@media (width <= 768px) {
			width: 12.2rem;
			height: 12.7rem;
			bottom: auto;
			top: -2rem;
			right: 0.3rem;
		}
	}
	.heading__txt {
		margin-top: 16px;
		text-align: center;
		font-size: 3.2rem;
		line-height: 1.6;
		font-weight: bold;
		@media (width <= 768px) {
			margin-top: 0.8rem;
			font-size: 2rem;
			line-height: 1.4;
		}
	}
}

.marker {
	background: linear-gradient(
		180deg,
		rgba(255, 229, 71, 0) 60%,
		rgba(255, 229, 71, 1) 60%,
		rgba(255, 229, 71, 1) 92%,
		rgba(255, 229, 71, 0) 92%,
		rgba(255, 229, 71, 0) 100%
	);
	@media (width <= 768px) {
		background: linear-gradient(
			180deg,
			rgba(255, 229, 71, 0) 50%,
			rgba(255, 229, 71, 1) 50%,
			rgba(255, 229, 71, 1) 92%,
			rgba(255, 229, 71, 0) 92%,
			rgba(255, 229, 71, 0) 100%
		);
		padding-inline: 0.5em;
	}
}

.special__ttl {
	text-align: center;
	color: var(--color--main);
	font-size: 4rem;
	font-weight: bold;
	margin-top: 20px;
	position: relative;
	width: fit-content;
	margin-inline: auto;
	position: relative;
	bottom: 0;
	line-height: 1.3;
	@media (width <= 768px) {
		font-size: 3.2rem;
	}
	&::before,
	&::after {
		content: "";
		position: absolute;
		bottom: 4px;
		height: 0.8em;
		width: 1px;
		background-color: var(--color--main);
		@media (width <= 768px) {
			height: 1em;
			bottom: 0;
		}
	}
	&::before {
		left: -0.6em;
		transform: rotate(-45deg);
	}
	&::after {
		right: -0.5em;
		transform: rotate(45deg);
	}
	.small {
		font-size: 60%;
		@media (width <= 768px) {
			font-size: 75%;
		}
	}
}

.balloon {
	margin-inline: auto;
	font-size: 3rem;
	font-weight: bold;
	width: fit-content;
	background-color: var(--color--main);
	border-radius: 8px;
	padding: 5px 10px 7px;
	color: #fff;
	line-height: 1.2;
	position: relative;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));
	@media (width <= 768px) {
		padding: 0.5rem 1rem 0.7rem;
	}
	&::after {
		content: "";
		position: absolute;
		width: 12px;
		height: 8px;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color--main);
		margin-inline: auto;
		clip-path: polygon(100% 0, 0 0, 50% 100%);
	}
}

.special__list {
	list-style: none;
	padding: 0;
	margin: 32px auto 0;
	display: flex;
	column-gap: 18px;
	max-width: 960px;
	@media (width <= 768px) {
		display: block;
		margin-top: 3.2rem;
		margin-inline: 1.6rem;
	}
}

.special__item {
	width: calc(50% - 9px);
	border-radius: 10px;
	border: 3px solid var(--color--main);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	@media (width <= 768px) {
		width: auto;
	}
	.tokuten {
		background: url(../img/campaign/img_ribbon.png) no-repeat center/contain;
		font-size: 2.21rem;
		font-weight: bold;
		width: 135px;
		height: 41px;
		display: grid;
		place-content: center;
		margin-inline: auto;
		position: relative;
		letter-spacing: 0.05em;
		@media (width <= 768px) {
			width: 13.5rem;
			height: 4.1rem;
		}
		p {
			font-size: inherit;
		}
		.num {
			font-size: 145%;
		}
	}
	&.item01 {
		figure {
			width: 400px;
			margin-inline: auto;
			@media (width <= 768px) {
				width: auto;
			}
		}
		.tokuten {
			&::after {
				content: "";
				position: absolute;
				width: 54px;
				height: 54px;
				background: url(../img/campaign/ill_special01.svg) no-repeat center/contain;
				right: -86px;
				top: -3px;
				@media (width <= 768px) {
					width: 5.4rem;
					height: 5.4rem;
					right: -7.6rem;
					top: -0.2rem;
				}
			}
		}
	}
	&.item02 {
		@media (width <= 768px) {
			margin-top: 1.8rem;
		}
		figure {
			width: 348px;
			margin-inline: auto;
			@media (width <= 768px) {
				width: auto;
			}
		}
		.tokuten {
			&::after {
				content: "";
				position: absolute;
				width: 62px;
				height: 56px;
				background: url(../img/campaign/ill_special02.svg) no-repeat center/contain;
				right: -86px;
				top: -6px;
				@media (width <= 768px) {
					width: 6.2rem;
					height: 5.6rem;
					right: -8.6rem;
					top: -0.8rem;
				}
			}
		}
	}
}

.special__item-heading {
	background-color: var(--color--main);
	padding-block: 15px;
	text-align: center;
	min-height: 186px;
	@media (width <= 768px) {
		min-height: inherit;
		padding-block: 1.6rem 2rem;
	}
	.txt-sub {
		color: #fff;
		font-size: 2.4rem;
		font-weight: bold;
		line-height: 1.3;
		margin-top: 10px;
		@media (width <= 768px) {
			margin-top: 1rem;
		}
		.small {
			font-size: 83%;
		}
		.sp-small {
			@media (width <= 768px) {
				font-size: 83%;
			}
		}
	}
	.txt-main {
		font-size: 3.2rem;
		color: #ffe547;
		font-weight: bold;
		line-height: 1.2;
		@media (width <= 768px) {
			line-height: 1.1;
		}
		.large {
			font-size: 112.5%;
		}
		.small {
			font-size: 75%;
		}
		.more-small {
			font-size: 62%;
		}
	}
}

.special__item-body {
	background-color: #fff;
	padding-block: 23px;
	text-align: center;
	min-height: 280px;
	flex-grow: 1;
	@media (width <= 768px) {
		padding: 1.2rem 1.6rem;
		min-height: inherit;
	}
}

.about {
	background-color: rgba(255, 248, 206, 1);
	padding-block: 40px 24px;
	@media (width <= 768px) {
		padding-block: 3.2rem 1.6rem;
	}
}

.about__container {
	max-width: 960px;
	margin: 0 auto;
	.txt01 {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		font-size: 2.4rem;
		font-weight: bold;
		@media (width <= 768px) {
			font-size: 2.3rem;
		}
		i {
			width: 295px;
			flex-shrink: 0;
			margin-right: 8px;
			position: relative;
			top: -4px;
			@media (width <= 768px) {
				width: 20.3rem;
				top: -0.4rem;
				margin-right: 0.8rem;
			}
		}
	}
	.txt02 {
		font-size: 4rem;
		color: #ca0000;
		font-weight: bold;
		text-align: center;
		margin-top: 8px;
		@media (width <= 768px) {
			margin-top: 1.4rem;
		}
		@media (width <= 768px) {
			font-size: 3.2rem;
			line-height: 1.3;
			.sp-small {
				font-size: 75%;
			}
		}
		.small {
			font-size: 75%;
		}
	}
	.txt03 {
		margin-top: 10px;
		img {
			width: 100%;
		}
		@media (width <= 768px) {
			margin-top: 2rem;
		}
	}
}

.can-do {
	padding-bottom: 15px;
	@media (width <= 768px) {
		padding-bottom: 3.2rem;
	}
	background: linear-gradient(
		180deg,
		rgba(255, 248, 206, 1) 0%,
		rgba(255, 248, 206, 1) 83px,
		rgba(255, 255, 255, 1) 360px
	);
	@media (width <= 768px) {
		background: linear-gradient(
			180deg,
			rgba(255, 248, 206, 1) 0%,
			rgba(255, 248, 206, 1) 8.3rem,
			rgba(255, 255, 255, 1) 73rem
		);
	}
}

.can-do__ttl-wrapper {
	background-color: var(--color--main);
	text-align: center;
	padding-block: 24px;
	@media (width <= 768px) {
		padding-block: 2.2rem 1.3rem;
	}
}

.can-do__ttl {
	position: relative;
	font-size: 3.2rem;
	color: #fff;
	font-weight: bold;
	width: fit-content;
	margin-inline: auto;
	@media (width <= 768px) {
		display: flex;
		font-size: 2.4rem;
		text-align: left;
		line-height: 1.3;
	}
	i {
		position: absolute;
		width: 115px;
		left: -121px;
		top: -40px;
		@media (width <= 768px) {
			position: relative;
			width: 8.6rem;
			flex-shrink: 0;
			left: 0;
			top: -0.6rem;
		}
	}
}

.can-do__container {
	max-width: 960px;
	margin-inline: auto;
	@media (width <= 768px) {
		padding-inline: 1.6rem;
	}
}

.can-do__upper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	margin-top: 24px;
	img {
		width: 100%;
	}
	@media (width <= 768px) {
		display: block;
		margin-top: 1.5rem;
		> div {
			margin-bottom: 1.6rem;
		}
		.graph {
			margin-inline: -0.6rem;
			display: block;
			img {
				width: 100%;
			}
		}
	}
	p {
		margin-left: 24px;
		@media (width <= 768px) {
			width: 31.6rem;
			margin-inline: auto;
		}
	}
	.link {
		color: var(--color--main);
		font-size: 2.4rem;
		text-decoration: none;
		text-align: center;
		font-weight: bold;
		display: block;
		width: fit-content;
		margin: 20px auto 0;
		position: relative;
		padding-right: 1em;
		transition: opacity 0.3s;
		@media (any-hover: hover) {
			&:hover {
				opacity: 0.7;
			}
		}
		@media (width <= 768px) {
			font-size: 1.8rem;
		}
		&::before {
			content: "";
			position: absolute;
			width: 8px;
			height: 8px;
			border-top: 2px solid var(--color--main);
			border-right: 2px solid var(--color--main);
			top: 50%;
			transform: translateY(-50%) rotate(45deg);
			right: 0.4em;
			@media (width <= 768px) {
				width: 0.8rem;
				height: 0.8rem;
				top: 54%;
			}
		}
		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 1px;
			background-color: var(--color--main);
			left: 0;
			right: 0;
			top: 100%;
		}
	}
}

.can-do__list {
	display: flex;
	column-gap: 24px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	@media (width <= 768px) {
		display: block;
	}
}

.can-do__item {
	width: calc((100% - 24px * 2) / 3);
	background-color: #fff;
	border-radius: 16px;
	border: 2px solid var(--color--main);
	@media (width <= 768px) {
		width: auto;
		display: flex;
		border-radius: 1.5rem;
	}
	@media (width <= 768px) {
		+ .can-do__item {
			margin-top: 0.8rem;
		}
	}
}

.can-do__item-heading {
	background-color: var(--color--main);
	position: relative;
	padding-block: 4px;
	border-radius: 14px 14px 0 0;
	@media (width <= 768px) {
		width: 6rem;
		display: grid;
		place-content: center;
		border-radius: 1.3rem 0 0 1.3rem;
	}
	&::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
		top: -24px;
		width: 60px;
		height: 33px;
		background: url(../img/campaign/ill_eyes.svg) no-repeat center/contain;
		@media (width <= 768px) {
			display: none;
		}
	}
	p {
		font-size: 2.4rem;
		font-weight: bold;
		color: #fff;
		text-align: center;
		line-height: 1;
		@media (width <= 768px) {
			font-size: 1.2rem;
		}
		.large {
			font-size: 133%;
			display: inline-block;
			margin-left: 0.5em;
			@media (width <= 768px) {
				display: block;
				margin-left: 0;
				font-size: 196%;
			}
		}
	}
}

.can-do__item-body {
	background: url(../img/campaign/ill_deco.svg) #fff no-repeat center/194px 103px;
	height: 147px;
	display: grid;
	place-content: center;
	text-align: center;
	border-radius: 0 0 16px 16px;
	@media (width <= 768px) {
		background-image: none;
		height: auto;
		text-align: left;
		padding: 0.5rem 0 0.5rem 2rem;
		.item03 & {
			padding-top: 0.3rem;
			padding-bottom: 0.8rem;
		}
	}
	.and {
		font-size: 1.2rem;
		font-weight: bold;
		background-color: #c0ece1;
		border-radius: 100%;
		width: fit-content;
		padding: 4px 8px;
		margin: 4px auto 2px;
		display: block;
		@media (width <= 768px) {
			display: inline;
			background-color: transparent;
			padding: 0;
			margin: 0;
			border-radius: 0;
			font-size: 1.4rem;
		}
	}
	.txt {
		font-size: 2.4rem;
		font-weight: bold;
		line-height: 1.4;
		@media (width <= 768px) {
			line-height: 1.2;
		}
		&.lh {
			line-height: 1.2;
		}
		.small {
			font-size: 66.6%;
		}
		&.txt01 {
			line-height: 1.2;
		}
		.txt-sub {
			font-size: 1.8rem;
			font-weight: bold;
			.large {
				font-size: 133.3%;
			}
		}
		&.txt02 {
			.large {
				font-size: 133.3%;
				@media (width <= 768px) {
					font-size: 100%;
				}
			}
			.middle {
				font-size: 83.3%;
				@media (width <= 768px) {
					font-size: 100%;
				}
			}
			.sp-small {
				@media (width <= 768px) {
					font-size: 83.3%;
				}
			}
		}
		&.txt03 {
			@media (width <= 768px) {
				line-height: 1.2;
			}
			.sp-middle {
				@media (width <= 768px) {
					font-size: 75%;
				}
			}
		}
	}
}

.color-orange {
	color: #eb6120;
}

.campaign-flow__container {
	padding: 48px 0 30px;
	background-color: #fff8ce;
	@media (width <= 768px) {
		padding: 4.8rem 1.6rem 3rem;
	}
}

.campaign-flow__ttl {
	background-color: var(--color--main);
	text-align: center;
	color: #fff;
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1.6;
	padding-block: 16px;
	@media (width <= 768px) {
		font-size: 2.4rem;
		padding-block: 1.3rem;
	}
}

.campaign-flow__list {
	padding: 0;
	list-style: none;
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	column-gap: 24px;
	@media (width <= 768px) {
		display: block;
	}
}

.campaign-flow__item {
	position: relative;
	border: 2px solid var(--color--main);
	border-radius: 10px;
	background-color: #fff;
	width: calc((100% - 24px * 2) / 3);
	padding: 32px 13px 24px;
	box-shadow: 3px 3px 1px -1px #bababa;
	z-index: 10;
	@media (width <= 768px) {
		width: auto;
		padding: 3.2rem 1.6rem 2.4rem;
	}
	&:not(:last-of-type) {
		&::after {
			content: "";
			position: absolute;
			height: 39px;
			background-color: var(--color--main);
			top: 50%;
			width: 28px;
			left: calc(100%);
			transform: translateY(-50%);
			@media (width <= 768px) {
				width: 2.4rem;
				height: 3.9rem;
				left: 0;
				right: 0;
				top: 100%;
				transform: translateY(0);
				margin-inline: auto;
			}
		}
	}
	.tokuten {
		background-color: #eb6120;
		color: #fff;
		position: absolute;
		top: -2px;
		right: -2px;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 3px 15px 4px 15px;
		border-radius: 0 10px 0 20px;
		@media (width <= 768px) {
			padding: 0.3rem 1.5rem 0.4rem 1.5rem;
		}
	}
	.num {
		border-radius: 1000px;
		background-color: var(--color--main);
		color: #fff;
		font-size: 2.5rem;
		text-align: center;
		width: 51px;
		height: 51px;
		line-height: 1.1;
		font-weight: bold;
		display: grid;
		place-content: center;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
		transform: translateY(-50%);
		top: 0;
		box-shadow: 3px -1px 1px -1px #bababa;
		@media (width <= 768px) {
			box-shadow: 3px 0 1px -1px #bababa;
			width: 5.1rem;
			height: 5.1rem;
		}
		span {
			font-size: 40%;
			display: block;
		}
	}
	i {
		display: block;
		width: 60px;
		margin: 6px auto 10px;
		@media (width <= 768px) {
			width: 6rem;
			margin: 0.6rem auto 1rem;
		}
	}
	p {
		font-size: 1.6rem;
		line-height: 1.6;
		font-weight: 500;
	}
	+ .campaign-flow__item {
		@media (width <= 768px) {
			margin-top: 3.9rem;
		}
	}
}

.campaign-flow__item-ttl {
	text-align: center;
	color: var(--color--main);
	font-size: 2.4rem;
	text-align: center;
	font-weight: bold;
}

.voice {
	background: url(../img/campaign/bg_voice.png) no-repeat left bottom/1076px auto;
	padding-bottom: 40px;
	@media (width <= 768px) {
		padding-top: 3.2rem;
		padding-inline: 1.6rem;
		background: none;
	}
}

.voice__container {
	max-width: 960px;
	margin-inline: auto;
	.heading__txt {
		margin-top: 8px;
		text-align: center;
		font-size: 1.4rem;
		-webkit-text-stroke: 6px #fff;
		text-stroke: 6px #fff;
		paint-order: stroke;
		@media (width <= 768px) {
			font-size: 1.2rem;
			line-height: 1.4;
			margin-left: auto;
			text-align: left;
			width: fit-content;
			margin-top: 1.6rem;
		}
	}
}

.voice__main-ttl {
	font-size: 4rem;
	line-height: 1.3;
	text-align: center;
	color: #f7883e;
	font-weight: bold;
	@media (width <= 768px) {
		font-size: 3.2rem;
		.small {
			font-size: 75%;
		}
	}
}

.voice__hading {
	min-height: 180px;
	padding-top: 70px;
	background-image: url(../img/campaign/img_voice01.png), url(../img/campaign/img_voice02.png);
	background-repeat: no-repeat;
	background-position:
		left bottom,
		right bottom;
	background-size:
		170px auto,
		274px auto;
	@media (width <= 768px) {
		background: url(../img/campaign/img_voice01.png) no-repeat left bottom/11.8rem auto;
		min-height: 13rem;
		padding-top: 0;
	}
}

.voice__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.voice__item {
	display: grid;
	grid-template-columns: 130px 1fr;
	grid-template-rows: auto auto 1fr;
	column-gap: 24px;
	background-color: #f3fffd;
	padding: 24px;
	border-radius: 10px;
	box-shadow: 3px 3px 1px -1px #bababa;
	position: relative;
	+ .voice__item {
		margin-top: 24px;
		@media (width <= 768px) {
			margin-top: 1.6rem;
		}
	}
	@media (width <= 768px) {
		grid-template-columns: 10rem 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 0.8rem;
		padding: 1.6rem;
		border-radius: 1rem;
	}
}

.voice__img {
	grid-column: 1;
	grid-row: 1/4;
	@media (width <= 768px) {
		grid-row: 1;
	}
}

.voice__name {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.6rem;
	font-weight: bold;
	position: relative;
	padding-left: 22px;
	@media (width <= 768px) {
		grid-column: inherit;
		grid-row: inherit;
		position: absolute;
		left: 0;
		top: 0;
		background-color: var(--color--main);
		color: #fff;
		border-radius: 1rem 0 0 0;
		padding: 0.2rem 1rem 0.2rem 3.5rem;
	}
	&::before {
		content: "";
		position: absolute;
		width: 18px;
		height: 18px;
		background-color: var(--color--main);
		mask: url(../../assets_renew/img/campaign/fukidashi.svg) no-repeat center/contain;
		top: 5px;
		left: 0;
		@media (width <= 768px) {
			background-color: #fff;
			width: 1.8rem;
			height: 1.6rem;
			top: 0.8rem;
			left: 1rem;
		}
	}
}

.voice__ttl {
	grid-column: 2;
	grid-row: 2;
	font-size: 2.4rem;
	font-weight: bold;
	color: var(--color--main);
	@media (width <= 768px) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		grid-row: 1;
		font-size: 2rem;
		line-height: 1.3;
	}
}

.voice__body {
	grid-column: 2;
	grid-row: 3;
	@media (width <= 768px) {
		grid-row: 2;
		grid-column: 1/3;
		padding-top: 0.5rem;
	}
	p {
		font-size: 1.6rem;
		line-height: 1.6;
		font-weight: 500;
		@media (width <= 768px) {
			font-size: 1.4rem;
		}
	}
}

.case {
	.bg_heading {
		background-image:
			url(../img/campaign/bg_case.png),
			linear-gradient(90deg, rgba(2, 157, 117, 1) 48%, rgba(22, 197, 148, 1) 48%);
		background-repeat: no-repeat;
		background-position: center;
		background-size:
			auto 160px,
			auto auto;
		@media (width <= 768px) {
			background-image: url(../img/campaign/bg_case_sp.png);
			background-size: cover;
		}
	}
	.section__ttl {
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: center;
		@media (width <= 768px) {
			display: block;
			line-height: 1.4;
		}
		.size-small {
			font-size: 66.6%;
			@media (width <= 768px) {
				font-size: 3rem;
			}
		}
		.sp-small {
			@media (width <= 768px) {
				font-size: 2.4rem;
			}
		}
		i {
			display: inline-block;
			width: 113px;
			margin-right: 16px;
			@media (width <= 768px) {
				position: absolute;
				top: auto;
				bottom: -2rem;
				right: 0;
				width: 8.7rem;
				margin-right: 0.5rem;
			}
		}
	}
}

.case__container {
	background-color: #f3fffd;
	padding-top: 48px;
	padding-bottom: 40px;
	position: relative;
	overflow-x: clip;
	@media (width <= 768px) {
		padding-inline: 1.6rem;
		padding-bottom: 2.8rem;
		&::before {
			content: "";
			position: absolute;
			background: url(../../assets_renew/img/campaign/deco_case.png) no-repeat center/cover;
			top: -11rem;
			left: -8rem;
			width: 29rem;
			height: 20rem;
		}
	}

	&::after {
		content: "";
		position: absolute;
		width: 280px;
		height: 200px;
		bottom: -39px;
		right: -22px;
		background: url(../img/campaign/deco_case.png) no-repeat center/cover;
		@media (width <= 768px) {
			width: 28rem;
			height: 20rem;
			bottom: -0.6rem;
			right: -12.8rem;
		}
	}
}

.case__list {
	list-style: none;
	padding: 0;
	max-width: 960px;
	margin: 0 auto;
	column-gap: 24px;
	display: flex;
	position: relative;
	z-index: 10;
	@media (width <= 768px) {
		display: block;
	}
}

.case__item {
	background-color: #fff;
	width: calc((100% - 24px * 2) / 3);
	padding: 24px 16px;
	position: relative;
	border-radius: 1rem;
	box-shadow: 3px 3px 1px -1px #bababa;
	@media (width <= 768px) {
		width: auto;
		padding: 1.6rem;
	}
	i {
		position: absolute;
		display: inline-block;
		width: 53px;
		left: 0;
		top: -13px;
		@media (width <= 768px) {
			width: 5.3rem;
			top: -1.3rem;
		}
	}
	dl {
		display: flex;
		margin-top: 16px;
		@media (width <= 768px) {
			margin-top: 1.6rem;
		}
	}
	dt {
		background-color: var(--color--main);
		font-size: 1.4rem;
		font-weight: bold;
		color: #fff;
		padding: 2px 8px;
		margin-right: 13px;
		@media (width <= 768px) {
			padding: 0.2rem 0.8rem;
			margin-right: 1.3rem;
		}
	}
	dd {
		font-size: 1.6rem;
		font-weight: bold;
	}
	picture {
		display: block;
		@media (width <= 768px) {
			margin-top: 1.6rem;
		}
	}
	@media (width <= 768px) {
		+ .case__item {
			margin-top: 2.4rem;
		}
	}
}

.case__txt {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-left: 40px;
	min-height: 5em;
	@media (width <= 768px) {
		min-height: inherit;
		margin-left: 4rem;
	}
}

.flow {
	padding-bottom: 80px;
	@media (width <= 768px) {
		padding-bottom: 3.2rem;
	}
	.bg_heading {
		background-image:
			url(../img/campaign/bg_flow.png),
			linear-gradient(90deg, rgba(2, 157, 117, 1) 48%, rgba(22, 197, 148, 1) 48%);
		background-repeat: no-repeat;
		background-position: center;
		background-size:
			auto 160px,
			auto auto;
		@media (width <= 768px) {
			background-image: url(../img/campaign/bg_flow_sp.png);
			background-size: cover;
		}
	}
	.section__ttl {
		justify-content: center;
		align-items: center;
		justify-content: center;
		@media (width <= 768px) {
			display: block;
			text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
			line-height: 1.4;
		}
		.size-small {
			font-size: 83%;
		}
		.fz-22 {
			font-size: 2.2rem;
		}
		i {
			display: inline-block;
			width: 150px;
			margin-right: 16px;
			@media (width <= 768px) {
				position: relative;
				top: -0.2rem;
				width: 12rem;
				margin-right: 0.5rem;
			}
		}
	}
}

.flow__container {
	padding-top: 40px;
	@media (width <= 768px) {
		margin-inline: 1.6rem;
		padding-top: 1.6rem;
	}
	.heading__txt {
		text-align: center;
		font-size: 1.8rem;
		@media (width <= 768px) {
			font-size: 1.6rem;
			line-height: 1.3;
		}
	}
	.bottom__txt {
		text-align: center;
		font-size: 2.4rem;
		font-weight: bold;
		color: var(--color--main);
		margin-top: 2.4rem;
		@media (width <= 768px) {
			font-size: 1.8rem;
			line-height: 1.3;
			margin-top: 1.6rem;
		}
	}
}

.flow__list {
	list-style: none;
	max-width: 715px;
	margin: 0 auto;
	padding: 0;
	@media (width <= 768px) {
		box-shadow: 4px 4px 1px -1px #dedede;
		border-radius: 1rem;
		margin-top: 1.6rem;
	}
	li {
		display: flex;
		padding-block: 30px 20px;
		border-top: 1px dashed var(--color--main);
		position: relative;
		&:first-of-type {
			border-top: none;
		}
		@media (width <= 768px) {
			padding: 1.6rem;
			border-width: 2px;
		}
	}
	.tokuten {
		position: absolute;
		left: 0;
		top: -1px;
		border-radius: 0 0 100rem 0;
		background-color: var(--color--main);
		color: var(--color--yellow);
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
		padding: 1px 20px 1px 20px;
		width: 155px;
		letter-spacing: 0.05em;
		@media (width <= 768px) {
			left: auto;
			top: 0;
			right: 0;
			border-radius: 0 0 0 100rem;
			width: 15.5rem;
			padding: 0.1rem 2rem 0.1rem 2rem;
		}
	}
	.num {
		font-size: 4rem;
		font-weight: bold;
		color: var(--color--main);
		flex-shrink: 0;
		width: 2em;
		@media (width <= 768px) {
			position: absolute;
			top: -0.2rem;
			left: 1rem;
		}
	}
	.txt-main {
		font-size: 3.2rem;
		font-weight: bold;
		line-height: 1.4;
		@media (width <= 768px) {
			font-size: 2.2rem;
			text-align: center;
		}
	}
	.txt-sub {
		font-size: 1.8rem;
		font-weight: 400;
		font-weight: 500;
		@media (width <= 768px) {
			font-size: 1.6rem;
			line-height: 1.2;
			margin-top: 0.4rem;
		}
	}
}
.flow__item-inner {
	flex-grow: 1;
	display: flex;
	@media (width <= 768px) {
		flex-direction: column-reverse;
	}
	i {
		display: inline-block;
		width: 112px;
		margin-left: auto;
		@media (width <= 768px) {
			width: 16.8rem;
			margin: 0 auto 0.5rem;
		}
	}
}

.campaign-detail {
	background-color: #efefef;
	padding-block: 80px;
	@media (width <= 768px) {
		padding: 3.2rem 1.6rem;
	}
}

.campaign-detail__container {
	display: grid;
	grid-template-columns: 50% 50%;
	max-width: 960px;
	margin-inline: auto;
	gap: 60px;
	@media (width <= 768px) {
		display: block;
	}
}

.campaign-detail__content {
	ul {
		list-style: none;
		padding-inline: 0;
		margin: 0;
	}
	ul,
	li,
	p {
		font-size: 1.4rem;
		line-height: 1.6;
		@media (width <= 768px) {
			font-size: 1.3rem;
		}
	}
	&.content01 {
		grid-row: 1;
		grid-column: 1;
	}
	&.content02 {
		grid-row: 1;
		grid-column: 2;
	}
	&.content03 {
		grid-row: 2;
		grid-column: 1/3;
	}
	@media (width <= 768px) {
		+ .campaign-detail__content {
			margin-top: 1.6rem;
		}
	}
}

.campaign-detail__body {
	padding-top: 16px;
	@media (width <= 768px) {
		padding-top: 1.3rem;
	}
}

.campaign-detail__ttl {
	padding-bottom: 0.8em;
	font-size: 1.8rem;
	line-height: 1.3;
	font-weight: bold;
	border-bottom: 1px solid rgba(51, 51, 51, 0.8);
}

.company {
	color: #333;
}

.anchor {
	position: absolute;
	width: auto;
	height: 1px;
	top: 10rem;
	@media (width <= 768px) {
		top: 0;
	}
}
.company-info {
	position: relative;
	padding-top: 160px;
	@media (width <= 768px) {
		padding-top: 4rem;
		padding-inline: 1.6rem;
	}
}

.company-info__ttl {
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-bottom: 10px;
	&::after {
		position: absolute;
		content: "";
		width: 80px;
		height: 6px;
		background: #019c74;
		background: linear-gradient(90deg, rgba(1, 156, 116, 1) 0%, rgba(254, 213, 2, 1) 100%);
		left: 0;
		right: 0;
		margin-inline: auto;
		top: 100%;
	}
	@media (width <= 768px) {
		font-size: 2.4rem;
		&::after {
			height: 3px;
			width: 40px;
		}
	}
}

.company-info__list {
	max-width: 960px;
	margin: 40px auto 0;
	> div {
		display: flex;
		padding-block: 16px;
		border-bottom: 1px solid #d9d9d9;
		align-items: center;
		&:last-of-type {
			border-bottom: none;
		}
		@media (width <= 768px) {
			padding-block: 1.2rem;
		}
		&.flex-start {
			align-items: flex-start;
			@media (width <= 768px) {
				align-items: center;
			}
		}
	}
	dt {
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.5;
		padding-inline: 24px;
		width: 118px;
		flex-shrink: 0;
		@media (width <= 768px) {
			font-size: 1.4rem;
			padding-inline: 1.6rem;
			width: 6em;
		}
	}
	dd {
		font-size: 1.6rem;
		line-height: 1.4;
		@media (width <= 768px) {
			font-size: 1.4rem;
			padding-right: 1rem;
		}
	}
}

.brn_campaign {
	width: calc(100% - 2rem);
	margin: 2rem auto;
	p {
		background-color: #009c74;
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
		border-radius: 0.5rem 0.5rem 0 0;
	}
}

.header_navi {
	max-height: calc(100vh - 60px);
}

.campaign-appli {
	position: relative;
	.anchor {
		top: 9rem;
		@media (width <= 768px) {
			top: 8rem;
		}
	}
	.bg_heading {
		background-image:
			url(../img/campaign/bg_appli.jpg),
			linear-gradient(90deg, rgba(2, 157, 117, 1) 48%, rgba(22, 197, 148, 1) 48%);
		background-repeat: no-repeat;
		background-position: center;
		background-size:
			auto 160px,
			auto auto;
		padding-block: 26px;
		@media (width <= 768px) {
			background-image: url(../img/campaign/bg_appli_sp.jpg);
			background-size: cover;
			padding-block: 1.4rem;
		}
	}
	.section__ttl {
		@media (width <= 768px) {
			line-height: 1.2;
			.frame {
				-webkit-text-stroke: 6px #31af8e;
				text-stroke: 6px #31af8e;
				paint-order: stroke;
			}
		}
		.balloon {
			display: block;
			font-size: 2.4rem;
			color: var(--color--main);
			width: fit-content;
			margin-inline: auto;
			background-color: #fff;
			border-radius: 1000px;
			padding: 5px 10px;
			position: relative;
			@media (width <= 768px) {
				font-size: 1.4rem;
				filter: none;
				margin-bottom: 0.5rem;
			}
			&::after {
				position: absolute;
				content: "";
				top: calc(100% - 1px);
				width: 10px;
				height: 8px;
				background-color: #fff;
				left: 0;
				right: 0;
				margin-inline: auto;
				clip-path: polygon(0 0, 50% 100%, 100% 0);
				@media (width <= 768px) {
					left: auto;
					right: 2rem;
				}
			}
		}
	}
	.heading__txt {
		text-align: center;
		font-size: 1.8rem;
		line-height: 1.3;
		margin-top: 40px;
		font-weight: 500;
		@media (width <= 768px) {
			font-size: 1.4rem;
			margin-inline: 1.6rem;
			text-align: left;
			margin-top: 1.6rem;
		}
	}
}

.fixbanner {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.3s,
		visibility 0.3s;
	&.is-show {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}
}

.pcfix-banner {
	position: fixed;
	top: 50%;
	right: 0;
	border: 1px solid var(--color--main);
	background-color: #fff;
	z-index: 100;
	padding: 30px 6px;
	max-width: 240px;
	transform: translateY(-50%);
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.4));
	@media (width <= 768px) {
		display: none !important;
	}
	small {
		margin-top: 16px;
		display: block;
		font-size: 1rem;
		text-align: center;
		color: #808080;
	}
	.main-copy {
		font-weight: bold;
		text-align: center;
		line-height: 1.2;
	}
	.txt-main {
		color: var(--color--main);
		font-size: 1.8rem;
	}
	.txt-sub {
		font-size: 1.4rem;
	}
	.brn-link {
		display: block;
	}
	.link01 {
		margin-top: 3px;
	}
	.link02 {
		margin-top: 5px;
	}
	.link03 {
		margin-inline: 5px;
		margin-top: 10px;
		p {
			font-size: 1.6rem;
			text-align: center;
			background-color: var(--color--main);
			border-radius: 5px 5px 0 0;
			color: #fff;
			text-align: center;
		}
	}
}

.spfix-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	padding: 0.6rem 1.2rem;
	background-color: rgba(135, 134, 134, 0.64);
	column-gap: 0.8rem;
	@media (768px < width) {
		display: none !important;
	}
}

#page_form {
	max-width: 110.4rem;
	margin-inline: auto !important;
	@media (width <= 768px) {
		padding: 2rem !important;
		margin-top: 2rem !important;
	}
}