@charset "utf-8";

/* ==========================================================================
   [top_] Top Page Specific Styles
   ========================================================================== */

/* --- Hero Slider --- */
.top_hero {
	width: 100%;
	max-width: 100vw;
	margin: 0 auto;
	padding: var(--space-lg) 0 var(--space-xl);
	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 a {
	display: block;
	width: 100%;
	height: 100%;
}

.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: #ffffff;
	background-color: #000000;
	border: var(--bd-base) solid #000;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s ease;
	z-index: 10;
}

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

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

.top_hero .swiper-button-next:hover,
.top_hero .swiper-button-prev:hover {
	background-color: #000;
	color: #fff;
}

/* --- Pagination --- */
.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;
}

@media (max-width: 768px) {
	.top_hero .swiper-button-next,
	.top_hero .swiper-button-prev {
		display: none;
	}
}

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

.top_news_list {
	list-style: none;
}
.top_news_item {
	border-bottom: 1px solid var(--color-border-light);
}
.top_news_link {
	display: flex;
	align-items: center;
	padding: 16px 8px;
	color: var(--color-text-main);
	transition: all var(--transition-base);
}

.top_news_meta {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 200px;
	flex-shrink: 0;
}
.top_news_date {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
}
.top_news_cat {
	color: var(--color-bg-base);
	background-color: var(--color-main);
	margin: 0 auto;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	padding: var(--space-xxs) var(--space-md);
	border-radius: var(--bd-circle);
	border: 1px solid var(--color-border-dark);
}
.top_news_ttl {
	font-family: var(--font-base);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	margin: 0;
}

/* --- Movie --- */

.top_movie_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.top_movie_link {
	display: block;
	color: var(--color-text-main);
}
.top_movie_thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bd-base);
	overflow: hidden;
	margin-bottom: var(--space-sm);
	border: var(--bd-base) solid var(--color-border-dark);
}
.top_movie_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-base);
}
.top_movie_link:hover .top_movie_thumb img {
	transform: scale(1.05);
}
.top_movie_ttl {
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--lh-tight);
}

/* --- Movie Shorts --- */
.top_movie_shorts_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-top: 48px;
}
.top_movie_shorts_link {
	display: block;
	color: var(--color-main);
}
.top_movie_shorts_thumb {
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: var(--bd-base);
	overflow: hidden;
	margin-bottom: var(--space-sm);
	border: var(--bd-base) solid var(--color-border-dark);
}

.top_movie_shorts_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-base);
}

.top_movie_shorts_link:hover .top_movie_shorts_thumb img {
	transform: scale(1.05);
}
.top_movie_shorts_ttl {
	font-family: var(--font-base);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* セクション全体を薄いグレー背景にする */
.top_movie_bg_section {
	background-color: var(--color-bg-light);
	position: relative;
	overflow: hidden;
	padding-top: 48px;
	padding-bottom: 48px;
}

/* コンテンツを装飾より前に出す */
.top_movie_bg_section .cm_inner {
	position: relative;
	z-index: 2; /* 装飾より手前に */
}

/* 装飾コンテナをセクション全体に広げる */
.top_movie_bg_deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	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; /* 薄く表示して上品に（濃さはここで調整！） */
}

/* 個別アイコン設定（今回はシンプルな黒い図形のSVGを埋め込んでいます） */
.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);
}
.icon_game2 {
	bottom: 5%;
	right: -3%;
	width: 150px;
	height: 150px;
	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(30deg);
	opacity: 0.05;
}
.icon_film2 {
	top: 40%;
	right: 30%;
	width: 60px;
	height: 60px;
	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(-45deg);
	opacity: 0.05;
}
.icon_camera2 {
	top: 60%;
	left: 25%;
	width: 70px;
	height: 70px;
	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(10deg);
	opacity: 0.06;
}

/* --- SNS --- */
.top_sns_list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
.top_sns_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background-color: var(--color-bg-light);
	border-radius: 8px;
	color: var(--color-text-main);
	transition: all var(--transition-base);
	margin-bottom: 20px;
}
.top_sns_item:hover {
	background-color: var(--color-main);
	color: var(--color-bg-base);
}
.top_sns_info {
	display: flex;
	align-items: baseline;
	gap: 15px;
}
.top_sns_name {
	font-size: var(--fs-md);
	font-weight: bold;
	font-family: var(--font-en);
}
.top_sns_id {
	font-size: var(--fs-sm);
	opacity: 0.8;
}
.embed_placeholder {
	background: #f0f0f0;
	border-radius: 8px;
	padding: 40px;
	text-align: center;
	color: #888;
}

/* ==========================================================================
   SP Responsive (Max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
	/* Hero Slider SP */
	.top_hero {
		padding: 20px 0 40px;
	}
	.top_hero .swiper-slide {
		width: 85%; /* ★スマホでは少し広めにチラ見せ */
	}

	/* News SP */

	.top_news_link {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.top_news_link:hover {
		padding-left: 10px;
	} /* スマホはブレ防止で動かさない */

	/* Movie SP（横スクロール化！） */
	.top_movie_list {
		display: flex;
		overflow-x: auto;
		gap: 15px;
		padding-bottom: 20px;
		scroll-snap-type: x mandatory;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.top_movie_list::-webkit-scrollbar {
		display: none;
	}
	.top_movie_item {
		min-width: 280px;
		scroll-snap-align: start;
	}

	/* Movie Shorts SP（横スクロール化） */
	.top_movie_shorts_list {
		display: flex;
		overflow-x: auto;
		gap: 15px;
		margin-top: 40px;
		padding-bottom: 20px;
		scroll-snap-type: x mandatory; /* スワイプでピタッと止まるようにする */
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.top_movie_shorts_list::-webkit-scrollbar {
		display: none; /* スクロールバーを隠す */
	}
	.top_movie_shorts_link {
		min-width: 130px; /* スマホでのShorts動画の横幅 */
		scroll-snap-align: start;
	}
}