@media screen and (max-width: 389px) {
	.top-background {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 30px;
		align-items: center;
	}

	.top-container {
		width: 100%;
		height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		position: relative;
	}

	.top-contents-background-sp {
		width: 140%;
		height: auto;
		margin-top: 150px;
		padding-bottom: 25%;
	}

	.top-images {
		position: relative;
		width: 100%;
		height: 80%;
		overflow: hidden;
	}

	.top-gradation-blue {
		size: 100%;
		position: absolute;
		top: 10px;
		right: 0;
	}

	.gradation-blue {
		size: 100%;
		position: absolute;
		top: 100%;
		right: 0;
	}

	.top-gradation-pink {
		size: 100%;
		position: absolute;
		top: 20px;
		left: 0;
	}

	.photo-and-logo-wrapper {
		position: absolute;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
		top: 20px;
		min-width: auto;
	}

	.photo-and-logo {
		width: 100%;
		height: fit-content;
		display: flex;
		flex-direction: column;
	}

	.top-contents-woman {
		width: 100%;
		min-width: 320px;
	}

	.logo-ms-engineer02-sp {
		width: 80%;
		margin-top: -23%;
		margin-left: 10%;
	}

	.left-contents {
		display: contents;
	}

	.title_01 {
		background: linear-gradient(to right,
				/* 角度を指定。例: 左から右へのグラデーション */
				rgba(100, 21, 185, 0.8) 0%,
				rgba(70, 75, 180, 0.8) 100%),
			linear-gradient(to top,
				/* 半透明レイヤーを重ねる */
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 1) 100%);
		color: #FFFFFF;
		width: 97%;
		height: 6%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		letter-spacing: 0.02rem;
		padding: 2% 0px 2% 3px;
		position: absolute;
		top: 0px;
		left: 1.2%;
	}

	.title_01 p {
		font-size: 14px;
		font-weight: 500;
	}

	.title_01 span {
		font-size: 20px;
	}

	.engineer {
		font-size: 23px;
		font-weight: 700;
	}

	.logo-ms-engineer02-pc {
		display: none;
	}

	.benefits-wrapper {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	@media screen and (min-width: 500px) and (max-width: 559px) {
		.benefits-wrapper {
			margin-top: 5%;
		}
	}

	@media screen and (min-width: 620px) and (max-width: 755px) {
		.benefits-wrapper {
			margin-top: 6%;
		}
	}

	.benefits {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;
	}

	.benefits-container {
		width: fit-content;
		height: 76px;
		background: linear-gradient(to right,
				/* 角度を指定。例: 左から右へのグラデーション */
				rgba(100, 21, 185, 0.8) 0%,
				rgba(70, 75, 180, 0.85) 100%),
			linear-gradient(to top,
				/* 半透明レイヤーを重ねる */
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 1) 100%);
		padding: 5px 20px 5px 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		transform: skewX(-20deg);
		overflow: hidden;
	}

	.benefits-container>* {
		transform: skewX(20deg);
		/* 内部の要素を元の角度に戻す */
	}

	.benefits-container-mini {
		display: flex;
		flex-direction: column;
		padding-top: 20px;
		align-items: center;
		gap: 0;
	}

	.benefits-p1 {
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 1.2px;
		font-family: 'Hiragino Kaku Gothic ProN';
		color: rgba(97, 33, 161, 1);
	}

	.benefits-p2 {
		font-size: 15px;
		font-weight: 700;
		text-align: right;
		margin-right: 7px;
		color: #FFFFFF;
	}

	.benefits-p3 {
		font-size: 61px;
		font-weight: 700;
		margin: 0;
		color: #FFFFFF;
	}

	.benefits-p4 {
		font-size: 20px;
		font-weight: 600;
		margin: 0;
		color: #FFFFFF;
	}

	.benefits-p5 {
		font-size: 12px;
		font-weight: 600;
		margin-top: -5px;
		color: #FFFFFF;
	}

	.benefits-notify {
		width: 320px;
		height: max-content;
		padding: 8px 8px;
		background-color: #FFFFFF;
		border: rgba(97, 33, 161, 1) 1px solid;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		font-size: 10px;
	}

	.benefits-notify-block {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.notify-hidden {
		display: none;
	}

	.benefits-notify img {
		width: 23px;
		height: 23px;
		margin-left: 5px;
		cursor: pointer;
	}

	#close-button {
		cursor: pointer;
		transform: rotate(180deg);
		margin-left: 180px;
	}

	.benefits-notify-detail {
		display: flex;
		flex-direction: column;
		gap: 5px;
		text-align: left;
		font-size: 12px;
		font-weight: 700;
		color: rgba(102, 102, 102, 1);
	}

	.benefits-notify-detail p {
		font-size: 10px;
		font-weight: 300;
		color: rgba(102, 102, 102, 1);
	}

	.top-message-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		align-items: center;
		gap: 3px;
		width: max-content;
		height: fit-content;
	}

	.top-message-p1 {
		color: rgba(97, 33, 161, 1);
		font-size: 22px;
		font-weight: 600;
		margin: 0;
	}

	.top-message-p1 span {
		background: linear-gradient(to top, rgba(255, 217, 143, 0.7) 50%, transparent 30%);
		display: inline;
		/* 背景を文字サイズにフィットさせる */
	}

	.top-message-p2 {
		font-size: 18px;
		font-weight: 700;
		margin: 0;
	}

	.logo-ms-engineer-l {
		width: 150px;
		margin-top: 8px;
	}

	.top-message {
		width: 383px;
		height: 110px;
	}

	.data-container {
		width: 360px;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.salary-data {
		background-color: rgba(242, 229, 255, 1);
		color: rgba(97, 33, 161, 1);
		border: rgba(97, 33, 161, 1) solid 3px;
		border-radius: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		justify-content: center;
		gap: 15px;
		margin-top: 20px;
		width: 310px;
		height: 60px;
	}

	:root {
		--base-font-size: 14px;
		--large-font-size: 18px;
		--xlarge-font-size: 22px;
	}

	.data-container {
		width: 100%;
		max-width: 390px;
		height: 150px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.salary-data {
		background-color: rgba(242, 229, 255, 1);
		color: rgba(97, 33, 161, 1);
		border: rgba(97, 33, 161, 1) solid 3px;
		border-radius: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 15px;
		margin-top: 20px;
		width: 310px;
		height: 60px;
	}

	.salary-data-container {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.salary-data-p1 {
		font-size: var(--base-font-size);
		font-weight: 600;
		margin: 0;
	}

	.salary-data-p2 {
		font-size: calc(var(--base-font-size) * 3);
		font-weight: 700;
		margin: 0;
	}

	.salary-data-p3 {
		font-size: calc(var(--base-font-size) * 1.6);
		font-weight: 600;
		margin: 0;
	}

	.job-change-wrapper {
		display: flex;
		gap: 30px;
		margin-left: 20px;
	}

	.job-change {
		width: 120px;
		height: auto;
		color: rgba(97, 33, 161, 1);
		border: rgba(161, 33, 156, 1) 1px solid;
		border-radius: 10px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 0px 10px 3px 10px;
		margin-top: 20px;
	}

	.job-change-container {
		display: flex;
		align-items: flex-end;
		gap: 5px;
	}

	.job-change-span-p1 {
		font-size: 14px;
		font-weight: 600;
		font-family: 'Hiragino Kaku Gothic ProN';
		margin: 0 0 7px 0;
	}

	.job-change-p1,
	.job-change-p6 {
		font-size: 14px;
		font-weight: 600;
		font-family: 'Hiragino Kaku Gothic ProN';
		margin: 0;
	}

	.job-change-p2 {
		font-size: 42px;
		font-weight: 700;
		font-family: 'SF Pro Display';
		margin: 0px 0px -10px 0px;
	}

	.job-change-p3 {
		font-size: 17px;
		font-weight: 400;
		margin: 0;
	}

	.job-change-p4 {
		font-size: 9px;
		font-weight: 500;
		color: rgba(113, 113, 113, 1);
		margin: 0;
	}

	.job-change-p5 {
		font-size: 20px;
		font-weight: 700;
		font-family: 'SF Pro Display';
		margin: 0 0 0 -2px;
	}

	.icon-job-change-success-data,
	.icon-job-change-span,
	.icon-pc {
		position: absolute;
		top: 45%;
		transform: translateY(-50%);
	}

	.icon-job-change-success-data,
	.icon-job-change-span {
		width: 41.3px;
		height: 42px;
	}

	.icon-job-change-success-data {
		left: -30px;
	}

	.icon-job-change-span {
		left: -25px;
	}

	.icon-pc {
		width: 26px;
		height: 18px;
		left: -18px;
	}

	@media screen and (min-width: 560px) {
		.top-contents-background-sp {
			margin-bottom: 5%;
		}

		.title_01 {
			letter-spacing: 1.2px;
		}

		.title_01 p {
			font-size: 22px;
		}

		.title_01 span {
			font-size: 29px;
		}

		.engineer {
			font-size: 25px;
		}

		.benefits-p1 {
			font-size: 28px;
		}

		.benefits-p2 {
			font-size: 23px;
		}

		.benefits-p3 {
			font-size: 70px;
		}

		.benefits-p4 {
			font-size: 28px;
		}

		.benefits-p5 {
			font-size: 20px;
		}

		.benefits-notify {
			width: 500px;
			font-size: 14px;
		}

		#notify-trigger img {
			margin-left: 10px;
		}

		.benefits-notify-detail {
			font-size: 14px
		}

		.benefits-notify-detail p {
			font-size: 12px;
		}

		#close-button {
			margin-left: 290px;
		}

		.top-message-p1 {
			font-size: 28px;
		}

		.top-message-p2 {
			font-size: 23px;
		}

		.logo-ms-engineer-l {
			width: 200px;
		}

		:root {
			--base-font-size: 16px;
		}

		.salary-data {
			width: 340px;
			height: 70px;
		}

		.salary-data-p2 {
			font-size: calc(var(--base-font-size) * 3);
		}

		.salary-data-p3 {
			font-size: calc(var(--base-font-size) * 1.8);
		}

		.job-change-wrapper {
			gap: 30px;
		}

		.job-change {
			width: 150px;
			height: 90px;
		}

		.job-change-p1,
		.job-change-span-p1,
		.job-change-p6 {
			font-size: 16px;
		}

		.job-change-p2 {
			font-size: 48px;
		}

		.job-change-p3 {
			font-size: 20px;
		}

		.job-change-p4 {
			font-size: 10px;
		}

		.job-change-p5 {
			font-size: 24px;
		}

		.icon-job-change-success-data,
		.icon-job-change-span {
			width: 50px;
			height: 50px;
			top: 40px;
			left: -35px;
		}

		.icon-pc {
			width: 30px;
			height: 20px;
			left: -25px;
		}
	}

	@media screen and (min-width: 756px) {
		.top-contents-background-sp {
			margin-bottom: 17%;
		}

		.title_01 {
			letter-spacing: 1.2px;
		}

		.title_01 p {
			font-size: 25px;
		}

		.title_01 span {
			font-size: 35px;
		}

		.engineer {
			font-size: 30px;
		}

		.benefits-p1 {
			font-size: 32px;
		}

		.benefits-p2 {
			font-size: 27px;
		}

		.benefits-p3 {
			font-size: 74px;
		}

		.benefits-p4 {
			font-size: 32px;
		}

		.benefits-p5 {
			font-size: 24px;
		}

		.benefits-notify {
			width: 600px;
			font-size: 17px;
		}

		.benefits-notify-detail {
			font-size: 16px
		}

		.benefits-notify-detail p {
			font-size: 14px;
		}

		#close-button {
			margin-left: 360px;
		}

		.top-message-p1 {
			font-size: 32px;
		}

		.top-message-p2 {
			font-size: 27px;
		}

		.logo-ms-engineer-l {
			width: 240px;
		}

		:root {
			--base-font-size: 18px;
		}

		.salary-data {
			width: 380px;
			height: 80px;
		}

		.salary-data-p2 {
			font-size: calc(var(--base-font-size) * 3.2);
		}

		.salary-data-p3 {
			font-size: calc(var(--base-font-size) * 2);
		}

		.job-change {
			width: 180px;
			height: 110px;
		}

		.job-change-p1,
		.job-change-span-p1,
		.job-change-p6 {
			font-size: 18px;
		}

		.job-change-p2 {
			font-size: 56px;
		}

		.job-change-p3 {
			font-size: 24px;
		}

		.job-change-p5 {
			font-size: 28px;
		}

		.icon-job-change-success-data,
		.icon-job-change-span {
			width: 60px;
			height: 60px;
		}

		.icon-pc {
			width: 36px;
			height: 24px;
			top: 36%;
			left: -22px;
		}
	}
}