@charset "UTF-8";

/* =================================
	about
================================= */

/* common */
p {
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .03em;
	line-height: 2.31;
}

.about {
	background: url(../images/about/about-back.webp) no-repeat;
	background-size: cover;
	background-position: center;
	height: 1160px;
	position: relative;
	margin-top: -400px;

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

	&::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 100%;
		height: 250px;
		background: linear-gradient(to bottom, 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;
	}

	.col {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 500px;
		margin: 0 auto;
		width: 90%;

		h2 {
			color: #045199;
			font-weight: 500;
			font-size: 38px;
			letter-spacing: .04em;
			line-height: 1.39;
			white-space: nowrap;
		}

		p {
			margin-top: 53px;
			max-width: 440px;
		}

		img {
			max-width: 673px;
			width: 50%;
		}
	}
}

/* =================================
	グラデーションのセクション
================================= */

.gradient {

	section {
		border-radius: 40px;
		box-shadow: 0 -4px 11px rgba(0, 0, 0, 0.25);
		margin: 33px auto 0;
		position: relative;
		top: 5%;
		overflow: hidden;
		width: 95%;

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

		&.is-stacked {
			position: sticky;
			top: 20px;
		}

		>div {
			text-align: center;
			position: relative;
			margin: 0 auto;
			width: 100%;
			max-width: 576px;
			z-index: 1;
		}

		span {
			background: #fff;
			border-radius: 40px;
			color: #0661B5;
			display: inline-block;
			font-weight: 500;
			font-size: 38px;
			letter-spacing: .04em;
			line-height: 1.39;
			padding: 7px 21px;
		}

		h2 {
			font-weight: 500;
			font-size: 38px;
			letter-spacing: .04em;
			line-height: 1.39;
			margin: 38px auto;
		}
	}
}

/* product */
.product {
	background: linear-gradient(75deg, #4CB2F6 57%, #fff 100%);
	padding: 200px 0 160px;

	>div::before {
		content: "";
		background: url(../images/about/product_pc_1.webp) no-repeat;
		background-size: contain;
		background-position: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: -18vw;
		width: 13.95vw;
		height: 696px;
	}

	>div::after {
		content: "";
		background: url(../images/about/product_pc_2.webp) no-repeat;
		background-size: contain;
		background-position: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: -19vw;
		width: 15.85vw;
		;
		height: 694px;
	}

	img {
		display: none;
	}
}

/* technology */
.technology {
	background: linear-gradient(75deg, #70E0FF 48%, #fff 100%);
	padding: 200px 0 180px;

	>div::before {
		content: "";
		background: url(../images/about/technology_pc_1.webp) no-repeat;
		background-size: contain;
		background-position: top;
		position: absolute;
		top: -200px;
		left: -20vw;
		width: 20.87vw;
		height: 397px;
	}

	>div::after {
		content: "";
		background: url(../images/about/technology_pc_2.webp) no-repeat;
		background-size: contain;
		background-position: bottom;
		position: absolute;
		bottom: -180px;
		right: -27vw;
		width: 14.40vw;
		height: 320px;
	}
}

/* field */
.field {
	background: linear-gradient(75deg, #FFC3BC 48%, #fff 100%);
	padding: 200px 0 180px;

	>div::before {
		content: "";
		background: url(../images/about/field_pc_1.webp) no-repeat;
		background-size: contain;
		position: absolute;
		top: -158px;
		right: -30vw;
		width: 22.82vw;
		height: 349px;
	}

	>div::after {
		content: "";
		background: url(../images/about/field_pc_2.webp) no-repeat;
		background-size: contain;
		position: absolute;
		bottom: -152px;
		left: -28vw;
		width: 26.73vw;
		height: 267px;
	}
}

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

	.technology {
		>div::before {
			left: -16vw;
		}

		>div::after {
			right: -15vw;
		}
	}

	.field {
		>div::before {
			right: -20vw;
		}

		>div::after {
			left: -14vw;
			bottom: -267px;
			width: 23vw;
		}
	}
}


/* =================================
	私たちが目指すもの
================================= */
.purpose {
	text-align: center;
	padding-top: 130px;
	margin: 0 auto;
	width: 90%;
	max-width: 1185px;

	h2 {
		color: #0661B5;
		display: flex;
		align-items: center;
		flex-flow: column;
		gap: 14px;
		font-size: 38px;
		letter-spacing: .11em;
		line-height: 1.15;

		span {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;

			&::before {
				content: "";
				background-image: linear-gradient(90deg, #FCDFC8, #0661B5);
				border-radius: 50%;
				display: block;
				transform: rotate(-30deg);
				width: 23px;
				height: 16px;
			}
		}
	}

	.content {
		background: #F4F4F4;
		border-radius: 30px;

		h3 {
			color: #1F1F1F;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;
		}

		.adjust-br {
			display: none;
		}
	}

	.col {
		display: flex;
		gap: 33px;
		margin-top: 76px;

		h3 {
			color: #0661B5;
			margin: 42px auto;
		}

		.content {
			width: 50%;
			max-width: 576px;
		}

		.content:nth-child(1) {
			padding: 85px 64px 58px;

			img {
				margin: 0 auto;
				width: 130px;
				height: 211px;
			}
		}

		.content:nth-child(2) {
			padding: 59px 64px 59px;

			img {
				margin: 0 auto;
				width: 189px;
				height: 247px;
			}

			h3 {
				white-space: nowrap;
				margin: 52px auto;
			}
		}
	}

	.important {
		margin-top: 32px;
		padding: 76px 20px 80px;

		h4 {
			color: #0661B5;
			font-size: 23px;
			letter-spacing: .11em;
			line-height: 1.39;
			margin-top: 12px;
		}

		p {
			line-height: 1.43;
		}
	}

	.important-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 36px;
		margin-top: 63px;

		>div {
			background: #fff;
			border-radius: 50%;
			display: flex;
			flex-flow: column;
			justify-content: center;
			width: 328px;
			height: 328px;

			p {
				margin: 8px auto 0;
				width: 203px;
			}

			img {
				margin: 0 auto;
				object-fit: contain;
			}

			&:nth-child(1) img {
				margin-top: -33px;
				width: 179px;
				height: 150px;
			}

			&:nth-child(2) img {
				margin-bottom: 21px;
				width: 208px;
				height: 92px;
			}

			&:nth-child(3) img {
				width: 180px;
				height: 135px;
			}

			&:nth-child(4) img {
				width: 223px;
				height: 74px;
			}

			&:nth-child(5) img {
				width: 128px;
				height: 101px;
			}
		}
	}
}

@media screen and (max-width: 1250px) {
	.purpose {
		.important-items {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 36px 30px;
			margin: 80px auto 0;
			max-width: 650px;

			>div {
				width: 310px;
				height: 310px;
			}
		}
	}
}

@media screen and (max-width: 1140px) {
	.purpose {
		.col {
			.content {
				.adjust-br {
					display: block;
				}
			}

			.content:nth-child(2) {
				h3 {
					margin: 37px auto;
				}
			}
		}
	}
}

/* カードリンク */
.col-links {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin: 152px auto 0;
	width: 90%;
	max-width: 1184px;

	>div {
		display: flex;
		align-items: flex-start;
		flex-flow: column;
		gap: 10px;
		position: relative;

		>p {
			color: #1F1F1F;
			display: flex;
			align-items: center;
			gap: 16px;
			font-weight: 500;
			font-size: 16px;
			line-height: 1.875;

			&::after {
				content: "";
				background-color: #0661B5;
				background-image: url(../images/about/arrow-card.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 11px auto;
				border-radius: 30px;
				display: block;
				width: 35px;
				height: 20px;
			}
		}
	}

	.image-card {
		border-radius: 20px;
		overflow: hidden;
		position: relative;
		pointer-events: none;

		img {
			display: block;
			width: 100%;
			transition: filter 0.3s ease;
		}

		&:hover {
			.image-overlay {
				opacity: 1;
			}
		}
	}

	.image-overlay {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 0.3s ease;

		&.touch-device {
			opacity: 1;
		}

		a {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			line-height: 1.4;
			text-align: center;
			width: 100%;
			height: 100%;

			&:first-child {
				border-bottom: 2px solid #fff;
			}

			&:hover {
				background: rgba(255, 255, 255, 0.38);
			}
		}

		&.col {
			flex-flow: column;

			a {
				border-top: 2px solid#fff;
				width: 100%;

				&:first-child {
					border-top: none;
					border-bottom: none;
				}
			}
		}
	}

	.touch-device {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: auto;
	}
}

@media (hover: hover) and (pointer: fine) {
	.col-links {
		a.touch-device {
			pointer-events: none;
		}

		.image-card {
			pointer-events: auto;
		}

		.image-overlay.touch-device {
			opacity: 0;
		}
	}
}

/* =================================
	タブレット
================================= */
@media screen and (max-width: 1024px) {

	/* about tab */
	.about {
		height: 1288px;
		margin-top: -287px;

		.col {
			flex-wrap: wrap;
			gap: 102px;
			padding-top: 368px;

			img {
				max-width: 500px;
				width: 70%;
				z-index: 1;
			}
		}
	}

	/* グラデーションのセクション */
	.gradient {
		margin-top: 90px;

		section {
			width: 90%;

			>div {
				max-width: none;
			}

			h2 {
				margin: 47px auto;
			}
		}
	}

	.product {
		padding: 83px 56px;

		>div::before,
		>div::after {
			content: none;
		}

		p {
			margin-top: 70px;
		}

		img {
			display: block;
			margin: 70px auto 0;
			width: 100%;

			&.product-sp-1 {
				max-width: 545px;
			}

			&.product-sp-2 {
				max-width: 563px;
			}
		}
	}

	.technology {
		padding: 180px 56px 257px;

		>div::before {
			top: -180px;
			left: -20px;
			width: 158px;
			height: 168px;
		}

		>div::after {
			bottom: -257px;
			right: 10px;
			width: 174px;
			height: 216px;
		}
	}

	.field {
		padding: 192px 56px 365px;

		>div::before {
			top: -173px;
			right: -34px;
			width: 207px;
			height: 176px;
		}

		>div::after {
			left: 50%;
			transform: translateX(-50%);
			bottom: -303px;
			width: 405px;
			height: 226px;
		}
	}

	/* 私たちが目指すもの tab */
	.purpose {
		padding-top: 100px;

		.col {
			.content:nth-child(1) {
				padding: 28px 18px 29px;

				img {
					width: 130px;
					height: 211px;
				}
			}

			.content:nth-child(2) {
				padding: 32px 18px 29px;

				h3 {
					margin: 46px auto;
				}

				img {
					width: 152px;
					height: 200px;
				}
			}
		}

		.important {
			padding: 64px 20px 62px;
		}
	}

	/* カードリンク tab */
	.col-links {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 120px;
	}
}

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

	p {
		line-height: 1.875;
	}

	.about {
		height: auto;

		.col {
			gap: 52px;

			h2 {
				font-size: 23px;
				line-height: 1.52;
			}

			p {
				max-width: none;
			}
		}
	}

	.gradient {
		margin-top: 64px;

		section {
			position: relative;
			top: auto;
			width: calc(100% - 20px);
			margin: 20px auto 0;
			border-radius: 25px;

			span {
				font-size: 23px;
				padding: 9px 16px;
			}

			h2 {
				font-size: 23px;
				margin: 37px auto;
			}
		}

		.product {
			padding: 40px 13px 58px;

			p {
				line-height: 1.875;
				margin-top: 37px;
			}

			img {
				margin-top: 37px;

				&.product-sp-1 {
					max-width: 302px;
				}

				&.product-sp-2 {
					max-width: 312px;
				}
			}
		}

		.technology {
			padding: 174px 13px 224px;

			>div::before {
				top: -174px;
				left: 22px;
				width: 127px;
				height: 135px;
			}

			>div::after {
				bottom: -224px;
				right: 1px;
				width: 146px;
				height: 180px;
			}
		}

		.field {
			padding: 157px 13px 211px;

			>div::before {
				top: -149px;
				right: -5px;
				width: 161px;
				height: 137px;
			}

			>div::after {
				bottom: -195px;
				width: 267px;
				height: 149px;
			}
		}
	}

	/* 私たちが目指すもの sp */
	.purpose {
		h2 {
			align-items: flex-start;
			gap: 10px;
			font-size: 28px;

			span {
				font-size: 16px;
			}
		}

		.col {
			align-items: center;
			flex-flow: column;
			gap: 23px;
			margin-top: 65px;

			.content {
				max-width: none;
				width: 100%;

				h3 {
					margin: 22px auto;
				}
			}

			.content:nth-child(1) {
				padding: 30px 24px 40px;
			}

			.content:nth-child(2) {
				padding: 50px 24px 42px;

				img {
					width: 189px;
					height: 247px;
				}

				h3 {
					margin: 22px auto;
				}
			}
		}

		.important {
			margin-top: 23px;
			padding: 40px 16px 42px;
		}

		.important-items {
			grid-template-columns: repeat(1, 1fr);
			justify-items: center;
			gap: 10px;
			margin-top: 40px;

			>div {
				&:nth-child(1) img {
					top: 17px;
					width: 169px;
					height: 140px;
				}

				&:nth-child(2) img {
					margin-bottom: 0;
				}

				&:nth-child(4) img {
					width: 210px;
					height: 70px;
					margin-top: 30px;
				}

				&:nth-child(5) img {
					width: 121px;
					height: 96px;
				}
			}
		}
	}

	/* カードリンク sp */
	.col-links {
		gap: 21px 19px;
		margin-top: 100px;

		>div {
			gap: 6px;
		}

		.image-overlay {
			a {
				font-size: 13px;
			}
		}
	}
}