@charset "utf-8";

/* ==========================================================================
   TLNT_Top_v32: [top_] Top Page Specific Styles
   Update: SNS buttons hover effect fixed to solid black (no transparency).
   ========================================================================== */

/* --- Hero Slider (Swiper) --- */
.top_hero {
	width: 100%;
	max-width: 100vw;
	margin: 0 auto;
	padding: var(--space-lg) 0 48px;
	background-color: var(--color-bg-base);
	position: relative;
	overflow: hidden;
}

.top_hero .swiper-wrapper {
	align-items: center;
}

.top_hero .swiper-slide {
	width: 50%;
	max-width: var(--width-narrow);
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: var(--bd-thick);
	overflow: hidden;
	display: flex;
	border: var(--bd-base) solid var(--color-border-dark);
}

.top_hero .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Swiper UI --- */
.top_hero .swiper-button-next,
.top_hero .swiper-button-prev {
	width: 56px;
	height: 56px;
	color: var(--color-main-wh);
	background-color: var(--color-bg-black);
	border: var(--bd-base) solid var(--color-bg-black);
	top: 50%;
	transform: translateY(-50%);
	transition: all var(--transition-base);
	z-index: 10;
}

.top_hero .swiper-button-prev {
	left: calc(50% - (min(50%, var(--width-narrow)) / 2) - 72px);
}
.top_hero .swiper-button-next {
	right: calc(50% - (min(50%, var(--width-narrow)) / 2) - 72px);
}

.top_hero .swiper-pagination {
	bottom: 8px !important;
}
.top_hero .swiper-pagination-bullet {
	background-color: var(--color-border-dark);
	opacity: 0.5;
}
.top_hero .swiper-pagination-bullet-active {
	background-color: var(--color-main);
	opacity: 1;
}

/* --- News Section --- */
.top_news .cm_section_header {
	margin-bottom: 48px;
}

.top_news_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 260px);
	justify-content: flex-start;
	gap: 32px;
	list-style: none;
	padding: 0;
}

.top_news_item {
	background-color: var(--color-bg-base);
	border-radius: var(--bd-thick);
	border: 1px solid var(--color-border-light);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
	overflow: hidden;
	height: 100%;
	min-height: 320px;
}

.top_news_link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--color-text-main);
}

.top_news_thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
}

.top_news_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top_news_body {
	padding: 16px 18px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.top_news_meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.top_news_date {
	font-family: var(--font-en);
	font-size: 11px;
	color: var(--color-text-sub);
	font-weight: var(--fw-medium);
	line-height: 1;
}

.top_news_cat {
	font-size: 9px;
	font-weight: var(--fw-bold);
	color: var(--color-main-wh);
	background-color: var(--color-main);
	padding: 3px 8px;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
}

.top_news_ttl {
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.top_news_item:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.top_news_item:hover .top_news_ttl {
	opacity: 0.7;
}

/* --- Movie Section --- */
.top_movie_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.top_movie_item {
	background-color: var(--color-bg-base);
	border-radius: var(--bd-thick);
	border: 1px solid var(--color-border-light);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
	overflow: hidden;
}
.top_movie_link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--color-text-main);
}
.top_movie_thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-bg-black);
	border-bottom: 1px solid var(--color-border-light);
}
.top_movie_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top_movie_body {
	padding: 16px 14px 20px;
}
.top_movie_ttl {
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.top_movie_item:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* --- Movie Shorts --- */
.top_movie_shorts_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 48px;
}
.top_movie_shorts_item {
	background-color: var(--color-bg-base);
	border-radius: var(--bd-thick);
	border: 1px solid var(--color-border-light);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
	overflow: hidden;
}
.top_movie_shorts_link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--color-text-main);
}
.top_movie_shorts_thumb {
	width: 100%;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background-color: var(--color-bg-black);
	border-bottom: 1px solid var(--color-border-light);
}
.top_movie_shorts_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.1);
}
.top_movie_shorts_body {
	padding: 12px 10px 14px;
}
.top_movie_shorts_ttl {
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.top_movie_shorts_item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* --- Section BG & Deco --- */
.top_movie_bg_section {
	background-color: var(--color-bg-light);
	position: relative;
	overflow: hidden;
}
.top_movie_bg_deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.top_movie_deco_icon {
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.08;
}
.icon_game {
	top: 10%;
	left: -2%;
	width: 120px;
	height: 120px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v2H6v-2H4v-2h2V9h2v2h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
	transform: rotate(-20deg);
}
.icon_camera {
	top: 5%;
	right: 15%;
	width: 90px;
	height: 90px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z'/%3E%3C/svg%3E");
	transform: rotate(15deg);
}
.icon_film {
	bottom: 15%;
	left: 10%;
	width: 100px;
	height: 100px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
	transform: rotate(-10deg);
}

/* --- SNS Section --- */
.top_sns_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: var(--width-wide);
}

.top_sns_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 28px;
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-light);
	border-radius: var(--bd-thick);
	color: var(--color-text-main);
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	transition: all var(--transition-base);
}

/* 修正：ホバー時、完全な黒（不透明度1）にする */
.top_sns_item:hover {
	background-color: var(--color-bg-black);
	border-color: var(--color-bg-black);
	color: var(--color-main-wh);
	opacity: 1 !important; /* rule.cssの共通透過を上書き */
	transform: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.top_sns_info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.top_sns_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.top_sns_icon svg {
	width: 100%;
	height: 100%;
	fill: var(--color-main);
	transition: fill var(--transition-base);
}

/* ホバー時にアイコンも白く */
.top_sns_item:hover .top_sns_icon svg {
	fill: var(--color-main-wh);
}

.top_sns_name {
	font-size: 16px;
	font-weight: var(--fw-bold);
	font-family: var(--font-en);
	letter-spacing: 0.05em;
}

.top_sns_id {
	font-size: 13px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	margin-left: 4px;
	transition: color var(--transition-base);
}

/* ホバー時にID（@...）の色を調整 */
.top_sns_item:hover .top_sns_id {
	color: rgba(255, 255, 255, 0.7);
}

.top_sns_arrow {
	font-size: 18px;
	font-weight: var(--fw-bold);
	transition: all var(--transition-base);
	color: var(--color-main);
}

/* 矢印の色変更と横移動 */
.top_sns_item:hover .top_sns_arrow {
	color: var(--color-main-wh);
	transform: translateX(8px);
}

/* ==========================================================================
   Mobile Responsive Adjustments (Max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
	.top_hero {
		padding: var(--space-md) 0 40px;
	}
	.top_hero .swiper-slide {
		width: 88% !important;
		max-width: none;
		aspect-ratio: 16 / 9;
	}
	.top_hero .swiper-button-next,
	.top_hero .swiper-button-prev {
		display: none !important;
	}
	.top_hero .swiper-pagination {
		bottom: 4px !important;
	}

	.top_news_list {
		grid-template-columns: repeat(2, minmax(0, 180px));
		justify-content: flex-start;
		gap: 16px;
	}
	.top_news_item {
		min-height: 210px;
	}
	.top_news_thumb {
		aspect-ratio: 6 / 5;
	}
	.top_news_body {
		padding: 10px 10px 12px;
	}
	.top_news_meta {
		margin-bottom: 12px;
	}
	.top_news_ttl {
		font-size: 12px;
		line-height: 1.3;
	}

	.top_movie_list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.top_movie_item:nth-child(n + 3) {
		display: none;
	}
	.top_movie_shorts_list {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin-top: 32px;
	}
	.top_movie_shorts_item:nth-child(n + 4) {
		display: none;
	}
	.top_movie_body,
	.top_movie_shorts_body {
		padding: 10px 8px 12px;
	}
	.top_movie_ttl,
	.top_movie_shorts_ttl {
		font-size: 11px;
	}

	.top_sns_list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.top_sns_item {
		padding: 18px 20px;
	}
	.top_sns_info {
		gap: 12px;
	}
	.top_sns_icon {
		width: 20px;
		height: 20px;
	}
	.top_sns_name {
		font-size: 14px;
	}
	.top_sns_id {
		font-size: 12px;
	}
}