@charset "UTF-8";




.ai-nobel {
	color: #262626;
	font-size: 1.6rem;
	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: 8rem;
	padding: 1rem 5rem;
	z-index: 2000;
	.nobel-logo {
		width: 20rem;
	}
	#novel-nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: calc(100% - 20rem);
		.nav-inner {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 4rem;
			width: 100%;
		}
		ul {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			align-items: center;
			gap: 0.5rem 1.5rem;
			width: calc(100% - 20.4rem);
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 1;
			a {
				color: #262626;
				text-decoration: none !important;
				&:hover {
					color: #999;
				}
			}
			li {
				display: flex;
				align-items: center;
				text-wrap: nowrap;
				padding: 0.5rem;
				&.sub {
					position: relative;
					&:after {
						content: "";
						display: block;
						border-right: 2px solid #262626;
						border-bottom: 2px solid #262626;
						width: 0.8rem;
						height: 0.8rem;
						margin-top: -0.5rem;
						margin-left: 0.6rem;
						transform: rotate(45deg);
					}
					.submenu {
						position: absolute;
						top: 100%;
						left: 0;
						display: none;
						border: 1px solid #eee;
						width: 26rem;
						padding: 1.5rem;
						z-index: 5;
						background-color: rgba(255, 255, 255, 0.95);
						li {
							padding: 1rem 0.5rem;
							text-wrap: nowrap;
						}
					}
				}
			}
		}
		p {
			display: flex;
			gap: 0.5rem;
			width: 25rem;
			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;
				&:hover {
					background-color: #fff;
					color: #262626;
				}
			}
		}
	}
	#novel-open {
		display: none;
	}
}

.ai-nobel-mv {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	background-color: #ebebeb;
	width: 100%;
	margin-top: 8rem;
	padding: 5rem 0 17rem 0;
	overflow: hidden;
	.field {
		position: relative;
		width: 100%;
		max-width: 80rem;
		z-index: 2;
		.point {
			display: flex;
			justify-content: center;
			gap: 4rem;
			margin-bottom: 3rem;
			li {
				font-size: 1.4rem;
				font-weight: 700;
				line-height: 1.5;
				text-align: center;
				img {
					display: block;
					width: 3.4rem;
					margin: 0 auto 1.2rem auto;
				}
			}
		}
		.title {
			position: relative;
			width: 100%;
			margin: 3rem 0;
			h1 {
				position: absolute;
				top: 4.5rem;
				left: 0;
				width: 37.3rem;
				z-index: 2;
			}
			.novel-mv {
				position: relative;
				width: 57rem;
				margin-left: auto;
				z-index: 1;
				.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: 2rem 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 {
			display: flex;
			justify-content: center;
			gap: 3rem;
			margin-top: 3rem;
			li {
				width: 22.5rem;
				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;
					&:hover {
						background-color: #fff;
						color: #262626;
					}
				}
			}
		}
	}
	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: 4rem;
		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: 12rem 0 10rem 0;
	color: #fff;
	.read {
		font-size: 2.8rem;
		font-weight: 700;
		text-align: center;
	}
	.about-image {
		width: 100%;
		max-width: 110rem;
		margin: 3rem auto 6rem auto;
	}
	h2 {
		margin-bottom: 3rem;
		font-size: 2.4rem;
		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.6rem;
				right: 1.3rem;
				display: block;
				background-color: #e3bC00;
				width: 0.7rem;
				height: 0.7rem;
				clip-path: polygon(0 0, 0% 100%, 100% 0);
			}
		}
		img {
			display: block;
			width: 36rem;
			margin: 3rem auto 3.5rem auto;
		}
	}
	dl {
		width: 100%;
		margin: 3rem 0;
		dt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 52rem;
			margin: 0 auto;
			font-size: 2.8rem;
			font-weight: 700;
			line-height: 1;
			img {
				width: 7.5rem;
			}
		}
		dd {
			width: 100%;
			margin-top: 2rem;
			font-size: 1.6rem;
			line-height: 1.9;
			letter-spacing: 0.1em;
			text-align: center;
		}
	}
	.about-method {
		display: flex;
		justify-content: space-between;
		width: 72rem;
		margin: 3rem auto 0 auto;
		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			border: 1px solid #797979;
			border-radius: 1rem;
			width: 47.22%;
			padding: 2.4rem 2rem 2.6rem 2rem;
			h3 {
				display: flex;
				align-items: center;
				gap: 1.2rem;
				margin-bottom: 2.6rem;
				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;
					}
				}
			}
		}
	}
}





.ai-nobel-info {
	position: relative;
	background-color: #fff;
	padding: 10rem 0;
	h2 {
		margin-bottom: 6rem;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 2rem;
			font-size: 2rem;
			line-height: 1;
		}
	}
	.news-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.5rem;
		width: 100%;
		max-width: 72rem;
		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;
			font-weight: 400;
			.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: calc(100% - 16rem);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		a {
			text-decoration: none !important;
			&:hover {
				text-decoration: underline !important;
			}
		}
	}
}





.ai-nobel-feature {
	position: relative;
	background-color: #f4f4f4;
	padding: 10rem 0;
	h2 {
		position: relative;
		margin-bottom: 3.5rem;
		padding-top: 4.5rem;
		font-size: 3.6rem;
		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: 2rem;
			font-size: 2rem;
			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.6rem;
			left: 0;
			width: 100%;
			font-family: 'Outfit';
			font-size: 9.6rem;
			font-weight: 300;
			line-height: 1;
			text-align: center;
			color: #fff;
			z-index: -1;
		}
	}
	.point-read {
		display: table;
		justify-content: center;
		align-items: center;
		border: 1px solid #d4d4d4;
		border-radius: 4.2rem;
		background-color: #fff;
		min-height: 4.2rem;
		margin: 0 auto;
		padding: 0 2.4rem;
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 4rem;
		text-align: center;
		color: #262626 !important;
	}
	.feature-column {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		max-width: 110rem;
		margin: 5rem auto 0 auto;
		&.rev {
			flex-direction: row-reverse;
		}
		.read {
			width: calc(100% - 58rem);
			h3 {
				margin-bottom: 1.8rem;
				font-size: 2rem;
				font-weight: 700;
				line-height: 1.5;
			}
		}
		.image {
			border: 1px solid #d4d4d4;
			border-radius: 1rem;
			width: 53rem;
			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%;
		max-width: 110rem;
		margin: 5rem auto 7rem auto;
		padding: 5rem;
		color: #fff;
		.flow {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin: 6rem 0;
			p {
				width: 26.5rem;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1.5;
				text-align: center;
				img {
					margin-top: 0.5rem;
				}
			}
			.ar {
				width: 10rem;
			}
		}
		.feature-column {
			.read {
				width: calc(100% - 52rem);
			}
			.image {
				width: 48rem;
				box-shadow: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.5);
			}
		}
		ul {
			li {
				position: relative;
				margin-bottom: 1.5rem;
				padding-left: 2.6rem;
				line-height: 2;
				&: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;
				}
			}
		}
	}
	.feature2 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 110rem;
		margin: 5rem auto 7rem auto;
		gap: 4rem;
		.box {
			border: 1px solid #d4d4d4;
			background-color: #fff;
			width: 100%;
			padding: 3rem;
			box-shadow: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
			img {
				display: block;
				width: 20rem;
				margin: 0 auto 2.5rem auto;
			}
			h3 {
				margin-bottom: 1.8rem;
				font-size: 2rem;
				font-weight: 700;
				line-height: 1.5;
				text-align: center;
			}
		}
	}
}





.ai-nobel-voice {
	position: relative;
	background-color: #fff;
	padding: 10rem 0;
	h2 {
		margin-bottom: 6rem;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 2rem;
			font-size: 2rem;
			line-height: 1;
		}
	}
	.nobel-voice {
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 110rem;
		margin: 5rem auto 0 auto;
		gap: 4rem;
		.box {
			width: 100%;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				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;
					}
				}
				.image {
					border-radius: 13rem;
					width: 13rem;
					height: 13rem;
					overflow: hidden;
				}
			}
			.profile {
				border: 1px solid #d4d4d4;
				background-color: #fff;
				padding: 2.5rem;
				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;
					&:hover {
						background-color: #262626;
						color: #fff;
					}
				}
			}
		}
	}
}





.ai-nobel-about2 {
	position: relative;
	background: #262626 url(../img/about2-bg.png) no-repeat 120% center / 68.5rem;
	padding: 10rem 0;
	color: #fff;
	h2 {
		margin-bottom: 6rem;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 2rem;
			font-size: 2rem;
			line-height: 1;
		}
	}
	.about2 {
		width: 100%;
		max-width: 72rem;
		margin: 0 auto;
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 2;
		p {
			margin-bottom: 3rem;
		}
		hr {
			border-top: 2px solid #fff;
			width: 10rem;
			margin: 5rem auto;
		}
		.data {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			h3 {
				width: 34.2rem;
			}
			dl {
				display: flex;
				flex-wrap: wrap;
				width: calc(100% - 40rem);
				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: 10rem 0;
	h2 {
		margin-bottom: 5rem;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		span {
			display: block;
			margin-bottom: 2rem;
			font-size: 2rem;
			line-height: 1;
		}
	}
	.document {
		display: flex;
		width: 100%;
		max-width: 72rem;
		margin: 4rem auto 0 auto;
		.box {
			width: 100%;
			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;
					&:hover {
						background-color: #fff;
						color: #262626;
					}
				}
			}
		}
	}
}