.detail {
	padding: 1em;
}
.detail_ttl {
	font-size: 120%;
	margin-bottom: 0.5em;
}
.detail p {
	color: color-mix(in srgb, var(--color-white-soft) 75%, transparent);
}
/* ============================================================== detail */
.area_upper,
.area_lower {
	display: grid;
	gap: 2em;
	margin-bottom: 2em;
}
@media (min-width: 1000px){
	.area_upper {
		grid-template-columns: 40% 1fr;
	}
	.area_lower {
		grid-template-columns: 60% 1fr;
	}
	.area_lower .support {
		grid-column: 1 / 3;
	}
}
/* -------------------------- video */
.video {
	width: 100%;
}
.video_frame{
	overflow: hidden;
	border-radius: 1em;
	border: 1px solid color-mix(in srgb, var(--color-white-soft) 30%, var(--color-black));
}
.video video {
	display: block;
	width: 100%;
	height: auto;
}
.video_caption{
	font-size: 80%;
	letter-spacing: 0.06em;
	opacity: 0.7;
}
.video_overlay {
	position: relative;
	font-size: 120%;
}
@media (min-width: 1000px){
	.video_overlay {
		font-size: 80%;
	}
}
.video_overlay i {
	display: grid;
	align-items: center;
	text-align: center;
	color: var(--color-white-soft);
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
}
.video_comming i {
	content: "Opening";
}
.video_showing i {
	content: "Now Showing";
}
/* -------------------------- hero */
.hero {
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 0 1em;
	align-items: center;
	margin: 0 0 1em;
}
.hero_fig {
	grid-row: 1 / 3;
	border-radius: 0.5em;
	overflow: hidden;
}
.hero_name {
	margin: 0;
	align-self: end;
	font-size: 140%;
	color: var(--color-white);
}
.hero_meta {
	align-self: start;
	opacity: 0.75;
}
.hero_meta .dash {
	margin: 0 0.2em;
}
/* -------------------------- work */
.work dl + dl {
	margin-top: 1em;
}
.work dt {
	position: relative;
	color: var(--color-accent-ylw);
}
.work dt::before {
	content: "－";
	display: inline-block;
	margin-right: 0.2em;
}
@media (min-width: 1000px){
	.work dd {
		font-size: 87.5%;
	}
}
.work .tools dd {
	margin-top: 0.5em;
}
.work .tools span {
	display: inline-block;
	font-size: 80%;
	letter-spacing: 0.06em;
	padding: 0.3em 0.6em;
	margin: 0 0.3em 0.3em 0;
	border-radius: 10em;
	border: 1px solid color-mix(in srgb, var(--color-white-soft) 30%, var(--color-black));
	background: var(--color-surface-01);
	opacity: 0.92;
	white-space: nowrap;
}
/* -------------------------- interview */
.interview .qa {
	display: grid;
	gap: 1em;
}
.interview .qa dt {
	color: var(--color-accent-ylw);
	padding-left: 1.3em;
	position: relative;
}
.interview .qa dt::before {
	content: "－";
	display: block;
	position: absolute;
	left: 0;
}
@media (min-width: 1000px){
	.interview .qa dd {
		font-size: 87.5%;
	}
}
/* -------------------------- profile */
.profile_head {
	display: grid;
	grid-template-columns: 3em 1fr;
	gap: 0 0.5em;
	margin: 0 0 0.5em;
}
.profile_fig {
	grid-row: 1 / 3;
}
.profile_fig span {
	display: block;
	overflow: hidden;
	border-radius: 0.5em;
}
.profile_name {
	align-self: end;
	margin: 0 0 0 0.5em;
	line-height: 1;
	font-size: 100%;
	opacity: 1;
}
.profile_sns {
	align-self: start;
	margin-top: 0.3em;
}
.profile_sns li {
	display: inline-block;
}
.profile_sns li a {
	display: block;
	padding: 0.3em;
}
.profile_sns li a i {
	display: block;
	aspect-ratio: 1 / 1;
	width: 1.2em;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
}
.profile_sns .tw a i {
	background-image: url("../assets/ico_x_w.svg");
}
.profile_sns .yt a i {
	background-image: url("../assets/ico_yt_w.svg");
}
.profile_sns .tt a i {
	background-image: url("../assets/ico_tiktok_w.svg");
}
.profile_sns .ig a i {
	background-image: url("../assets/ico_ig_w.svg");
}
.profile_sns .lt a i {
	background-image: url("../assets/ico_linktree.png");
}
.profile_sns .suno a i {
	background-image: url("../assets/ico_suno.png");
}
.profile .awards {
	margin: 1em 0 0;
}
.profile .awards_lst {
	display: grid;
	gap: 0.5em 0;
}
.profile .awards_lst dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 0.5em;
}
.profile .awards_lst dt,
.profile .awards_lst dd p {
	line-height: 1.4;
}
.profile .awards_lst dt {
	color: color-mix(in srgb, var(--color-white-soft) 75%, transparent);
}
.profile .awards_lst dd {
	padding-left: 0.5em;
	border-left: 1px solid color-mix(in srgb, var(--color-white-soft) 50%, var(--color-black));
}
@media (min-width: 1000px){
	.profile_name {
		font-size: 80%;
	}
	.profile_bio {
		font-size: 80%;
	}
	.profile .awards ul {
		font-size: 80%;
	}
	.profile .awards_lst {
		font-size: 80%;
	}
}
/* -------------------------- support */
.support {
	border-top: 1px solid color-mix(in srgb, var(--color-white-soft) 20%, transparent);
	padding-top: 2em;
}
.support .note {
	font-size: 80%;
	color: color-mix(in srgb, var(--color-white-soft) 50%, transparent);
}
.support li {
	display: inline-block;
	margin: 0 1em 1em 0;
}
.support a {
	font-size: 75%;
	color: color-mix(in srgb, var(--color-white-soft) 50%, var(--color-black));
	transition: 0.3s;
}
.support a:hover {
	color: var(--color-white-soft);
}

/* ============================================================== page navigation */
.page_nav{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 1em 0 0 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.page_nav span,
.page_nav a {
	color: var(--color-white-soft);
	font-size: 80%;
	letter-spacing: 0.06em;
	opacity: 0.95;
}
.page_nav span {
	opacity: 0.5;
}
.page_nav a:hover{
	color: var(--color-white);
}
.page_nav .back{
	opacity: 0.85;
}