@charset "utf-8";
/* =============================================================================
   リリース記念カウントダウンイラスト 特設ページ (/countdown/)
   master.css / top_v2.css を読み込んだ上での追加スタイル
   ============================================================================= */

.page-countdown main.visible-area { width: 100%; overflow-x: hidden; }

/* -------------------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------------------- */
#countdown-hero {
	padding: clamp(40px, 7vw, 90px) 0 clamp(24px, 4vw, 50px);
	text-align: center;
}
#countdown-hero .inner { max-width: 1000px; margin: 0 auto; padding: 0 1.2em; }

.cd-release {
	margin: 0 0 0.6em;
	color: #2a8d76;
	font-size: clamp(0.8rem, 1.4vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.14em;
}
.cd-heading {
	margin: 0;
	font-family: "Noto Serif JP", serif;
	font-weight: 900;
	font-size: clamp(2.2rem, 6vw, 4.6rem);
	line-height: 1.1;
	letter-spacing: 0.08em;
	color: #2a5c6e;
}
.cd-sub {
	margin: 0.5em 0 0;
	color: #777;
	font-size: clamp(0.85rem, 1.5vw, 1.15rem);
	letter-spacing: 0.06em;
}

/* 発売までの残り日数 */
.cd-days {
	display: inline-block;
	margin: clamp(18px, 3vw, 34px) 0 0;
	padding: 0.5em 1.4em;
	background: linear-gradient(135deg, #46baa1, #2a8d76);
	color: #fff;
	border-radius: 999px;
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	box-shadow: 0 8px 22px rgba(70, 186, 161, 0.35);
}
.cd-days-num {
	margin: 0 0.12em;
	font-size: 1.7em;
	font-weight: 900;
	line-height: 1;
	vertical-align: -0.06em;
}

/* 発売後: 「あとN日」の位置に Steam ウィジェットを置く
   （見た目は top_v2.css の .product-steam-widget を共用し、余白だけ調整） */
.cd-steam-widget {
	margin: clamp(18px, 3vw, 34px) auto 0 !important;
}

.cd-lead {
	margin: clamp(20px, 3vw, 34px) 0 0;
	color: #555;
	font-size: clamp(0.9rem, 1.5vw, 1.05rem);
	line-height: 2;
}
.cd-progress {
	margin: 1.2em 0 0;
	color: #999;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
}
.cd-progress strong { color: #2a8d76; font-size: 1.25em; }

/* -------------------------------------------------------------------------
   イラスト一覧
   ------------------------------------------------------------------------- */
#countdown-list { padding: clamp(20px, 3vw, 40px) 0 clamp(50px, 8vw, 100px); }
#countdown-list .inner { max-width: 1200px; margin: 0 auto; padding: 0 1.2em; }

.cd-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cd-card {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(70, 186, 161, 0.22);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cd-card.is-open:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* サムネイル（公開済み） */
.cd-thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #0d1b26;
	cursor: pointer;
	position: relative;
	line-height: 0;
}
.cd-thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.cd-zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 0.35em 0.9em;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border-radius: 999px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.cd-thumb:hover .cd-zoom,
.cd-thumb:focus-visible .cd-zoom { opacity: 1; }

/* 未公開枠
   ※ .cd-thumb の line-height:0 を打ち消さないと中の2行が重なるので明示する */
.cd-thumb-locked {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	line-height: 1.5;
	background:
		repeating-linear-gradient(-45deg,
			rgba(42, 92, 110, 0.05) 0 12px,
			rgba(42, 92, 110, 0.10) 12px 24px);
	color: #7d95a1;
	cursor: default;
}
.cd-lock-day {
	display: block;
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.1rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
.cd-lock-day strong { font-size: 1.6em; margin: 0 0.08em; line-height: 1; }
.cd-lock-note {
	display: block;
	font-size: clamp(0.72rem, 1.2vw, 0.9rem);
	letter-spacing: 0.18em;
	line-height: 1.4;
}

/* カード下部の情報 */
.cd-meta { padding: clamp(12px, 1.6vw, 20px) clamp(14px, 1.8vw, 22px) clamp(14px, 2vw, 22px); }
.cd-badge {
	display: inline-block;
	margin-bottom: 0.5em;
	padding: 0.2em 0.8em;
	background: rgba(70, 186, 161, 0.14);
	border: 1px solid rgba(70, 186, 161, 0.35);
	border-radius: 999px;
	color: #2a8d76;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.cd-badge strong { font-size: 1.25em; margin: 0 0.1em; }

.cd-artist {
	margin: 0.2em 0 0;
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1rem, 1.8vw, 1.35rem);
	font-weight: 700;
	color: #2a5c6e;
	line-height: 1.5;
}
.cd-work {
	margin: 0.4em 0 0;
	color: #777;
	font-size: 0.85rem;
	line-height: 1.7;
}
.cd-sns { margin: 0.4em 0 0; font-size: 0.85rem; }
.cd-sns a { color: #2a8d76 !important; text-decoration: underline; text-underline-offset: 3px; }
/* 先生からのコメント（吹き出し）
   上向きの三角を border で作り、絵師名側から伸びているように見せる */
.cd-comment {
	position: relative;
	margin: 1.1em 0 0;
	padding: 1em 1.2em;
	background: #f2faf7;
	border: 1px solid rgba(70, 186, 161, 0.42);
	border-radius: 12px;
	color: #4a5f68;
	font-size: 0.9rem;
	line-height: 1.9;
}
/* しっぽ: 枠線ぶんの三角を重ねて縁取りに見せる */
.cd-comment::before,
.cd-comment::after {
	content: "";
	position: absolute;
	left: 22px;
	width: 0;
	height: 0;
	border-style: solid;
}
.cd-comment::before {
	top: -11px;
	border-width: 0 9px 11px 9px;
	border-color: transparent transparent rgba(70, 186, 161, 0.42) transparent;
}
.cd-comment::after {
	top: -9px;
	border-width: 0 8px 10px 8px;
	border-color: transparent transparent #f2faf7 transparent;
}

.cd-copy { margin: 0.5em 0 0; color: #999; font-size: 0.72rem; letter-spacing: 0.02em; }

.cd-coming-at {
	margin: 0;
	color: #7d95a1;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-align: center;
}

.cd-share { margin: 0.9em 0 0; }
.cd-share-btn {
	display: inline-block;
	padding: 0.45em 1.1em;
	background: #0d1b26;
	color: #fff !important;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.cd-share-btn:hover { opacity: 0.8; }

/* 下部 */
.cd-thanks {
	margin: clamp(34px, 5vw, 60px) 0 0;
	text-align: center;
	color: #555;
	font-size: clamp(0.85rem, 1.4vw, 1rem);
	line-height: 2;
}
.cd-note {
	margin: 0.8em 0 0;
	text-align: center;
	color: #999;
	font-size: 0.8rem;
}
.cd-back { margin: clamp(28px, 4vw, 48px) 0 0; text-align: center; }
.cd-back-btn {
	display: inline-block;
	padding: 0.9em 2.4em;
	background: linear-gradient(135deg, #46baa1, #2a8d76);
	color: #fff !important;
	border-radius: 32px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(70, 186, 161, 0.32);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cd-back-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(70, 186, 161, 0.45); }

/* -------------------------------------------------------------------------
   拡大表示モーダル
   ------------------------------------------------------------------------- */
.cd-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.cd-modal.is-open { display: flex; animation: cd-modal-fade 0.2s ease-out; }
@keyframes cd-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.cd-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}
.cd-modal-content { position: relative; max-width: 1400px; width: 100%; text-align: center; }
.cd-modal-img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.cd-modal-caption { margin: 0.9em 0 0; color: #fff; font-size: 0.95rem; letter-spacing: 0.06em; }
.cd-modal-close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.15);
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.cd-modal-close:hover { background: rgba(255, 255, 255, 0.3); }
body.cd-modal-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   スマホ
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cd-grid { grid-template-columns: 1fr; gap: 18px; }
	.cd-modal { padding: 12px; }
	.cd-modal-close { top: -44px; width: 36px; height: 36px; font-size: 1.2rem; }
	.cd-zoom { opacity: 1; }   /* タッチ端末はホバーが無いので常時表示 */
}

@media (prefers-reduced-motion: reduce) {
	.cd-card, .cd-back-btn, .cd-share-btn, .cd-zoom { transition: none; }
	.cd-modal.is-open { animation: none; }
}