@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 {
	.col {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.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: -105px;
			right: -80px;
			width: 166px;
			height: 114px;
		}

		img:nth-child(2) {
			position: absolute;
			bottom: -45px;
			left: -40px;
			width: 91px;
			height: 108px;
		}
	}

	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 0;
	}

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

/* =================================
    ステップ 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: -86px;
			left: 50%;
			transform: translateX(-50%);
			width: 100px;
			height: 90px;
		}

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

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

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

	.point-balloon {
		position: absolute;
		bottom: 174px;
		right: -240px;
		visibility: hidden;

		p {
			color: #0661B5;
			font-weight: bold;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;
			position: relative;
			margin: 0;
			padding: 60px 29px;
			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;
			}
		}
	}
}

/* 紹介 */
.introduction {
	margin-top: 150px;

	h3 {
		color: #0661B5;
		font-size: 28px;
		letter-spacing: .06em;
		line-height: 1.14;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			left: -29px;
			top: -8px;
			background: #FF9B98;
			border-radius: 50%;
			display: block;
			transform: rotate(-30deg);
			width: 71px;
			height: 50px;
			z-index: -1;
		}
	}

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

	.balloon {
		position: absolute !important;

		p {
			background: #fff;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 15px;
			letter-spacing: .11em;
			line-height: 1.33;
			text-align: center;
			position: relative;
			margin: 0;
			width: 110px;
			height: 72px;

			&::before {
				content: "";
				position: absolute;
				width: 23px;
				height: 19px;
				background: #fff;
				clip-path: polygon(50% 0,
						100% 100%,
						0 100%);
				z-index: -1;
			}
		}
	}

	/* 並び */
	.col {
		display: flex;
		justify-content: center;

		&:nth-child(even) {
			flex-flow: row-reverse;
		}

		div {
			position: relative;
		}

		svg {
			overflow: visible;
		}

		.item-wrap {
			height: max-content;
		}

		.item {
			background: #0D7DC8;
			border-radius: 100%;

			img {
				visibility: hidden;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.col:nth-child(1) {
		gap: 135px;

		.title-wrap {
			width: 392px;
		}

		svg {
			clip-path: inset(0 100% 0 0);
			position: absolute;
			top: -27px;
			right: -80px;
		}

		.item-wrap {
			display: flex;
			margin-top: 40px;

			.item:nth-child(1) {
				margin-top: 7px;

				img {
					top: -135px;
					width: 131px;
					height: 158px;
				}
			}

			.item:nth-child(2) {
				margin-top: 70px;

				img {
					top: -110px;
					width: 164px;
					height: 133px;
				}
			}
		}

		.item {
			width: 177px;
			height: 40px;
		}

		.balloon {
			bottom: -30px;
			left: -12px;

			p::before {
				top: -10px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.col:nth-child(2) {
		margin-top: 160px;
		gap: 200px;

		.title-wrap {
			width: 416px;
		}

		svg {
			clip-path: inset(0 0 0 100%);
			position: absolute;
			top: 28px;
			left: -210px;
		}

		.item-wrap {
			margin-top: 190px;
		}

		.item {
			width: 360px;
			height: 40px;

			img {
				top: -200px;
				width: 216px;
				height: 220px;
			}
		}

		.balloon {
			bottom: 197px;
			left: -16px;

			p::before {
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%) rotate(180deg);
			}
		}
	}

	.col:nth-child(3) {
		margin-top: 198px;
		gap: 200px;

		.title-wrap {
			width: 400px;
		}

		svg {
			clip-path: inset(0 100% 0 0);
			position: absolute;
			top: -25px;
			right: -189px;
		}

		.item-wrap {
			margin-top: 100px;
		}

		.item {
			width: 177px;
			height: 34px;

			img {
				top: -150px;
				width: 184px;
				height: 160px;
			}
		}

		.balloon {
			bottom: 120px;
			right: -110px;

			p::before {
				left: -10px;
				top: 50%;
				transform: translateY(-50%) rotate(-90deg);
			}
		}
	}

	.col:nth-child(4) {
		margin-top: 160px;
		gap: 280px;

		.title-wrap {
			width: 424px;
		}

		svg {
			clip-path: inset(0 0 0 100%);
			position: absolute;
			top: 28px;
			left: -210px;
		}

		.item-wrap {
			margin-top: 190px;
		}

		.item {
			width: 273px;
			height: 40px;

			img {
				top: -215px;
				width: 240px;
				height: 240px;
			}
		}

		.balloon {
			bottom: 35px;
			right: -90px;

			p::before {
				left: -10px;
				top: 50%;
				transform: translateY(-50%) rotate(-90deg);
			}
		}
	}
}


/* =================================
    ステップ 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;
		}

		p {
			padding: 22px 82px 0;
		}
	}

	ol {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 33px;
		margin-top: 105px;

		li {
			counter-increment: step2-list;
		}

		h3 {
			color: #0661B5;
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;

			&::before {
				content: counter(step2-list, decimal-leading-zero);
			}

			span {
				padding-left: 12px;
				position: relative;

				&::before {
					content: "";
					background: #0661B5;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 20px;
				}
			}
		}

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

		b {
			display: block;
			font-size: 23px;
			letter-spacing: .03em;
			line-height: 1.39;
			margin: 16px 0 14px;
		}
	}
}

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

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--noise-pattern-step);
		background-repeat: repeat;
		background-size: 200px 200px;
		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 82px 0;
		}
	}

	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;
			}
		}
	}

	.adjust-br {
		display: none;
	}
}

/* =================================
    製品紹介
================================= */
.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: 125px;
	}

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

		.col {
			flex-flow: column-reverse;
			gap: 107px;
			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: 287px;
				height: 258px;
			}
		}

		p {
			width: auto;
		}

		.adjust-br {
			display: block;
		}

		b {
			margin: 38px auto;
		}

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

			img:nth-child(1) {
				top: auto;
				bottom: -165px;
				right: 25px;
				width: 133px;
				height: 94px;
			}

			img:nth-child(2) {
				bottom: -230px;
				left: 20px;
				width: 84px;
				height: 100px;
			}
		}
	}

	/* 紹介 tab */
	.introduction {
		margin: 253px auto 0;
		width: 90%;

		.col:nth-child(1) {
			gap: 44px;

			.item-wrap {
				margin-top: -90px;

				.item:nth-child(1) img {
					top: -110px;
					width: 107px;
					height: 127px;
				}

				.item:nth-child(2) img {
					top: -90px;
					width: 133px;
					height: 107px;
				}
			}

			.item {
				width: 143px;
				height: 32px;
			}

			.balloon {
				bottom: -100px;
				left: 160px;
			}
		}

		.col:nth-child(2) {
			gap: 0;

			.item-wrap {
				margin-top: 295px;
			}

			.item {
				width: 305px;
				height: 33px;

				img {
					top: -170px;
					width: 183px;
					height: 186px;
				}
			}

			.balloon {
				bottom: 155px;
				left: -7px;
			}
		}

		.col:nth-child(3) {
			gap: 0;

			.item-wrap {
				margin-top: -64px;
				right: 50px;
			}
		}

		.col:nth-child(4) {
			gap: 53px;

			.item-wrap {
				margin-top: 270px;
			}

			.item {
				width: 223px;
				height: 33px;

				img {
					top: -175px;
					width: 197px;
					height: 197px;
				}
			}

			.balloon {
				right: -120px;
			}
		}
	}

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

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

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

		ol {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* step 3 tab */
	.step-3 {

		.adjust-br {
			display: block;
		}

		.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 {
		p {
			width: 90%;
		}

		b {
			font-size: 28px;
			max-width: 344px;
		}

		.col {
			gap: 45px;

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

			>img {
				width: 207px;
				height: 187px;
			}
		}

		.step-box {
			img:nth-child(1) {
				bottom: -90px;
				right: 90px;
				width: 97px;
				height: 68px;
			}

			img:nth-child(2) {
				bottom: -140px;
				left: 80px;
				width: 62px;
				height: 73px;
			}
		}
	}

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

		.title {
			padding: 52px 17px;

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

		.point-item {
			display: flex;

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

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

				p {
					font-size: 23px;
					line-height: 1.39;
					text-align: center;
					padding: 50px 27px;
					top: -45px;
				}
			}
		}
	}

	/* 紹介 sp */
	.introduction {
		margin-top: 170px;

		.col {
			align-items: center;
			flex-flow: column-reverse !important;

			svg {
				display: none !important;
			}

			.item-wrap {
				justify-content: center;
			}

			.title-wrap {
				width: auto !important;
			}
		}

		.col:nth-child(1) {
			gap: 94px;

			.item-wrap {
				margin-top: 0;

				.item:nth-child(2) {
					margin-top: 50px;
					margin-left: -20px;
				}
			}

			.balloon {
				bottom: -55px;
				left: -10px;
			}
		}

		.col:nth-child(2) {
			gap: 54px;
			margin-top: 300px;

			.item-wrap {
				margin-top: 0;
			}
		}

		.col:nth-child(3) {
			gap: 47px;
			margin-top: 240px;

			.item-wrap {
				margin-top: 0;
				right: auto;
			}
		}

		.col:nth-child(4) {
			align-items: flex-start;
			gap: 47px;
			margin-top: 230px;

			.item-wrap {
				margin-top: 0;
			}
		}
	}

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

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

			p {
				padding: 22px 0 0;
			}
		}

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

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

	/* 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;
				}

				&:nth-child(2) .arrow-box::after {
					bottom: -20px;
				}
			}

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

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

			.arrow-box {
				height: 100%;
				align-content: center;
				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 {
		.step-box {
			img:nth-child(1) {
				right: 55px
			}

			img:nth-child(2) {
				left: 40px;
			}
		}
	}

	.step-1 .point-item {
		left: 5%;
		transform: none;
	}
}