/* ==========================================================================
   Gacha Schedule：ガシャスケジュール（[gakumas_gacha]）とトップの枠
   見た目はサイトの部品とそろえる：グレーの枠線、黒地に黄色の線の見出し。
   開催中・開催予定の分け方と残り日数は Gakumas Hub の gkh-schedule.js / gkh-schedule.css。
   ========================================================================== */

.ggs-lead {
	margin: 0 0 1em;
	color: #555555;
	font-size: 0.85em;
}

.ggs .gkh-sch-item.ggs-item {
	display: block;
	padding: 0;
	overflow: hidden;
}

.ggs .ggs-list {
	gap: 1.2em;
}

.ggs-card {
	margin: 0;
}

.ggs .ggs-banner {
	display: block;
	background: #f7f7f7;
}

.ggs .ggs-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.ggs-body {
	padding: 0.8em 1em 1em;
}

.ggs .gkh-sch-meta {
	gap: 0.4em 1em;
	font-size: 0.85em;
}

.ggs .gkh-sch-left {
	padding: 0.05em 0.8em;
	border-radius: 999px;
	background: #333333;
	color: #ffffff;
}

.ggs .gkh-sch-item.is-now .gkh-sch-left {
	background: #e6a800;
	color: #ffffff;
}

.ggs .gkh-sch-item.is-ending .gkh-sch-left {
	background: #d00000;
	color: #ffffff;
}

.ggs .gkh-sch-item.is-soon .gkh-sch-left {
	background: #1d5fd1;
	color: #ffffff;
}

.ggs .gkh-sch-range {
	margin: 0;
	font-size: 1em;
}

.ggs .ggs-title {
	position: static;
	margin: 0.35em 0 0.6em;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.5;
}

.ggs .ggs-title::before,
.ggs .ggs-title::after {
	content: none;
	display: none;
}

.ggs .ggs-title,
.ggs .ggs-title a,
.ggs .ggs-h3 {
	color: #222222;
}

.ggs .ggs-title a {
	text-decoration: none;
}

.ggs .ggs-title a:hover {
	text-decoration: underline;
}

/* 登場アイドル・同じ時期のサポートカード */
.ggs-block {
	margin-top: 0.9em;
}

.ggs .ggs-h3 {
	position: static;
	margin: 0 0 0.5em;
	padding: 0.15em 0 0.2em 0.6em;
	border: none;
	border-left: 5px solid #ffd400;
	border-bottom: 1px solid #dddddd;
	background: none;
	box-shadow: none;
	font-size: 0.95em;
	font-weight: bold;
	line-height: 1.5;
}

.ggs .ggs-h3::before,
.ggs .ggs-h3::after {
	content: none;
	display: none;
}

.ggs-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.7em;
}

.ggs-people--card {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ggs .ggs-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
	min-width: 0;
	padding: 0.5em;
	border: 2px solid #dddddd;
	border-radius: 8px;
	background: #ffffff;
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ggs .ggs-person:hover {
	border-color: #ffd400;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.ggs-person-img {
	position: relative;
	display: block;
	width: 100%;
}

.ggs-people--idol .ggs-person-img {
	width: 5.2em;
}

/* 画像の枠の縦横比を決めて、中の画像を合わせる（画像の大きさがまちまちでもそろう） */
.ggs-people--idol .ggs-person-img {
	aspect-ratio: 1 / 1;
}

.ggs-people--card .ggs-person-img {
	aspect-ratio: 16 / 9;
}

.ggs .ggs-person-img > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	border-radius: 6px;
	object-fit: cover;
}

.ggs-people--idol .ggs-person-img > img {
	border-radius: 50%;
}

/* 評価アイコン（右下に重ねる） */
.ggs-rate {
	position: absolute;
	z-index: 1;
	right: -0.35em;
	bottom: -0.35em;
	display: block;
	width: 2.4em;
}

.ggs .ggs-rate img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.ggs-rate--text {
	width: auto;
	padding: 0 0.5em;
	border-radius: 4px;
	background: #333333;
	color: #ffd400;
	font-weight: bold;
}

.ggs-person-name {
	margin-top: 0.25em;
	font-size: 0.78em;
	font-weight: bold;
	line-height: 1.4;
}

.ggs-person-sub {
	color: #777777;
	font-size: 0.7em;
}

.ggs-person-go {
	margin-top: auto;
	padding: 0.1em 0.7em;
	border: 1px solid #2f7bff;
	border-radius: 4px;
	color: #1d5fd1;
	font-size: 0.68em;
	font-weight: bold;
}

.ggs .ggs-person:hover .ggs-person-go {
	background: #e3edff;
}

/* 開催中・開催予定がひと目で分かるように：画像に帯（リボン）、区切りの見出しに色、予定は小さく2列 */
.ggs .ggs-banner {
	position: relative;
	min-height: 3em;
}

.ggs-ribbon {
	position: absolute;
	top: 0.7em;
	left: 0;
	display: none;
	padding: 0.25em 1.1em 0.25em 0.8em;
	border-radius: 0 999px 999px 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	color: #ffffff;
	font-size: 0.95em;
	font-weight: bold;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.ggs-ribbon small {
	margin-left: 0.5em;
	font-size: 0.75em;
	letter-spacing: 0;
}

.ggs-ribbon--now {
	background: #e60033;
}

.ggs-ribbon--soon {
	background: #1d5fd1;
}

.gkh-sch-item.is-now .ggs-ribbon--now,
.gkh-sch-item.is-soon .ggs-ribbon--soon {
	display: block;
}

.ggs .gkh-sch-sec--now .gkh-sch-h,
.ggs .ggs-sec--now .gkh-sch-h {
	border-bottom-color: #ffd400;
	background: linear-gradient(90deg, #e60033, #ff7a00);
	font-size: 1.1em;
}

.ggs .ggs-sec--soon .gkh-sch-h {
	border-bottom-color: #9fc0ff;
	background: #1d5fd1;
}

.ggs-live-dot {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: #ffffff;
	vertical-align: 0.1em;
	animation: ggs-blink 1.4s ease-in-out infinite;
}

@keyframes ggs-blink {
	50% {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ggs-live-dot {
		animation: none;
	}
}

.ggs .gkh-sch-item.is-now.ggs-item {
	border: 3px solid #ff7a00;
	box-shadow: 0 4px 14px rgba(230, 0, 51, 0.15);
}

.ggs .gkh-sch-item.is-now .gkh-sch-left {
	padding: 0.15em 1em;
	font-size: 1.1em;
}

/* 開催予定：2列で小さく、少し落ち着いた色に */
.ggs .ggs-list--soon {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8em;
}

.ggs .gkh-sch-item.is-soon.ggs-item {
	border: 2px dashed #9fc0ff;
	background: #f7faff;
}

.ggs .gkh-sch-item.is-soon .ggs-img {
	filter: saturate(0.6);
}

.ggs .gkh-sch-item.is-soon .ggs-title {
	font-size: 0.95em;
}

.ggs .gkh-sch-item.is-soon .ggs-people {
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.ggs .gkh-sch-item.is-soon .ggs-person-go {
	display: none;
}

.ggs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 1em;
	align-items: center;
	justify-content: space-between;
	margin-top: 1em;
}

.ggs .ggs-sim-open {
	margin: 0;
	padding: 0.55em 1.2em;
	border: none;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff7a00, #e60033);
	box-shadow: 0 3px 8px rgba(230, 0, 51, 0.3);
	color: #ffffff;
	font: inherit;
	font-size: 0.9em;
	font-weight: bold;
	cursor: pointer;
}

.ggs .ggs-sim-open:hover {
	filter: brightness(1.08);
}

.ggs-more {
	margin-left: auto;
	font-size: 0.85em;
}

@media (max-width: 600px) {
	.ggs .ggs-list--soon {
		grid-template-columns: minmax(0, 1fr);
	}

	.ggs .ggs-sim-open {
		width: 100%;
	}
}

/* トップの枠（最大3件・横並び。トップの一覧の中で横幅いっぱい） */
.gkh .ggs-tile {
	grid-column: 1 / -1;
}

.ggs-tile .gkh-sch-sec {
	margin: 0;
	padding: 0.7em;
}

.ggs-tile .ggs-tile-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ggs-tile .gkh-sch-item.ggs-item {
	display: block;
	padding: 0;
	border: 2px solid #cccccc;
	border-radius: 8px;
	overflow: hidden;
}

.ggs-tile .gkh-sch-item.ggs-item.is-now {
	border-color: #e6a800;
}

.gkh .ggs-mini {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ggs-mini-img {
	display: block;
	aspect-ratio: 16 / 9;
	background: #f2f2f2;
	overflow: hidden;
}

.gkh .ggs-mini-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	object-fit: cover;
}

.ggs-mini-body {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: 0.45em 0.6em 0.55em;
}

.ggs-tile .gkh-sch-meta {
	margin: 0;
	font-size: 0.72em;
}

.ggs-tile .gkh-sch-left {
	padding: 0 0.7em;
	border-radius: 999px;
	background: #333333;
	color: #ffffff;
}

.ggs-tile .gkh-sch-item.is-now .gkh-sch-left {
	background: #e6a800;
	color: #ffffff;
}

.ggs-tile .gkh-sch-item.is-ending .gkh-sch-left {
	background: #d00000;
	color: #ffffff;
}

.ggs-tile .gkh-sch-item.is-soon .gkh-sch-left {
	background: #1d5fd1;
	color: #ffffff;
}

.ggs-mini-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.82em;
	font-weight: bold;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.gkh .ggs-mini:hover .ggs-mini-title {
	text-decoration: underline;
}

.ggs-mini-faces {
	display: flex;
	gap: 0.2em;
}

.gkh .ggs-face {
	display: block;
	width: 1.9em;
	height: 1.9em;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 600px) {
	.ggs-body {
		padding: 0.6em 0.7em 0.8em;
	}

	.ggs-people {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.45em;
	}

	.ggs-people--card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ggs .ggs-person {
		padding: 0.4em 0.3em;
	}

	.ggs-tile .ggs-tile-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ggs-tile .gkh-sch-item.ggs-item .ggs-mini {
		flex-direction: row;
	}

	.ggs-tile .ggs-mini-img {
		flex: 0 0 40%;
	}
}

/* トップの枠：開催中のガシャの「引いてみる」ボタン（開催予定のガシャには出さない） */
.ggs-tile .gkh-sch-item.ggs-item {
	display: flex;
	flex-direction: column;
}

.ggs-tile .gkh-sch-item.ggs-item .ggs-mini {
	flex: 1 1 auto;
}

.ggs-tile .ggs-sim-open.ggs-mini-sim {
	display: block;
	width: calc(100% - 1.2em);
	margin: 0 0.6em 0.55em;
	padding: 0.3em 0.6em;
	font-size: 0.78em;
}

.ggs-tile .gkh-sch-item.is-soon .ggs-mini-sim {
	display: none;
}

/* トップの枠：左3分の2に開催中・開催予定のガシャ（最大2件）、右3分の1にガシャスケジュールへの枠
   背景は開催予定のガシャのサムネイル（なければ開催中のガシャ。gacha-schedule の ggs_tile_script）に、文字が読めるよう薄い影 */
.gkh .ggs-tile-more.has-bg {
	position: relative;
	justify-content: flex-start;
	padding: 0 0 0.9em;
	background: #2a2230;
	overflow: hidden;
	isolation: isolate;
}

/* 下地：同じ画像をぼかして暗くしたもの */
.gkh .ggs-tile-more.has-bg::before,
.gkh .ggs-tile-more.has-bg::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
}

.gkh .ggs-tile-more.has-bg::before {
	inset: -20px;
	background: var(--ggs-more-bg) center / cover no-repeat;
	filter: blur(16px) saturate(1.2);
}

.gkh .ggs-tile-more.has-bg::after {
	background: linear-gradient(180deg, rgba(20, 14, 30, 0.55), rgba(20, 14, 30, 0.75));
}

/* 上の画像（左のガシャと同じ 16:9 に収める） */
.ggs-more-img {
	display: block;
	aspect-ratio: 16 / 9;
	border-bottom: 2px solid #ffd400;
	overflow: hidden;
}

.gkh .ggs-more-img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.gkh .ggs-tile-more.has-bg .ggs-more-body,
.gkh .ggs-tile-more.has-bg .ggs-more-btn {
	margin: 0 0.9em;
}

.gkh .ggs-tile-more.has-bg .ggs-more-btn {
	margin-top: auto;
}

.gkh .ggs-tile-more.has-bg .ggs-more-ico {
	display: none;
}

.ggs-tile .gkh-sch-sec.has-more {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 0.7em;
	align-items: stretch;
}

.ggs-tile .gkh-sch-sec.has-more > .ggs-tile-list,
.ggs-tile .gkh-sch-sec.has-more > .gkh-sch-empty {
	grid-row: 1; /* 右の枠と同じ高さに伸ばす（左のガシャの枠も下までそろう） */
	grid-column: 1;
}

.ggs-tile .gkh-sch-sec.has-more > .ggs-tile-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ggs-tile .gkh-sch-sec.has-more > .gkh-sch-empty {
	margin: 0;
	align-self: center;
}

.gkh .ggs-tile-more {
	display: flex;
	flex-direction: column;
	grid-column: 2;
	grid-row: 1;
	gap: 0.6em;
	justify-content: center;
	padding: 1em 0.9em;
	border-radius: 8px;
	background: linear-gradient(150deg, #ff8a1f, #e60033); /* 画像がないとき */
	box-shadow: inset 0 -4px 0 #ffd400;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}

.gkh .ggs-tile-more:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 -4px 0 #ffd400, 0 6px 14px rgba(0, 0, 0, 0.2);
}

.ggs-more-ico {
	display: block;
	width: 2.4em;
	height: 2.4em;
	color: #ffd400;
}

.ggs-more-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ggs-more-body {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.ggs-more-title {
	font-size: 1.05em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.ggs-more-count {
	color: #ffd400;
	font-size: 0.82em;
	font-weight: bold;
}

.ggs-more-count:empty {
	display: none;
}

.ggs-more-next {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.4em 0.5em;
	border-left: 3px solid #1d5fd1;
	background: rgba(0, 0, 0, 0.4);
	font-size: 0.75em;
	line-height: 1.45;
}

.ggs-more-next-label {
	color: #9fc3ff;
	font-size: 0.9em;
	font-weight: bold;
}

/* 1件：日付（青い札）と、2行までのタイトル */
.ggs-more-next-item {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ggs-more-next-item b {
	margin-right: 0.4em;
	padding: 0 0.4em;
	border-radius: 3px;
	background: #1d5fd1;
	color: #ffffff;
}

.ggs-more-next[hidden] {
	display: none;
}

/* 次のガシャを出しているときは、説明の文は省く（枠を高くしすぎない） */
.ggs-more-next:not([hidden]) ~ .ggs-more-desc {
	display: none;
}

.ggs-more-desc {
	color: #cccccc;
	font-size: 0.72em;
	line-height: 1.5;
}

.ggs-more-btn {
	display: block;
	padding: 0.45em 0.6em;
	border-radius: 999px;
	background: #ffd400;
	color: #222222;
	font-size: 0.82em;
	font-weight: bold;
	text-align: center;
}

@media (max-width: 600px) {
	.ggs-tile .gkh-sch-sec.has-more {
		grid-template-columns: minmax(0, 1fr);
	}

	.ggs-tile .gkh-sch-sec.has-more > .ggs-tile-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.gkh .ggs-tile-more {
		display: grid;
		grid-column: 1;
		grid-row: auto;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0.3em 0.7em;
		align-items: center;
		padding: 0.7em 0.8em;
	}

	.ggs-more-ico {
		grid-row: 1 / span 2;
		width: 2em;
		height: 2em;
	}

	.ggs-more-desc {
		display: none;
	}

	.ggs-more-btn {
		grid-column: 1 / -1;
	}

	/* スマホ：左に画像（左のガシャと同じ並び）、右に文字、下にボタン */
	.gkh .ggs-tile-more.has-bg {
		grid-template-columns: 40% minmax(0, 1fr);
		padding: 0 0 0.7em;
	}

	.gkh .ggs-tile-more.has-bg .ggs-more-img {
		grid-row: 1;
		grid-column: 1;
		align-self: stretch;
		width: 100%;
		min-height: 5.5em;
		aspect-ratio: auto; /* 高さに合わせて横に広がらないように（幅は左の4割） */
		border-right: 2px solid #ffd400;
		border-bottom: 0;
	}

	.gkh .ggs-tile-more.has-bg .ggs-more-body {
		grid-row: 1;
		grid-column: 2;
		margin: 0.5em 0.7em 0 0;
	}

	.gkh .ggs-tile-more.has-bg .ggs-more-btn {
		grid-column: 1 / -1;
		margin: 0 0.7em;
	}
}