@charset "UTF-8";

/* ==========================================================================
   リード文（.hdg1 を wrapper で上下余白付与）
   ========================================================================== */
.tanabata-lead {
	padding: 8rem 2rem;
}

@media screen and (max-width: 561px) {
	.tanabata-lead {
		padding: 4rem 2rem;
	}
}

/* ==========================================================================
   ABOUT（この企画について）— 内部は共通の .section-layout-1 に委任、
   背景は共通 .bg-img3 クラスで付与
   ========================================================================== */
.tanabata-about {
	padding: 10rem 0;
	overflow: hidden;
}

@media screen and (max-width: 561px) {
	.tanabata-about {
		padding: 6rem 0;
	}
}

/* ==========================================================================
   Stars（みんなの想いの星たち）— .bx3 で bg + padding、.title2 で見出し、
   .flex-wrap でカードグリッド。ボタン類はデザイン独自のためカスタム
   ========================================================================== */
.tanabata-stars {
	padding: 10rem 2rem;
}

.tanabata-stars-inner {
	max-width: 145rem;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 8rem;
}

.tanabata-stars-list {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 個別カード */
.tanabata-star {
	background: #fff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
	padding: 3rem;
	display: flex;
	align-items: center;
	gap: 2.8rem;
	min-height: 16rem;
	box-sizing: border-box;
}

/* 「もっと見る」で表示制御される非表示カード */
.tanabata-star.is-hidden {
	display: none;
}

/* 星アイコン（疑似要素、色モディファイアで画像切替）*/
.tanabata-star::before {
	content: '';
	display: block;
	width: 8.4rem;
	aspect-ratio: 84 / 76;
	flex-shrink: 0;
	background: no-repeat center / contain;
}

.tanabata-star.-yellow::before {
	background-image: url('/30th/tanabata/img/star/star_yellow.webp');
}

.tanabata-star.-pink::before {
	background-image: url('/30th/tanabata/img/star/star_pink.webp');
}

.tanabata-star.-green::before {
	background-image: url('/30th/tanabata/img/star/star_green.webp');
}

.tanabata-star.-blue::before {
	background-image: url('/30th/tanabata/img/star/star_blue.webp');
}

.tanabata-star-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.tanabata-star-msg {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 2.2rem;
	font-weight: 700;
	color: #65653b;
	letter-spacing: 0.66px;
	line-height: 1.4;
	margin: 0;
}

.tanabata-star-meta {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 1.5rem;
	color: #333;
	margin: 0;
}

.tanabata-star-meta-sep {
	display: block;
	width: 1px;
	height: 1.4rem;
	background: #333;
}

/* もっと見るボタン（丸+アイコン + テキスト縦積み）*/
.tanabata-stars-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	color: #111;
}

.tanabata-stars-more-icon {
	position: relative;
	display: block;
	width: 6rem;
	height: 6rem;
	border: 1px solid #111;
	border-radius: 50%;
}

.tanabata-stars-more-icon::before,
.tanabata-stars-more-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #111;
}

.tanabata-stars-more-icon::before {
	width: 2.4rem;
	height: 2px;
}

.tanabata-stars-more-icon::after {
	width: 2px;
	height: 2.4rem;
}

.tanabata-stars-more-txt {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.14px;
	line-height: 2;
}

/* 短冊写真グリッド */
.tanabata-star-photos {
	list-style: none;
	padding: 0;
	margin: 0;
}

@media screen and (min-width: 1442px) {
	.tanabata-star-photos {
		justify-content: center;
	}
}

.tanabata-star-photos img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

@media screen and (max-width: 800px) {
	.tanabata-stars {
		padding: 8rem 2rem 6rem;
	}

	.tanabata-stars-inner {
		row-gap: 4rem;
	}

	.tanabata-star {
		padding: 2rem;
		gap: 2rem;
		min-height: 12rem;
	}

	.tanabata-star::before {
		width: 6.5rem;
	}

	.tanabata-star-msg {
		font-size: 1.6rem;
		letter-spacing: 0.48px;
	}

	.tanabata-star-meta {
		font-size: 1.3rem;
	}

	.tanabata-stars-more-icon {
		width: 5rem;
		height: 5rem;
	}

	.tanabata-stars-more-icon::before {
		width: 2rem;
	}

	.tanabata-stars-more-icon::after {
		height: 2rem;
	}
}