@charset "UTF-8";

/* =================================
    共有
================================= */

:root {
	--noise-pattern-step: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='none'%3E%3Cg filter='url(%23filter0_n_3491_8620)'%3E%3Crect width='100' height='100' fill='%23CDCDCD' fill-opacity='0.2'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_n_3491_8620' x='0' y='0' width='100' height='100' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' stitchTiles='stitch' numOctaves='3' result='noise' seed='1188'/%3E%3CfeColorMatrix in='noise' type='luminanceToAlpha' result='alphaNoise'/%3E%3CfeComponentTransfer in='alphaNoise' result='coloredNoise1'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in2='shape' in='coloredNoise1' result='noise1Clipped'/%3E%3CfeComponentTransfer in='alphaNoise' result='coloredNoise2'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in2='shape' in='coloredNoise2' result='noise2Clipped'/%3E%3CfeFlood flood-color='rgba(0, 2, 10, 0.8)' result='color1Flood'/%3E%3CfeComposite operator='in' in2='noise1Clipped' in='color1Flood' result='color1'/%3E%3CfeFlood flood-color='rgba(255, 255, 255, 0.1)' result='color2Flood'/%3E%3CfeComposite operator='in' in2='noise2Clipped' in='color2Flood' result='color2'/%3E%3CfeMerge result='effect1_noise_3491_8620'%3E%3CfeMergeNode in='shape'/%3E%3CfeMergeNode in='color1'/%3E%3CfeMergeNode in='color2'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

.lower-title {
	display: none;

	&.products-page {
		display: block;

		h1 {
			display: flex;
			flex-flow: column;
			gap: 12px;

			span {
				background: #fff;
				border-radius: 40px;
				color: #0661B5;
				font-size: 23px;
				letter-spacing: .11em;
				line-height: 1.39;
				padding: 4px 22px;
			}
		}
	}
}

@media screen and (max-width: 500px) {
	.lower-title.products-page h1 {
		top: 85px;
	}
}

main {
	margin-top: 140px;

	p {
		font-weight: 500;
		font-size: 16px;
		line-height: 1.875;
	}
}

.title {
	display: flex;
	align-items: center;
	flex-flow: column;
	text-align: center;
	margin: 0 auto;
	max-width: 777px;
	width: 100%;

	h2 {
		color: #0661B5;
		font-size: 38px;
		letter-spacing: .11em;
		line-height: 1.15;
	}

	p {
		border-top: 1px solid #0661B5;
		color: #0661B5;
		font-weight: 500;
		font-size: 16px;
		letter-spacing: .03em;
		line-height: 1.875;
		padding: 22px 0 0;
		margin-top: 28px;
	}
}

/* =================================
    3ステップでわかる
================================= */
.step {
	padding-bottom: 97px;

	.col {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 97px;
	}

	.step-box {
		position: relative;

		&::before {
			content: "";
			background: url(../images/mold/speech-bubble.svg) no-repeat;
			background-size: contain;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 715px;
			height: 501px;
			z-index: -1;
		}

		img:nth-child(1) {
			position: absolute;
			top: -194px;
			right: -143px;
			width: 240px;
			height: 220px;
		}

		img:nth-child(2) {
			position: absolute;
			bottom: -114px;
			left: -125px;
			width: 263px;
			height: 155px;
			transform: rotate(17deg);
		}
	}

	h2 {
		color: #FD6D57;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 3px;
		font-size: 38px;
		line-height: 1.15;

		span {
			background: #EF5A39;
			border-radius: 50%;
			color: #fff;
			display: block;
			font-size: 68px;
			text-align: center;
			line-height: 80px;
			width: 88px;
			height: 88px;
		}
	}

	.adjust-br {
		display: none;
	}

	b {
		background: #fff;
		border-radius: 40px;
		display: block;
		font-size: 38px;
		letter-spacing: .11em;
		line-height: 1.31;
		text-align: center;
		padding: 8px 27px;
		margin: 16px auto;
		width: 360px;
	}

	p {
		text-align: center;
		margin: 0 auto;
		width: 467px;
	}
}

/* =================================
    ステップ 1
================================= */
.step-1 {
	background: linear-gradient(90deg, rgba(112, 224, 255, 0.60) 0%, rgba(146, 232, 255, 0.60) 73%, rgba(255, 255, 255, 0.60) 100%);
	padding: 300px 0 400px;
	position: relative;
	z-index: 1;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: -1px;
		width: 100%;
		height: 328px;
		background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 1));
		pointer-events: none;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--noise-pattern-light);
		background-repeat: repeat;
		background-size: 100px 100px;
		z-index: -1;
	}

	.title {
		background: #fff;
		border-radius: 63px;
		padding: 52px 50px 40px;
		position: relative;
		width: 90%;
		max-width: 880px;

		&::before {
			content: "";
			background: url(../images/mold/step_1.svg) no-repeat;
			background-size: contain;
			position: absolute;
			top: -90px;
			left: 50%;
			transform: translateX(-50%);
			width: 100px;
			height: 90px;
		}

		p {
			padding: 22px 68px 0;
			max-width: 777px;
		}
	}

	.adjust-br {
		display: none;
	}

	.point-item {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);

		img {
			width: 184px;
			height: 300px;
		}
	}

	.point-balloon {
		position: absolute;
		bottom: 114px;
		right: -400px;
		visibility: hidden;

		p {
			color: #0661B5;
			font-weight: bold;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;
			position: relative;
			margin: 0;
			padding: 60px 35px;
			white-space: nowrap;
			background: #fff;
			border-radius: 100%;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 13px;
				transform: rotate(45deg);
				border-left: 28px solid transparent;
				border-right: 28px solid transparent;
				border-top: 52px solid #fff;
				z-index: -1;
			}
		}
	}

	.image-box {
		margin: 57px auto 0;
		max-width: 1331px;
	}

	.col {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 33px;
		margin: 80px auto 0;
		width: 90%;
		max-width: 882px;

		div {
			background: rgba(255, 255, 255, 0.5);
			border: 2px dashed #17A0E0;
			border-radius: 60px;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 424px;
			height: 424px;

			img {
				margin: 0 auto;
			}

			&:nth-child(1) {
				padding: 0 63px;

				img {
					width: 243px;
					height: 179px;
				}
			}

			&:nth-child(2) {
				padding: 0 40px;

				img {
					width: 243px;
					height: 162px;
					margin-top: 15px;
				}
			}

			&:nth-child(3) {
				padding: 0 63px;

				img {
					width: 243px;
					height: 132px;
				}
			}

			&:nth-child(4) {
				padding: 25px 63px 0;
				justify-content: flex-start;

				h3 {
					margin-top: 13px;
				}

				img {
					width: 250px;
					height: 193px;
				}
			}
		}

		h3 {
			color: #0661B5;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;
			margin-top: 22px;
		}

		p {
			color: #0661B5;
			margin-top: 26px;
		}
	}
}

/* =================================
    ステップ 2
================================= */
.step-2 {
	padding: 170px 0 206px;
	margin: 0 auto;
	width: 90%;
	max-width: 1185px;

	.title {
		position: relative;

		&::before {
			content: "";
			background: url(../images/mold/step_2.svg) no-repeat;
			background-size: contain;
			width: 100px;
			height: 90px;
			margin-bottom: 70px;
		}

		span {
			background: #FFD5CC;
		}
	}

	.role-box {
		background: rgba(146, 232, 255, 0.3);
		border-radius: 50px;
		padding: 66px 40px 66px 0;
		position: relative;
		margin: 105px auto 0;
		z-index: 1;

		.col {
			display: flex;
			align-items: center;
			gap: 17px;
			margin-left: 25px;

			p {
				color: #0661B5;
				font-size: 20px;
			}

			img {
				width: 100%;
				min-width: 0;
			}
		}

		.role-balloon {
			position: absolute;
			top: -68px;
			right: -30px;
			visibility: hidden;

			p {
				background: #EF5A39;
				border-radius: 100%;
				color: #fff;
				font-weight: 500;
				font-size: 23px;
				letter-spacing: .11em;
				line-height: 1.39;
				position: relative;
				padding: 60px 25px;
				white-space: nowrap;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: 13px;
					transform: rotate(45deg);
					border-left: 28px solid transparent;
					border-right: 28px solid transparent;
					border-top: 52px solid #EF5A39;
					z-index: -1;
				}
			}
		}
	}
}

/* =================================
    ステップ 3
================================= */
.step-3 {
	background: linear-gradient(90deg, #0661B5 0%, #1067B8 66.21%, #FFF 100%);
	padding: 110px 0 180px;
	position: relative;
	z-index: 1;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--noise-pattern-step);
		background-size: 200px 200px;
		background-repeat: repeat;
		z-index: -1;
	}

	.title {
		position: relative;

		h2 {
			color: #fff;
		}

		p {
			border-top: 1px solid #fff;
			color: #fff;
		}

		&::before {
			content: "";
			background: url(../images/mold/step_3.svg) no-repeat;
			background-size: contain;
			width: 100px;
			height: 90px;
			margin-bottom: 70px;
		}

		p {
			padding: 22px 19px 0;
			width: 100%;
		}
	}

	ol {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
		width: 90%;
		margin: 105px auto 0;
		max-width: 1184px;

		p {
			color: #fff;
			margin: 16px 0 20px;
			text-align: center;
		}

		span {
			background: #fff;
			border-radius: 5px;
			color: #0661B5;
			display: block;
			font-weight: 500;
			font-size: 16px;
			letter-spacing: .03em;
			line-height: 1.43;
			padding: 5px 15px;
			margin: 4px auto;
			width: max-content;
		}

		li:last-child .arrow-box::after {
			content: none;
		}

		.arrow-box {
			position: relative;

			&::after {
				content: "";
				background: url(../images/mold/step3-arrow.svg) no-repeat;
				background-size: contain;
				position: absolute;
				top: 58%;
				transform: translateY(-50%);
				right: -26px;
				width: 20px;
				height: 40px;
			}
		}
	}
}

/* =================================
    製品紹介
================================= */
.product {
	border: 2px solid #0661B5;
	border-radius: 20px;
	padding: 86px 40px;
	margin: 192px auto 0;
	width: 90%;
	max-width: 1184px;

	.title {
		p {
			padding: 22px 96px 0;
		}
	}

	ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 52px 32px;
		margin: 72px auto 0;
		width: 100%;
		max-width: 880px;

		h3 {
			color: #0661B5;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;
			text-align: center;
		}

		img {
			border-radius: 10px;
			margin-top: 27px;
		}

		p {
			margin-top: 18px;
		}
	}
}

/* =================================
    tab
================================= */
@media screen and (max-width: 1200px) {

	/* 共通 tab */
	main {
		margin-top: 60px;
	}

	/* 3ステップでわかる tab */
	.step {
		padding-bottom: 60px;

		.col {
			flex-flow: column-reverse;
			gap: 30px;
			position: relative;

			&::before {
				content: "";
				background: url(../images/mold/speech-bubble_tab.svg) no-repeat;
				background-size: contain;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 782px;
				height: 776px;
				z-index: -1;
			}

			>img {
				width: 315px;
				height: 347px;
			}
		}

		.step-box {
			&::before {
				content: none;
			}

			img:nth-child(1) {
				top: auto;
				bottom: -218px;
				right: -55px;
				width: 162px;
				height: 148px;
			}

			img:nth-child(2) {
				bottom: -255px;
				left: -90px;
				width: 180px;
				height: 106px;
			}

		}

		h2 {
			margin-top: 70px;
		}

		.adjust-br {
			display: block;
		}

		b {
			margin: 38px auto;
		}
	}

	/* step 1 tab */
	.step-1 {
		padding-top: 245px;
		padding-bottom: 463px;

		.adjust-br {
			display: block;
		}

		.title {
			padding: 42px 40px 47px;

			p {
				margin-top: 22px;
			}
		}

		.point-balloon {
			bottom: 262px;
			right: -255px;

			p {
				font-size: 23px;
				padding: 48px 28px;
			}
		}

		.col {
			gap: 23px 26px;
			max-width: 689px;

			h3 {
				font-size: 23px;
				line-height: 1.39;
				margin-top: 17px;
			}

			p {
				margin-top: 13px;
			}

			div {
				width: 100%;
				max-width: 331px;
				height: 331px;

				&:nth-child(1) {
					padding: 0 50px;

					img {
						width: 190px;
						height: 140px;
					}
				}

				&:nth-child(2) {
					padding: 0 26px;

					img {
						width: 190px;
						height: 126px;
					}
				}

				&:nth-child(3) {
					padding: 0 40px;

					img {
						width: 190px;
						height: 103px;
					}
				}

				&:nth-child(4) {
					justify-content: center;
					padding: 0 50px;

					h3 {
						margin-top: 17px;
					}

					img {
						width: 190px;
						height: 147px;
					}
				}
			}
		}
	}

	/* step 2 tab */
	.step-2 {
		padding: 135px 0 148px;

		.title {
			&::before {
				margin-bottom: 75px;
			}

			p {
				margin-top: 22px;
			}
		}

		.role-box {
			margin-top: 160px;

			.role-balloon {
				top: -96px;
				right: 0;
			}
		}
	}

	/* step 3 tab */
	.step-3 {
		.title {
			width: 90%;
		}
	}

	/* 製品紹介 tab */
	.product {
		margin-top: 112px;

		.title {
			p {
				padding: 22px 12px 0;
			}
		}

		ul {
			gap: 52px 16px;

			h3 {
				font-size: 23px;
			}

			p {
				line-height: 1.43;
				margin-top: 15px;
			}
		}
	}
}

/* =================================
    sp
================================= */
@media screen and (max-width: 767px) {

	/* 共通 sp */
	.title {
		h2 {
			font-size: 28px;
			line-height: 1.14;
		}
	}

	/* 3ステップでわかる sp */
	.step {

		h2 {
			margin-top: 0;
		}

		p {
			width: 90%;
		}

		.col {
			gap: 16px;

			&::before {
				width: 650px;
				height: 645px;
			}

			>img {
				width: 210px;
				height: 233px;
			}
		}

		.step-box {
			img:nth-child(1) {
				bottom: -113px;
				right: 10px;
				width: 107px;
				height: 95px;
			}

			img:nth-child(2) {
				bottom: -170px;
				left: 0;
				width: 98px;
				height: 57px;
			}
		}
	}

	/* step 1 sp */
	.step-1 {
		padding-top: 200px;
		padding-bottom: 352px;

		.title {
			padding: 52px 17px;

			p {
				padding: 22px 0 0;
			}
		}

		.col {
			gap: 8px;
			margin-top: 58px;

			h3 {
				font-size: 16px;
				line-height: 1.06;
				margin-top: 26px;
			}

			p {
				line-height: 1.43;
				margin-top: 27px;
			}

			div {
				border-radius: 20px;
				padding: 0 16px 20px !important;
				height: 303px;

				&:nth-child(1) {
					img {
						margin-top: 31px;
						width: 123px;
						height: 90px;
					}
				}

				&:nth-child(2) {

					h3 {
						margin-top: 11px;
					}

					img {
						margin-top: 38px;
						width: 124px;
						height: 83px;
					}
				}

				&:nth-child(3) {
					img {
						margin-top: 49px;
						width: 131px;
						height: 71px;
					}
				}

				&:nth-child(4) {
					img {
						margin-top: 26px;
						width: 123px;
						height: 95px;
					}
				}
			}
		}

		.point-item {
			display: flex;

			img {
				width: 124px;
				height: 201px;
			}

			.point-balloon {
				position: relative;
				bottom: auto;
				right: auto;

				p {
					line-height: 1.39;
					text-align: center;
					padding: 34px 28px;
					top: -56px;
				}
			}
		}
	}

	/* step 2 sp */
	.step-2 {
		padding: 92px 0 120px;

		.title {
			&::before {
				margin-bottom: 50px;
				width: 96px;
				height: 72px;
			}

			p {
				margin-top: 40px;
			}
		}

		.role-box {
			padding: 37px 30px 17px;
			margin-top: 46px;

			.col {
				align-items: flex-start;
				flex-flow: column-reverse;
				gap: 0;
				margin: 0 auto;
			}

			.role-balloon {
				top: -31px;
				right: -9px;

				p {
					font-size: 14px;
					line-height: 1.21;
					text-align: center;
					padding: 14px 22px;

					&::after {
						border-left: 22px solid transparent;
						border-right: 22px solid transparent;
						border-top: 34px solid #EF5A39;
						bottom: 0;
					}
				}
			}
		}
	}

	/* step 3 sp */
	.step-3 {
		background: linear-gradient(90deg, #0661B5 -69.08%, #1067B8 87.83%, #FFF 152.04%);
		padding: 64px 0 92px;

		.title {
			&::before {
				margin-bottom: 50px;
				width: 96px;
				height: 72px;
			}

			p {
				padding: 22px 0 0;
				margin-top: 40px;
			}
		}

		ol {
			grid-template-columns: repeat(1, 1fr);
			gap: 42px;
			margin-top: 48px;

			li {
				display: flex;
				align-items: center;
				gap: 10px;

				img {
					width: 167px;
				}
			}

			p {
				line-height: 1.43;
				text-align: left;
				margin: 0 0 19px;
			}

			span {
				margin: 4px 0;
				padding: 5px 17px;
			}

			.arrow-box {
				flex-shrink: 0;

				&::after {
					top: auto;
					bottom: -33px;
					left: 50%;
					transform: translateX(-50%) rotate(90deg);
					width: 12px;
					height: 23px;
				}
			}
		}
	}

	/* 製品紹介 sp */
	.product {
		padding: 44px 24px;

		.title {
			p {
				padding: 22px 0 0;
				margin-top: 22px;
			}
		}

		ul {
			gap: 20px;
			grid-template-columns: repeat(1, 1fr);
			margin-top: 50px;

			img {
				margin-top: 15px;
			}
		}
	}
}

@media screen and (max-width: 450px) {
	.step-1 .point-item {
		left: 5%;
		transform: none;
	}
}