@charset "UTF-8";




.ai-nobel {
	color: #262626;
	font-size: 1.4rem;
	line-height: 1.5;
	a {
		text-decoration: none !important;
	}
}

.ai-nobel-header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.95);
	width: 100%;
	height: 7rem;
	padding: 0 0 0 2rem;
	z-index: 2000;
	.nobel-logo {
		width: 16.8rem;
	}
	#novel-nav {
		position: absolute;
		top: 7rem;
		left: 0;
		display: none;
		background-color: rgba(38, 38, 38, 0.95);
		width: 100%;
		height: calc(100svh - 7rem);
		color: #fff;
		.nav-inner {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: calc(100svh - 7rem);
			padding-bottom: 2rem;
		}
		ul {
			width: 25rem;
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 1;
			a {
				color: #fff;
				text-decoration: none !important;
			}
			li {
				margin-bottom: 3rem;
				&.sub {
					.submenu {
						margin-top: 2.5rem;
						padding-left: 3rem;
						li {
							margin-bottom: 2.5rem;
						}
					}
				}
			}
		}
		p {
			width: 25rem;
			a {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 4rem;
				background-color: #fff;
				width: 100%;
				min-height: 4rem;
				margin-top: 0.5rem;
				font-size: 1.4rem;
				font-weight: 700;
				line-height: 1;
				text-decoration: none;
				color: #000;
			}
		}
	}
	#novel-open {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 7rem;
		height: 7rem;
		span {
			position: relative;
			display: block;
			background-color: #262626;
			width: 3rem;
			height: 0.4rem;
			text-align: center;
			transition: 0.2s ease;
		}
		&:before, &:after {
			content: "";
			position: absolute;
			left: 2rem;
			display: block;
			background-color: #262626;
			width: 3rem;
			height: 0.4rem;
			transition: 0.2s ease;
		}
		&:before {
			top: 2.1rem;
		}
		&:after {
			bottom: 2.1rem;
		}
		&.active {
			span {
				display: none;
			}
			&:before {
				top: 3.3rem;
				transform: rotate(45deg);
			}
			&:after {
				bottom: 3.3rem;
				transform: rotate(-45deg);
			}
		}
	}
}

.ai-nobel-mv {
	position: relative;
	background-color: #ebebeb;
	width: 100%;
	min-height: 100svh;
	margin-top: 7rem;
	padding: 3rem 0 13rem 0;
	overflow: hidden;
	.field {
		position: relative;
		width: 100%;
		padding: 0 2rem;
		z-index: 2;
		.point {
			display: flex;
			justify-content: center;
			margin-bottom: 2rem;
			li {
				width: 100%;
				font-size: 1.3rem;
				font-weight: 700;
				line-height: 1.4;
				text-align: center;
				img {
					display: block;
					width: 3.2rem;
					margin: 0 auto 1rem auto;
				}
			}
		}
		.title {
			width: 100%;
			margin: 3rem 0;
			h1 {
				width: 100%;
				margin-bottom: 2rem;
			}
			.novel-mv {
				width: 100%;
				.slick-list {
					border: 1px solid #797979;
					border-radius: 0.4rem;
					font-size: 0;
					overflow: hidden;
				}
				.slick-dots {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 1rem;
					margin: 1rem 0 0 0;
					font-size: 0;
					li {
						width: 1rem;
						margin: 0;
						button {
							display: block;
							border-radius: 1rem;
							background-color: #d9d9d9;
							width: 1rem;
							height: 1rem;
							overflow: 0;
							&:before {
								display: none;
							}
						}
						&.slick-active {
							button {
								background-color: #0065c1;
							}
						}
					}
				}
			}
		}
		.btn {
			width: 100%;
			margin-top: 3rem;
			li {
				width: 22.5rem;
				margin: 1rem auto 0 auto;
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #262626;
					border-radius: 4.2rem;
					background-color: #262626;
					width: 100%;
					min-height: 4.2rem;
					font-size: 1.4rem;
					font-weight: 700;
					line-height: 1;
					text-decoration: none;
					color: #fff;
				}
			}
		}
	}
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		opacity: 0.3;
		filter: invert(1);
		z-index: 1;
	}
	&:after {
		animation: scroll 1.5s linear infinite;
		content: "SCROLL";
		position: absolute;
		bottom: 2rem;
		left: 50%;
		display: block;
		background: url(../img/mv-scroll.png) no-repeat center 0 / cover;
		width: 6rem;
		height: 9rem;
		margin-left: -3rem;
		padding-top: 7.6rem;
		font-family: "Outfit", sans-serif;
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1;
		text-align: center;
		z-index: 2;
	}
}
@keyframes scroll {
	0% {
		background-position-y: 0;
	}
	25% {
		background-position-y: 1rem;
	}
	75% {
		background-position-y: 0;
	}
	100% {
		background-position-y: 0;
	}
}





.ai-nobel-about {
	position: relative;
	background-color: #262626;
	padding: 10rem 2rem 6rem 2rem;
	color: #fff;
	.read {
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}
	.about-image {
		position: relative;
		width: calc(100% + 2rem);
		margin: 3rem -1rem;
	}
	h2 {
		margin-bottom: 3rem;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0.2rem;
			background-color: #e3bC00;
			width: 8rem;
			height: 3rem;
			margin: 0 auto 2rem auto;
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1;
			color: #262626;
			&:after {
				content: "";
				position: absolute;
				bottom: -0.5rem;
				right: 1.3rem;
				display: block;
				background-color: #e3bC00;
				width: 0.6rem;
				height: 0.6rem;
				clip-path: polygon(0 0, 0% 100%, 100% 0);
			}
		}
		img {
			display: block;
			width: 30rem;
			margin: 2.5rem auto;
		}
	}
	dl {
		width: 100%;
		margin: 3rem 0;
		dt {
			width: 100%;
			font-size: 2.4rem;
			font-weight: 700;
			line-height: 1.5;
			text-align: center;
			img {
				display: block;
				width: 7rem;
				margin: 0 auto;
				&:first-child {
					margin-bottom: 1rem;
				}
				&:last-child {
					margin-top: 1rem;
				}
			}
		}
		dd {
			width: 100%;
			margin-top: 2rem;
			font-size: 1.4rem;
			line-height: 1.8;
			letter-spacing: 0.1em;
			text-align: center;
		}
	}
	.about-method {
		width: 100%;
		margin: 4rem auto 0 auto;
		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			border: 1px solid #797979;
			border-radius: 1rem;
			width: 100%;
			margin-bottom: 2rem;
			padding: 2rem 2rem 2.4rem 2rem;
			h3 {
				display: flex;
				align-items: center;
				gap: 1.2rem;
				margin-bottom: 2rem;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1;
				img {
					width: 3.5rem;
				}
			}
			ul {
				font-size: 1.4rem;
				line-height: 1;
				li {
					position: relative;
					margin-bottom: 1.8rem;
					padding-left: 2.6rem;
					&:last-child {
						margin-bottom: 0;
					}
					&:before {
						content: "";
						position: absolute;
						top: -0.3rem;
						left: 0;
						background: url(../img/about-icon_05.png) no-repeat center center / cover;
						width: 1.7rem;
						height: 1.7rem;
					}
				}
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}





.ai-nobel-info {
	position: relative;
	background-color: #fff;
	padding: 6rem 2rem;
	h2 {
		margin-bottom: 4rem;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 1.5rem;
			font-size: 1.8rem;
			line-height: 1.5;
		}
	}
	.news-list {
		width: 100%;
		font-size: 1.4rem;
		line-height: 1.1;
		letter-spacing: 0;
		margin: 0 auto;
		dt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 14.5rem;
			margin-bottom: 1rem;
			font-weight: 500;
			.genre {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 0.4rem;
				background-color: #FFD48D;
				width: 5.6rem;
				height: 2.2rem;
				margin: 0;
				padding: 0;
				font-size: 1.2rem;
				line-height: 1;
				&:nth-of-type(n+2) {
					display: none;
				}
			}
		}
		dd {
			width: 100%;
			margin-bottom: 1.5rem;
			line-height: 1.5;
			&:last-child {
				margin-bottom: 0;
			}
		}
		a {
			text-decoration: underline !important;
		}
	}
}





.ai-nobel-feature {
	position: relative;
	background-color: #f4f4f4;
	padding: 6rem 2rem;
	h2 {
		position: relative;
		width: calc(100% + 2rem);
		margin: 0 -1rem 3.5rem -1rem;
		padding-top: 2rem;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		z-index: 1;
		div {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1.5rem;
			font-size: 1.6rem;
			span {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 0.2rem;
				background-color: #848484;
				width: 6.4rem;
				height: 3rem;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1;
				color: #fff;
				&:after {
					content: "";
					position: absolute;
					bottom: -0.6rem;
					right: 1.3rem;
					display: block;
					background-color: #848484;
					width: 0.7rem;
					height: 0.7rem;
					clip-path: polygon(0 0, 0% 100%, 100% 0);
				}
			}
		}
		.feature {
			display: block;
			position: absolute;
			top: -1.2rem;
			left: 0;
			width: 100%;
			font-family: 'Outfit';
			font-size: 6rem;
			font-weight: 300;
			line-height: 1;
			text-align: center;
			white-space: nowrap;
			color: #fff;
			z-index: -1;
		}
	}
	.point-read {
		display: table;
		justify-content: center;
		align-items: center;
		border: 1px solid #d4d4d4;
		border-radius: 3rem;
		background-color: #fff;
		min-height: 4.2rem;
		margin: 0 auto;
		padding: 0.6rem 2rem;
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
		color: #262626 !important;
	}
	.feature1 {
		position: relative;
		border-radius: 0.4rem;
		background-color: #262626;
		width: 100%;
		margin: 5rem auto 7rem auto;
		padding: 2rem;
		color: #fff;
		.point-read {
			width: 100%;
		}
	}
	.feature-column {
		width: 100%;
		max-width: 110rem;
		margin: 5rem auto 0 auto;
		.read {
			width: 100%;
			h3 {
				margin-bottom: 1.6rem;
				font-size: 2rem;
				font-weight: 700;
				line-height: 1.5;
			}
		}
		.image {
			border: 1px solid #d4d4d4;
			border-radius: 1rem;
			width: 100%;
			margin-top: 2rem;
			font-size: 0;
			overflow: hidden;
			box-shadow: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
		}
	}
	.feature1 {
		position: relative;
		border-radius: 0.4rem;
		background-color: #262626;
		width: 100%;
		margin: 4rem auto 6rem auto;
		padding: 2rem;
		color: #fff;
		.flow {
			width: 100%;
			margin: 5rem 0;
			p {
				width: 100%;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1.5;
				text-align: center;
				img {
					margin-top: 0.5rem;
				}
			}
			.ar {
				display: block;
				width: 9rem;
				margin: 1.5rem auto;
				transform: rotate(90deg);
			}
		}
		ul {
			li {
				position: relative;
				margin-bottom: 1.2rem;
				padding-left: 2.4rem;
				line-height: 1.8;
				&:last-child {
					margin-bottom: 0;
				}
				&:before {
					content: "";
					position: absolute;
					top: 0.3rem;
					left: 0;
					background: url(../img/about-icon_05.png) no-repeat center center / cover;
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
	}
	.feature2 {
		width: 100%;
		margin: 4rem auto 6rem auto;
		.box {
			border: 1px solid #d4d4d4;
			background-color: #fff;
			width: 100%;
			margin-top: 2rem;
			padding: 3rem;
			box-shadow: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
			img {
				display: block;
				width: 20rem;
				margin: 0 auto 2rem auto;
			}
			h3 {
				margin-bottom: 1.5rem;
				font-size: 2rem;
				font-weight: 700;
				line-height: 1.5;
				text-align: center;
			}
		}
	}
}





.ai-nobel-voice {
	position: relative;
	background-color: #fff;
	padding: 5rem 2rem;
	h2 {
		margin-bottom: 4rem;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 1.5rem;
			font-size: 1.8rem;
			line-height: 1.5;
		}
	}
	.nobel-voice {
		width: 100%;
		margin: 5rem auto 0 auto;
		.box {
			width: 100%;
			margin-top: 4rem;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 100%;
				margin-bottom: 2rem;
				h3 {
					width: calc(100% - 15rem);
					font-size: 1.8rem;
					font-weight: 700;
					line-height: 1.5;
					span {
						display: table;
						background-color: #d4d4d4;
						margin-bottom: 2rem;
						padding: 0.55rem 1rem;
						font-size: 1.4rem;
						line-height: 1;
						white-space: nowrap;
					}
				}
				.image {
					border-radius: 12rem;
					width: 12rem;
					height: 12rem;
					overflow: hidden;
				}
			}
			.profile {
				border: 1px solid #d4d4d4;
				background-color: #fff;
				padding: 2rem;
				font-size: 1.2rem;
				line-height: 1.5;
				h4 {
					margin-bottom: 1rem;
					font-size: 1.6rem;
					font-weight: 700;
				}
			}
			.button {
				margin-top: 2rem;
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2px solid #262626;
					border-radius: 4.2rem;
					width: 18rem;
					height: 4.2rem;
					margin-left: auto;
					font-size: 1.6rem;
					font-weight: 700;
					line-height: 1;
					text-align: center;
					color: #262626;
				}
			}
		}
	}
}





.ai-nobel-about2 {
	position: relative;
	background: #262626 url(../img/about2-bg.png) no-repeat center 2rem / 30rem;
	padding: 6rem 2rem;
	color: #fff;
	h2 {
		margin-bottom: 4rem;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 1.5rem;
			font-size: 1.8rem;
			line-height: 1.5;
		}
	}
	.about2 {
		width: 100%;
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 2;
		p {
			margin-bottom: 2rem;
		}
		hr {
			border-top: 2px solid #fff;
			width: 10rem;
			margin: 5rem auto;
		}
		.data {
			width: 100%;
			h3 {
				width: 30rem;
				margin: 0 auto;
			}
			dl {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 2.5rem;
				font-size: 1.2rem;
				font-weight: 400;
				line-height: 1.5;
				dt {
					position: relative;
					width: 6rem;
					margin: 0.2rem 0;
					font-weight: 400;
					&:after {
						content: "\FF1A";
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				dd {
					width: calc(100% - 6rem);
					margin: 0.2rem 0;
				}
			}
		}
	}
}





.ai-nobel-more {
	position: relative;
	background-color: #fff;
	padding: 6rem 2rem;
	h2 {
		margin-bottom: 4rem;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 1.5rem;
			font-size: 1.8rem;
			line-height: 1.5;
		}
	}
	.document {
		width: 100%;
		.box {
			width: 100%;
			margin-top: 6rem;
			text-align: center;
			img {
				display: block;
				width: 29rem;
				margin: 0 auto;
			}
			h3 {
				margin-top: 1.5rem;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1.5;
			}
			.button {
				width: 22.5rem;
				margin: 3rem auto 0 auto;
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2px solid #262626;
					border-radius: 4.2rem;
					background-color: #262626;
					width: 100%;
					min-height: 4.2rem;
					font-size: 1.4rem;
					font-weight: 700;
					line-height: 1;
					text-decoration: none;
					color: #fff;
				}
			}
		}
	}
}