@charset "utf-8";

/*----------------------------------------------------
東京町田合同就職面談会2025のLP用CSS
----------------------------------------------------*/
:root {
	--black: #231815;
	--white: #FFF;

	--mint: #00c9d3;
	--yellow: #fff000;


	--text: var(--black);
	--link: var(--black);
	--link-visited: var(--black);

	--theme: var(--mint);
	--theme2: var(--yellow);
}

body {
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1.75;
	/* letter-spacing: .15em; */
	font-feature-settings: "palt";
	background-color: var(--mint);
	color: var(--text);
}
a {
	transition: opacity 0.3s ease;
	color: var(--link);
	text-decoration: none;
	&:hover {
		opacity: 0.8;
	}
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
	@media (max-width: 768px) {
		padding: 0 20px;
	}
}

.pc {
	display: block;
}
.sp {
	display: none;
}
@media (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}
.machida-cci-banner {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	img {
		display: block;
		width: calc(230 / 1440 * 100vw);
	}
	@media (max-width: 768px) {
		img {
			width: calc(230 / 750 * 100vw);
		}
	}
}

.fv {
	position: relative;
	aspect-ratio: 1440 / 900;

	.fv__title {
		position: absolute;
		top: calc(40 / 1440 * 100vw);
		left:calc(80 / 1440 * 100vw);
		z-index: 2;
		width: calc(608 / 1440 * 100vw);
	}
	.fv__subtitle {
		position: absolute;
		top: calc(382 / 1440 * 100vw);
		left:calc(80 / 1440 * 100vw);
		z-index: 2;
		width: calc(479 / 1440 * 100vw);
	}
	.fv__schedule {
		position: absolute;
		top: calc(532 / 1440 * 100vw);
		left:calc(80 / 1440 * 100vw);
		z-index: 2;
		width: calc(316 / 1440 * 100vw);
	}
	.fv__img {
		position: absolute;
		bottom: 0;
		right: calc(210 / 1440 * 100vw);
		z-index: 1;
		width: calc(800 / 1440 * 100vw);
	}
	.fv__catch {
		position: absolute;
		top: calc(40 / 1440 * 100vw);
		right:calc(80 / 1440 * 100vw);
		z-index: 2;
		width: calc(215 / 1440 * 100vw);
	}
	@media (max-width: 768px) {
		aspect-ratio: 750 / 1080;
		.fv__title {
			top: calc(93 / 750 * 100vw);
			left:calc(30 / 750 * 100vw);
			width: calc(454 / 750 * 100vw);
		}
		.fv__subtitle {
			top: calc(322 / 750 * 100vw);
			left:calc(30 / 750 * 100vw);
			width: calc(454 / 750 * 100vw);
		}
		.fv__schedule {
			top: calc(465 / 750 * 100vw);
			left:calc(30 / 750 * 100vw);
			width: calc(280 / 750 * 100vw);
		}
		.fv__img {
			bottom: 0;
			right: calc(80 / 750 * 100vw);
			width: calc(570 / 750 * 100vw);
		}
		.fv__catch {
			top: calc(93 / 750 * 100vw);
			right: calc(30 / 750 * 100vw);
			width: calc(160 / 750 * 100vw);
		}

	}
}

/* フェードスライドインアニメーション用CSS */
/* 初期状態：完全に隠す */
.fv__title,
.fv__subtitle,
.fv__schedule {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fv__catch {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fv__img {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* アニメーション実行時 */
.fv__title.animate,
.fv__subtitle.animate,
.fv__schedule.animate,
.fv__catch.animate,
.fv__img.animate {
    opacity: 1;
    transform: translate(0, 0);
}


.entry-btn {
	position: absolute;
	right: calc(80 / 1440 * 100vw);
	top: calc(80 / 1440 * 100vw);
	display: block;
	width: calc(min(278 / 1440 * 100vw, 278px));
	@media (max-width: 768px) {
		position: fixed;
		right: auto;
		top: auto;
		bottom: -1px;
		z-index:2;
		left: 50%;
		transform: translateX(-50%);
		width: calc(600 / 750 * 100vw);
	}
}

.summary {
	position: relative;
	background-color: var(--yellow);
	padding: calc(min(90 / 1440 * 100vw, 90px)) 0;
	p {
		font-size: calc(min(24 / 1440 * 100vw, 24px));
		font-weight: 700;
	}
	.feature {
		display: flex;
		gap: calc(10 / 1440 * 100vw);
		margin-top: calc(min(80 / 1440 * 100vw, 80px));
		img {
			width: calc(min(294 / 1440 * 100vw, 294px));
		}

	}
	.map-btn {
		display: block;
		margin-bottom: calc(min(37 / 1440 * 100vw, 37px));
		width: calc(min(153 / 1440 * 100vw, 153px));
	}
	.map-img {
		width: calc(min(556 / 1440 * 100vw, 556px));
	}
	@media (max-width: 768px) {
		padding: calc(min(50 / 750 * 100vw, 50px)) 0;
		.summary__lead {
			font-size: calc(min(30 / 750 * 100vw, 30px));
			line-height: 1.6;
			text-align: center;
			letter-spacing: 0.01em;
		}
		p {
			font-size: calc(min(24 / 750 * 100vw, 24px));
			line-height: 1.4;
		}
		.feature {
			img {
				width: calc(min(219 / 750 * 100vw, 219px));
			}
		}
		.map-btn {
			margin-top: calc(min(20 / 750 * 100vw, 20px));
			width: calc(min(250 / 750 * 100vw, 250px));
		}
		.map-img {
			width: calc(min(556 / 750 * 100vw, 556px));
		}
		.mod-info {
		}

	}
}

.com-badge {
	aspect-ratio: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(min(88 / 1440 * 100vw, 88px));
	background-color: var(--black);
	border-radius: 50%;
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0;
	font-size: calc(min(20 / 1440 * 100vw, 20px));
	font-weight: 700;
	white-space: nowrap;
	color: var(--yellow);
	@media (max-width: 768px) {
		width: calc(min(100 / 750 * 100vw, 100px));
		font-size: calc(min(28 / 750 * 100vw, 28px));
	}
}

.mod-info {
	display: flex;
	align-items: flex-start;
	gap: calc(15 / 1440 * 100vw);
	margin-top: calc(min(50 / 1440 * 100vw, 50px));
	.text {
		p {
			font-size: calc(min(34 / 1440 * 100vw, 34px));
			font-weight: 900;
			&.date {
				line-height: 1.2;
				span {
					font-size: calc(min(60 / 1440 * 100vw, 60px));
				}
			}
		}
	}
	&.map {

	}
	&.target {
		.text {
			p {
				font-size: calc(min(24 / 1440 * 100vw, 24px));
			}
		}
	}
	@media (max-width: 768px) {
		gap: calc(min(20 / 750 * 100vw, 20px));
		margin-top: calc(min(50 / 750 * 100vw, 50px));
		.text {
			p {
				font-size: calc(min(30 / 750 * 100vw, 30px));
				&.date {
					span {
						font-size: calc(min(40 / 750 * 100vw, 40px));
					}
				}
			}
		}
		&.target {
			.text {
				p {
					font-size: calc(min(30 / 750 * 100vw, 30px));
				}
			}
		}
	}
}

.exhibitors {
	padding: calc(min(90 / 1440 * 100vw, 90px)) 0;
	.note {
		margin-block: calc(min(80 / 1440 * 100vw, 80px));
		font-size: calc(min(36 / 1440 * 100vw, 36px));
		font-weight: 900;
		text-align: center;
		@media (max-width: 768px) {
			margin-block: calc(min(80 / 750 * 100vw, 80px));
			font-size: calc(min(32 / 750 * 100vw, 32px));
		}
	}
	.exhibitors-header {
		margin-bottom: calc(min(50 / 1440 * 100vw, 50px));
		.title {
			display: flex;
			margin: 0 auto calc(min(20 / 1440 * 100vw, 20px)) auto;
			width: calc(min(350 / 1440 * 100vw, 350px));
		}
		.lead {
			font-size: calc(min(24 / 1440 * 100vw, 24px));
			font-weight: 700;
			text-align: center;
			span {
				display: block;
				font-size: calc(min(16 / 1440 * 100vw, 16px));
			}
		}
		@media (max-width: 768px) {
			.title {
				width: calc(min(400 / 750 * 100vw, 400px));
			}
			.lead {
				font-size: calc(min(24 / 750 * 100vw, 24px));
				span {
					font-size: calc(min(20 / 750 * 100vw, 20px));
				}
			}
		}
	}

	.mod-exhibitors-card {
		margin-bottom: calc(min(50 / 1440 * 100vw, 50px));
		padding: calc(min(40 / 1440 * 100vw, 40px)) calc(min(40 / 1440 * 100vw, 40px));
		background-color: var(--white);

		header {
			.company-name {
				background-color: var(--yellow);
				padding: calc(min(5 / 1440 * 100vw, 5px)) calc(min(20 / 1440 * 100vw, 20px));
				font-size: calc(min(40 / 1440 * 100vw, 40px));
				font-weight: 900;
				text-align: center;
				color: var(--text);
			}
			.url {
				margin-top: calc(min(10 / 1440 * 100vw, 10px));
				text-align: center;
				font-size: calc(min(18 / 1440 * 100vw, 18px));
				font-weight: 700;
			}
		}
		.body {
			display: flex;
			align-items: flex-start;
			gap: calc(min(92 / 1440 * 100vw, 92px));
			margin-top: calc(min(40 / 1440 * 100vw, 40px));
			.img {
				aspect-ratio: 1;
				width: calc(min(350 / 1440 * 100vw, 350px));
			}
			.content {
				flex: 1;
				.info {
					margin-bottom: calc(min(40 / 1440 * 100vw, 40px));
					div {
						display: flex;
						align-items: center;
						gap: calc(min(10 / 1440 * 100vw, 10px));
						border-bottom: 1px solid var(--black);
						margin-bottom: calc(min(20 / 1440 * 100vw, 20px));
						padding-bottom: calc(min(20 / 1440 * 100vw, 20px));
						&:first-child {
							padding-top: calc(min(20 / 1440 * 100vw, 20px));
							border-top: 1px solid var(--black);
						}
					}
					dt,dd {
						font-size: calc(min(16 / 1440 * 100vw, 16px));
						font-weight: 400;
					}
					dt {
						font-weight: 900;
						width: calc(min(315 / 1440 * 100vw, 315px));
					}
					dd {
						flex: 1;
					}
				}
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: calc(min(10 / 1440 * 100vw, 10px));
					padding: calc(min(16 / 1440 * 100vw, 16px)) calc(min(20 / 1440 * 100vw, 20px));
					width: calc(min(347 / 1440 * 100vw, 347px));
					background-color: var(--black);
					border-radius: 8px;
					font-size: calc(min(18 / 1440 * 100vw, 18px));
					font-weight: 700;
					text-align: center;
					color: var(--white);
					img {
						width: calc(min(20 / 1440 * 100vw, 20px));
					}
					span {}
				}
			}
		}
		@media (max-width: 768px) {
			margin-bottom: calc(min(50 / 750 * 100vw, 50px));
			padding: calc(min(40 / 750 * 100vw, 40px)) calc(min(40 / 750 * 100vw, 40px));
			header {
				.company-name {
					padding: calc(min(10 / 750 * 100vw, 10px)) calc(min(20 / 750 * 100vw, 20px));
					font-size: calc(min(36 / 750 * 100vw, 36px));
				}
				.url {
					font-size: calc(min(30 / 750 * 100vw, 30px));
				}
			}
			.body {
				flex-direction: column;
				gap: calc(min(30 / 750 * 100vw, 30px));
				.img {
					width: 100%;
				}
				.content {
					width: 100%;
					.info {

						gap: calc(min(20 / 750 * 100vw, 20px));
						div {
							flex-direction: column;
						}
						dt,dd {
							padding-bottom: calc(min(10 / 750 * 100vw, 10px));
							font-size: calc(min(30 / 750 * 100vw, 30px));
							width: 100%;
						}
						dt {
							padding-bottom: calc(min(10 / 750 * 100vw, 10px));
							font-size: calc(min(32 / 750 * 100vw, 32px));
						}
					}
					.btn {
						margin-top: calc(min(20 / 750 * 100vw, 20px));
						padding: calc(min(16 / 750 * 100vw, 16px)) calc(min(20 / 750 * 100vw, 20px));
						width: 100%;
						font-size: calc(min(32 / 750 * 100vw, 32px));
						img {
							width: calc(min(32 / 750 * 100vw, 32px));
						}
					}
				}
			}

		}
	}
}


.mod-contact {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(min(20 / 1440 * 100vw, 20px));
	margin: 0 auto calc(min(90 / 1440 * 100vw, 90px)) auto;
	width: fit-content;
	.com-badge {
		width: calc(min(88 / 1440 * 100vw, 88px));
	}
	.text {
		flex: 1;
		line-height: 1;
		.item {
			display: flex;
			align-items: flex-end;
			gap: calc(min(10 / 1440 * 100vw, 10px));
			&:not(:last-child) {
				margin-bottom: calc(min(20 / 1440 * 100vw, 20px));
			}
			.name {
				font-size: calc(min(32 / 1440 * 100vw, 32px));
				font-weight: 900;
			}
			.address {
				font-size: calc(min(16 / 1440 * 100vw, 16px));
				font-weight: 400;
			}
			.tel {
				display: flex;
				align-items: center;
				gap: calc(min(10 / 1440 * 100vw, 10px));
				font-size: calc(min(24 / 1440 * 100vw, 24px));
				font-weight: 700;
			}
			.mail {
				display: flex;
				align-items: center;
				gap: calc(min(10 / 1440 * 100vw, 10px));
				a {
					font-size: calc(min(24 / 1440 * 100vw, 24px));
					font-weight: 700;
				}
			}
			.label {
				padding: calc(min(5 / 1440 * 100vw, 5px)) calc(min(10 / 1440 * 100vw, 10px));
				font-size: calc(min(16 / 1440 * 100vw, 16px));
				font-weight: 700;
				background-color: var(--black);
				color: var(--yellow);

			}
		}
	}
	@media (max-width: 768px) {
		gap: calc(min(30 / 750 * 100vw, 30px));
		margin: 0 auto calc(min(50 / 750 * 100vw, 50px)) auto;
		width: 100%;
		.com-badge {
			width: calc(min(110 / 750 * 100vw, 110px));
			font-size: calc(min(23 / 750 * 100vw, 23px));
		}
		.text {
			.item {
				flex-direction: column;
				align-items: flex-start;
				gap: calc(min(20 / 750 * 100vw, 20px));
				&:not(:last-child) {
					margin-bottom: calc(min(20 / 750 * 100vw, 20px));
				}
				.name {
					font-size: calc(min(40 / 750 * 100vw, 40px));
				}
				.address {
					font-size: calc(min(24 / 750 * 100vw, 24px));
				}
				.tel {
					/* flex-direction: column;
					align-items: flex-start; */
					font-size: calc(min(30 / 750 * 100vw, 30px));
					gap: calc(min(10 / 750 * 100vw, 10px));
					letter-spacing: 0.01em;
					.label {
						padding: calc(min(10 / 750 * 100vw, 10px));
						font-size: calc(min(20 / 750 * 100vw, 20px));
					}
				}
				.mail {
					/* flex-direction: column;
					align-items: flex-start; */
					font-size: calc(min(30 / 750 * 100vw, 30px));
					gap: calc(min(10 / 750 * 100vw, 10px));
					letter-spacing: 0.01em;
					a {
						font-size: calc(min(30 / 750 * 100vw, 30px));
					}
					.label {
						padding: calc(min(10 / 750 * 100vw, 10px));
						font-size: calc(min(20 / 750 * 100vw, 20px));
					}
				}
			}
		}
	}
}

.copyright {
	margin-bottom: calc(min(90 / 1440 * 100vw, 90px));
	font-size: calc(min(16 / 1440 * 100vw, 16px));
	font-weight: 400;
	text-align: center;
	@media (max-width: 768px) {
		margin-bottom: calc(min(90 / 790 * 100vw, 50px));
		font-size: calc(min(24 / 750 * 100vw, 24px));
	}
}