div.visual {
	width: 100%;
	height: auto;
	aspect-ratio: 16/8;
	background-image: url("../images/top/visual2.jpg");
	background-size: cover;
	min-width: 1180px;
	position: relative;
	@media screen and (max-width: 768px) {
		min-width: 0;
		height: 100vw;
		aspect-ratio: auto;
		background-position: center;
	}
	> div {
		position: absolute;
		top: 38%;
		left: 5%;
		color: var(--white);
		@media screen and (max-width: 768px) {
			top: 25%;
		}
		p.copy {
			font-size: var(--sizeVisualCopy);
			font-weight: 700;
			line-height: 1.3;
			text-shadow: 0 0 20px var(--shadowColor1);
			display: inline-block;
		}
		p.sub-copy {
			margin-top: 40px;
			padding-bottom: 18px;
			border-bottom: solid 2px var(--white);
			font-size: var(--sizeVisualSub);
			font-weight: 700;
			line-height: 1.3;
			display: inline-block;
			text-shadow: 0 0 15px var(--shadowColor1);
		}
	}
}


/* about */
section.about {
	> div {
		width: 1080px;
		background-image: url("../images/top/about-illust.png");
		background-repeat: no-repeat;
		background-position: right 0 bottom 40px;
		@media screen and (max-width: 768px) {
			padding-bottom: 62.933vw;
			width: auto;
			background-position: center bottom;
			background-size: 68.267vw 49.333vw;
		}
		h2::after {
			content: "About";
		}
		p.copy {
			font-size: var(--sizeCopy1);
			font-weight: bold;
			line-height: 1.5;
		}

		p {
			margin-bottom: 1em;
			font-weight: bold;
			line-height: 1.7;
			font-size: var(--sizeCopy2);
		}
		div.item { 
			ul {
				font-size: var(--sizeText1);
				li {
					margin-bottom: 1.1em;
					padding-left: 1.1em;
					position: relative;
					line-height: 1.4;
				}
				li::before {
					margin-right: 2px;
					content: "●";
					color: var(--redColor);
				}
			}
			&>p {
				font-weight: normal;
				font-size: 12px;
				text-align: right;
				padding-top: 2em;
				@media screen and (max-width: 768px) {
					padding-top: 0;
					font-size: 3.2vw;
				}
			}
		}
	}
}

/* podcast */
section.podcast {
	padding: 0;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	&::before {
		content: "";
		z-index: 1;
		background-color: var(--baseColor2);
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 9%;
		border-radius: 0 30px 30px 0;
		
	}
	&::after {
		content: "";
		z-index: 0;
		background-color: var(--redColor);
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50px;
		left: 30%;
		border-radius: 30px 0 0 30px;
	}
	@media screen and (max-width: 768px) {
		&::before {
			right: 4vw;
			border-radius: 0 5.333vw 5.333vw 0;
		}
		&::after {
			top: 8vw;
			left: 12vw;
			border-radius: 5.333vw 0 0 5.333vw;
		}
	}
	>div {
		padding: 70px 0;
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
		@media screen and (max-width: 768px) {
			padding-top: 5.333vw;
		}
		h2 {
			background-image: url("../images/top/heading-podcast.png");
			&::after {
				content: "Podcast";
			}
			@media screen and (max-width: 768px) {
				padding-top: 8vw;
				margin-top: -8vw;
				background-size: 100vw 17.093vw;
				background-position: center top;
			}
		}
		p {
			text-transform: uppercase;
			text-align: center;
		}
	}
}

section.works {
	padding-top: 120px;
	@media screen and (max-width: 768px) {
		padding-top: 24vw;
	}
	>div {
		h2 {
			background-image: url("../images/top/heading-works.png");
			@media screen and (max-width: 768px) {
				padding-top: 4vw;
				margin-top: -4vw;
				background-size: 100vw 15.667vw;
				background-position: center top;
			}
			&::after {
				content: "Works";
			}
		}
		div.item {
			display: flex;
			flex-wrap: wrap;
			gap: 20px 2%;
			justify-content: flex-start;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
			>dl {
				padding: 20px;
				background-color: var(--white);
				border-radius: 15px;
				width: 23.5%;
				flex: 0 1 auto;
				box-sizing: border-box;
				box-shadow: 0 0 7px 0 rgba(77,58,62,0.20);
				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5) {
					width: 49%;
				}
				@media screen and (max-width: 768px) {
					padding: 5.333vw;
					width: 100%;
					&:nth-child(3),
					&:nth-child(4),
					&:nth-child(5) {
						width: 100%;
					}
				}
				dt {
					margin-bottom: 0.8em;
					color: var(--redColor);
					font-weight: bold;
					font-size: var(--sizeCopy2);
					line-height: 1.4;
				}
				dd {
					line-height: 1.6;
					text-align: justify;
					font-size: var(--sizeText2);
				}
			}
		}
	}
}

/* profile */
section.profile {
	padding: 0;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	&::before {
		content: "";
		z-index: 1;
		background-color: var(--baseColor2);
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 9%;
		border-radius: 30px 0 0 30px;
	}
	&::after {
		content: "";
		z-index: 0;
		background-color: var(--redColor);
		display: block;
		width: 100%;
		height: 53.76%;
		position: absolute;
		top: 50.83%;
		right: 30%;
		border-radius: 0 30px 30px 0;
	}
	@media screen and (max-width: 768px) {
		&::before {
			left: 4vw;
			border-radius: 5.333vw 0 0 5.333vw;
		}
		&::after {
			height: 46.08%;
			top: 54.9%;
			right: 8vw;
			border-radius: 0 5.333vw 5.333vw 0;
		}
	}
	> div {
		margin: 0 auto;
		padding-top: 70px;
		padding-bottom: 40px;
		position: relative;
		width: 1080px;
		z-index: 10;
		&::after {
			content: url("../images/top/profile-illust.png");
			position: absolute;
			top: -15px;
			right: -40px;
		}
		@media screen and (max-width: 768px) {
			width: auto;
			padding-left: 8vw;
			padding-right: 4vw;
			&::after {
				content: "";
				display: inline-block;
				background-image: url("../images/top/profile-illust.png");
				background-repeat: no-repeat;
				background-size: contain;
				width: 69.315vw;
				height: 51.467vw;
				position: relative;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		h2 {
			background-image: url("../images/top/heading-profile.png");
			&::after {
				content: "Profile";
			}
		}
		div.profile-name {
			margin-bottom: 50px;
			display: flex;
			gap: 20px;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
			div.name {
				@media screen and (max-width: 768px) {
					margin: 0 auto;
					width: 53.333vw;
				}
				p.photo {
					margin-bottom: 20px;
					width: 200px;
					img {
						width: 100%;
						height: auto;
						border-radius: 15px;
					}
					@media screen and (max-width: 768px) {
						width: 53.333vw;
					}
				}
				dl {
					dt {
						margin-bottom: 18px;
						font-size: var(--sizeName);
						font-weight: bold;
					}
					dd {
						a {
							display: block;
							width: fit-content;
							font-size: var(--sizeText2);
							font-family: var(--subFont);
							font-weight: bold;
							color: var(--textColor);
							text-decoration: none;
							padding-left: 25px;
							background-repeat: no-repeat;
							min-height: 23px;
							&.mail {
								margin-bottom: 3px;
								background-image: url("../images/top/icon_mail.svg");
								background-size: 23px 18px;
							}
							&.tel {
								padding-top: 5px;
								background-image: url("../images/top/icon_tel.svg");
								background-size: 15px 23px;
								background-position: 3px;
							}
						}
					}
				}
			}
			div.profile-item {
				padding-top: 15px;
				p {
					font-size: var(--sizeText3);
					line-height: 1.8;
				}
			}
		}
		div.profile-text {
			div.profile-item {
				margin-bottom: 30px;
				display: flex;
				gap: 40px;
				@media screen and (max-width: 768px) {
					flex-direction: column;
					gap: 0;
					
				}
				h3 {
					padding-left: 90px;
					font-weight: 700;
					font-size: var(--sizeHeading);
					position: relative;
					color: var(--redColor);
					&::before {
						content: "";
						display: block;
						width: 80px;
						height: 5px;
						position: absolute;
						top: 1em;
						left: 0;
						transform: translateY(-0.6em);
						background-color: var(--baseColor1);
					}
					@media screen and (max-width: 768px) {
						margin-left: -4vw;
						margin-bottom: 3.467vw;
						padding-left: 13.067vw;
						&+p {
							line-height: 1.6;
						}
						&::before {
							width: 10.667vw;
							height: 0.8vw;
							transform: translateY(-0.5em);
						}
					}
				}
				table {
					tr {
						display: block;
						padding-bottom: 30px;
						padding-left: 20px;
						position: relative;
						&::before {
							content: "";
							border-radius: 50%;
							display: block;
							position: absolute;
							top: 3px;
							left: 0;
							width: 12px;
							height: 12px;
							background-color: var(--redColor);
							z-index: 1
						}
						&::after {
							content: "";
							display: block;
							position: absolute;
							top: 3px;
							left: 3px;
							width: 6px;
							height: 52px;
							background-color: var(--baseColor1);
							z-index: 0;
						}
						th {
							padding-right: 40px;
							width: 6em;
							text-align: left;
						}
						@media screen and (max-width: 768px) {
							height: 100%;
							padding-bottom: 8vw;
							&::after {
								top: 3px;
								left: 3px;
								width: 1.333vw;
								height: 100%;
								background-color: var(--baseColor1);
								z-index: 0;
							}
							th {
								margin-bottom: 0.5em;
								display: block;
								padding-right: 0;
								width: auto;
								text-align: left;
								font-weight: bold;
							}
							td {
								display: block;
								line-height: 1.4;
							}
						}
					}
				}
			}
		}
	}
}


/* business */
section.business {
	padding-top: 120px;
	background-image: url("../images/top/bc-bg.png");
	background-repeat: no-repeat;
	background-position: center bottom 70px;
	background-size: contain;
	@media screen and (max-width: 768px) {
		padding-top: 18.667vw;
		background-image: none;
	}
	>div {
		margin: 0 auto;
		width: 1080px;
		@media screen and (max-width: 768px) {
			width: 100%;
		}
		h2::after {
			content: "Business Combine";
		}
		div.text {
			margin-bottom: 45px;
			position: relative;
			h3 {
				margin-bottom: 1em;
				font-size: var(--sizeName);
				font-weight: bold;
				text-align: center;
			}
			p {
				font-size: var(--sizeText1);
				line-height: 1.8;
			}
			&::after {
				content: url("../images/top/bc-illust.png");
				position: absolute;
				top: -130px;
				right: 0;
			}
			
			@media screen and (max-width: 768px) {
				&::after {
					content: "";
					position: relative;
					display: block;
					top: 0;
					right: auto;
					left: 50%;
					width: 56.53vw;
					height: 37.6vw;
					background-image: url("../images/top/bc-illust.png");
					background-repeat: no-repeat;
					background-size: contain;
					transform: translateX(-50%);
				}
			}
		}
		div.business-image {
			display: flex;
			align-items: center;
			justify-content: space-between;
			@media screen and (max-width: 768px) {
				display: block;
				> p {
					display: none;
				}
			}
			div.sp {
				display: none;
				@media screen and (max-width: 768px) {
					display: block;
					> p {
						margin-bottom: 8vw;
					}
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
	
}