@charset "UTF-8";

/* =========================================================
   第13回 夏休み絵日記コンクール 結果発表ページ
   共通ヘッダ/フッタ（header2018.php / footer2023.php）と併用
   ========================================================= */

#enikki {
	/* 背景のドット柄をCSSで再現（back.png は使用しない） */
	background-color: #b5d9f4;
	background-image: radial-gradient(circle at center, #8fccf2 6px, rgba(143, 204, 242, 0) 6px);
	background-size: 27.5px 23px;
	background-position: center top;
	text-align: center;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
}

#enikki *,
#enikki *::before,
#enikki *::after {
	box-sizing: border-box;
	text-align: center;
}

#enikki img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: bottom;
}

#enikki ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#enikki a {
	display: inline-block;
}

.enikki_inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 15px;
}

/* ---------- ロゴ ---------- */
#enikki .enikki_logo {
	display: block;
	width: 690px;
	margin: 30px auto 0;
}

/* ---------- 結果発表・展示情報 ---------- */
.enikki_info {
	max-width: 900px;
	margin: 40px auto 0;
}

.enikki_result_ttl {
	margin: 0 0 20px;
	padding: 12px 10px;
	color: #fff;
	background: #F39800;
	border-radius: 5px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.enikki_notice {
	margin: 0;
	padding: 20px;
	background: #fff;
	border: 3px solid #22B8BC;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
}

.br_sp { display: none; }

@media screen and (max-width: 768px) {
    .br_sp { display: inline; }
}

/* ---------- 賞タイトル画像・区切り線 ---------- */
/* 最優秀賞・優秀賞・特別賞・佳作のタイトル画像（サイズはここで一括調整） */
#enikki .prize_ttl {
	display: block;
	width: 199px;
	margin: 15px auto;
}

/* 賞ブロック間の余白（区切り線の代わり） */
#enikki .enikki_grand ~ .prize_ttl,
#enikki .prize_list ~ .prize_ttl {
	margin-top: 80px;
}

/* ---------- 名前ラベル ---------- */
.sakuhin {
	margin: 0 auto;
	padding: 5px;
	color: #fff;
	background: #0d6fb8;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	word-break: break-all;
}

.sakuhin--lg {
	width: 100%;
	padding: 12px;
	font-size: 18px;
}

.sakuhin--md {
	width: 100%;
}

.sakuhin--sm {
	width: 100%;
	padding: 4px;
	font-size: 13px;
}

.sname {
	color: #9fd8f6;
	font-size: 12px;
	font-weight: bold;
}

/* ---------- 最優秀賞 ---------- */
.enikki_grand {
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
}

.enikki_grand a {
	display: block;
	margin: 0 0 10px;
}

.enikki_grand img {
	width: 100%;
}

/* ---------- 作品画像の白い枠 ---------- */
#enikki .enikki_grand img,
#enikki .prize_list img,
#enikki .kasaku_list img {
	background: #fff;
	border: 4px solid #fff;
}

#enikki .enikki_grand img {
	border-width: 6px;
}

/* ---------- 優秀賞・特別賞（2列） ---------- */
#enikki .prize_list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px 40px;
	max-width: 640px;
	margin: 0 auto;
}

#enikki .prize_list a {
	display: block;
	margin-bottom: 8px;
}

#enikki .prize_list img {
	width: 100%;
}

/* ---------- 佳作 ---------- */
/* 部門見出し（画像をCSSで再現）。色は画像に合わせて調整してください */
#enikki h3.kasaku_ttl {
	max-width: 1000px;
	margin: 40px auto;
	padding: 20px 15px;
	color: #444;
	background: #fdfdc0;
	border: 0;
	border-radius: 16px;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-align: center;
}

#enikki h3.kasaku_ttl::before,
#enikki h3.kasaku_ttl::after {
	content: none;
}

#enikki h3.kasaku_ttl--grade {
	margin-top: 70px;
	background: #fffb7c;
}

#enikki .kasaku_list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 40px;
	max-width: 1000px;
	margin: 0 auto;
}

#enikki .kasaku_list a {
	display: block;
	margin-bottom: 6px;
}

#enikki .kasaku_list img {
	width: 100%;
}

/* ---------- 協賛フッター ---------- */
.enikki_foot {
	margin-top: 40px;
	text-align: center;
}

/* 雲の背景：footer2025.png は空の部分が透明なので、ページ背景（水色ドット）がそのまま透けて見える。
   画像の横幅を画面幅に合わせて拡大縮小し、上部（雲の部分）だけを切り出して表示する。
   --bg-w   : footer2025.png の元の幅(px)
   --cloud-h: 元画像の上から何px分を表示するか(px)。雲の下端が切れる場合は大きく、
              元の見出し文字が写る場合は小さくする
   --min-w  : 画像を縮小する下限の幅(px)。小さい画面ではこの幅で中央を表示する */
.enikki_cloud {
	--bg-w: 1920;
	--cloud-h: 295;
	--min-w: 1000;
	height: max(
		calc(var(--cloud-h) / var(--bg-w) * 100vw),
		calc(var(--cloud-h) / var(--bg-w) * var(--min-w) * 1px)
	);
	background: url(../image/kekka/footer2025.png) no-repeat center top;
	background-size: max(100%, calc(var(--min-w) * 1px)) auto;
}

.enikki_sponsor {
	padding: 45px 15px 50px;
	background: #fff;
}

.enikki_sponsor_inner {
	max-width: 1100px;
	margin: 0 auto;
}

.sponsor_ttl {
	margin: 0 0 30px;
	color: #2f7bc0;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.sponsor_row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#enikki .sponsor_row li {
	width: 25%;
	padding: 0 10px;
	margin-bottom: 20px;
}

#enikki .sponsor_row a {
	display: block;
}

#enikki .sponsor_row img {
	width: 100%;
}

.sponsor_support {
	margin: 30px 0 0;
	color: #333;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.7;
}

/* ---------- お問い合わせ ---------- */
.enikki_contact {
	padding: 24px 15px;
	color: #fff;
	background: #3378bd;
}

.contact_inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.contact_label {
	padding: 6px 16px;
	border: 1px solid #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	white-space: nowrap;
}

.contact_text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 16px;
	margin: 0;
}

.contact_name {
	font-size: 22px;
	font-weight: bold;
}

.contact_tel {
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.contact_time {
	font-size: 16px;
	font-weight: bold;
}

/* =========================================================
   タブレット（～1024px）
   ========================================================= */
@media screen and (max-width: 1024px) {

	#enikki .kasaku_list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 24px;
	}

	.sponsor_ttl {
		font-size: 21px;
	}

	.contact_name {
		font-size: 18px;
	}

	.contact_tel {
		font-size: 24px;
	}
}

/* =========================================================
   スマートフォン（～768px）
   ========================================================= */
@media screen and (max-width: 768px) {

	.enikki_inner {
		padding: 0 12px;
	}

	#enikki .enikki_logo {
		width: 88%;
		margin-top: 20px;
	}

	.enikki_info {
		margin-top: 24px;
	}

	.enikki_result_ttl {
		font-size: 19px;
	}

	.enikki_notice {
		padding: 14px;
		font-size: 15px;
		line-height: 1.7;
		border-width: 2px;
	}

	#enikki .enikki_grand ~ .prize_ttl,
	#enikki .prize_list ~ .prize_ttl {
		margin-top: 56px;
	}

	#enikki .prize_ttl {
		width: 150px;
	}

	.sakuhin--lg {
		padding: 8px;
		font-size: 16px;
	}

	.sakuhin--md {
		font-size: 13px;
	}

	#enikki .prize_list {
		gap: 28px 14px;
	}

	#enikki .enikki_grand img {
		border-width: 4px;
	}

	#enikki .prize_list img,
	#enikki .kasaku_list img {
		border-width: 3px;
	}

	#enikki h3.kasaku_ttl {
		margin: 24px auto;
		padding: 12px 10px;
		border-radius: 12px;
		font-size: 20px;
		letter-spacing: 0.1em;
	}

	#enikki h3.kasaku_ttl--grade {
		margin-top: 44px;
	}

	#enikki .kasaku_list {
		gap: 22px 14px;
	}

	.enikki_foot {
		margin-top: 24px;
	}

	.enikki_cloud {
		--min-w: 600;
	}

	.enikki_sponsor {
		padding: 28px 12px 30px;
	}

	.sponsor_ttl {
		margin-bottom: 20px;
		font-size: 16px;
		letter-spacing: 0.02em;
	}

	/* ロゴは1つのリストとして3個ずつ折り返す */
	.sponsor_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sponsor_row {
		display: contents;
	}

	#enikki .sponsor_row li {
		width: 33.333%;
		padding: 0 6px;
		margin-bottom: 14px;
	}

	.sponsor_support {
		margin-top: 16px;
		font-size: 13px;
	}

	.enikki_contact {
		padding: 18px 12px;
	}

	.contact_inner {
		flex-direction: column;
		gap: 10px;
	}

	.contact_label {
		padding: 4px 14px;
		font-size: 16px;
	}

	.contact_text {
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	.contact_name {
		font-size: 14px;
		line-height: 1.5;
	}

	.contact_tel {
		font-size: 24px;
	}

	.contact_time {
		font-size: 13px;
	}
}

/* =========================================================
   小型スマートフォン（～480px）
   ========================================================= */
@media screen and (max-width: 480px) {

	#enikki .kasaku_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#enikki .sponsor_row li {
		width: 50%;
	}

	.sakuhin--md,
	.sakuhin--sm {
		padding: 4px 2px;
		font-size: 12px;
	}

	.sname {
		display: inline-block;
		font-size: 10px;
	}
}