@charset "utf-8";
/*----------------------*/
/*         共通         */
/*----------------------*/

#campaign {
	--pink: #e3164f;
	--text-dark: #4a3b35;
	--caption: #6b5a52;
	--bg: #fdeedc;
	--grid: #fff6ec;
	--white: #fff;
	--font-maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--font-gothic: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", Meiryo, Osaka, "MS PGothic", sans-serif;

	/* 方眼の背景（ヒーロー画像の背景と合わせる） */
	background-color: var(--bg);
	background-image:
		linear-gradient(var(--grid) 2px, transparent 2px),
		linear-gradient(90deg, var(--grid) 2px, transparent 2px);
	background-size: 36px 36px;
	color: var(--pink);
	overflow: hidden;
}

body #campaign p,
body #campaign th,
body #campaign td,
body #campaign li,
body #campaign a {
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0;
	font-family: var(--font-gothic);
}

/* 見出し・ラベル系だけ Zen Maru Gothic */
body #campaign #theme h3 + p,
body #campaign #campaign_detail th {
	font-family: var(--font-maru);
}

body #campaign p {
	color: var(--pink);
}

body #campaign a {
	font-size: inherit;
	line-height: inherit;
	color: var(--pink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body #campaign a:hover {
	opacity: 0.7;
}

#campaign h1,
#campaign h2,
#campaign h3 {
	line-height: 1.4;
	font-feature-settings: "palt";
}

#campaign img {
	display: block;
	width: 100%;
	height: auto;
}


/* ------------------ ヘッダー（ヒーロー + About） */

#campaign header {
	padding: 0 0 56px;
}

#campaign header h1 {
	margin: 0;
	padding: 0;
}

#campaign header h2 {
	margin: 40px auto 28px;
	padding: 0;
}

#campaign header p {
	margin: 0 auto;
}


/* ------------------ テーマ（白いカード） */

#campaign #theme {
	background-color: var(--white);
	border-radius: 12px;
	text-align: center;
}

#campaign #theme h3 {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--font-maru);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: capitalize; /* theme → Theme */
	color: var(--pink);
	border: none;
	background: none;
}

#campaign #theme h3 span {
	display: inline-block;
	margin-top: 10px;
	padding: 0 0.4em 10px;
	border-bottom: 2px solid var(--pink);
	font-weight: 700;
	text-transform: none;
}

/* 投稿期間 */
#campaign #theme h3 + p {
	margin: 0 0 28px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* テーマ内の画像を角丸に */
#campaign #theme img {
	border-radius: 10px;
}

/* 作品例キャプション */
#campaign #theme p.caption {
	margin: 10px 0 48px;
	font-size: 12px;
	color: var(--caption);
}

/* 画像 + テキストの2カラム */
#campaign #theme .outer {
	display: flex;
	text-align: left;
}

#campaign #theme .outer + .outer {
	margin-top: 48px;
}

#campaign #theme .txtbox p {
	font-size: 13px;
	line-height: 2;
	color: var(--text-dark);
}

#campaign #theme .txtbox p + p {
	margin-top: 1.6em;
}


/* ------------------ 応募要項 */

#campaign #campaign_detail {
	padding: 0 0 72px;
}

#campaign #campaign_detail h2 {
	margin: 0 0 28px;
	padding: 0;
	font-family: var(--font-maru);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--pink);
	border: none;
	background: none;
}

#campaign #campaign_detail h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 2px;
	background-color: var(--pink);
}

#campaign #campaign_detail table {
	width: 100%;
	margin: 0;
	border: none;
}

body #campaign #campaign_detail th {
	vertical-align: top;
	text-align: left;
	font-weight: 700;
	color: var(--pink);
	background-color: var(--white);
	border: none;
}

body #campaign #campaign_detail td {
	vertical-align: top;
	color: var(--text-dark);
	background-color: var(--white);
	border: none;
}

#campaign #campaign_detail td strong {
	font-weight: 700;
	color: var(--pink);
}

/* 応募方法：SNSごとのステップ枠 */
#campaign #campaign_detail .method {
	margin: 0 0 12px;
	padding: 16px 18px;
	border-radius: 8px;
	background-color: #fff5ee;
}

body #campaign #campaign_detail p.method-label {
	display: inline-block;
	margin: 0 0 10px;
	padding: 2px 14px;
	border-radius: 999px;
	background-color: var(--pink);
	color: var(--white);
	font-family: var(--font-maru);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
}

#campaign #campaign_detail ol.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

body #campaign #campaign_detail ol.steps > li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 32px;
	font-size: 14px;
	list-style: none;
	counter-increment: step;
}

body #campaign #campaign_detail ol.steps > li::before {
	content: counter(step);
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--pink);
	color: var(--white);
	font-family: var(--font-maru);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

body #campaign #campaign_detail p.method-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--caption);
}

/* 注意事項の小見出し */
body #campaign #campaign_detail p.note-title {
	margin: 20px 0 0;
	font-family: var(--font-maru);
	font-weight: 700;
	color: var(--pink);
}

#campaign #campaign_detail p.note-title + ul {
	margin-top: 4px;
}

#campaign #campaign_detail ul {
	margin: 12px 0 0;
	padding: 0;
}

body #campaign #campaign_detail li {
	margin: 0 0 4px 1.2em;
	font-size: 14px;
	line-height: 1.85;
	list-style-type: disc;
	color: var(--text-dark);
}

#campaign #campaign_detail li ul {
	margin-top: 4px;
}

body #campaign #campaign_detail li li {
	list-style-type: circle;
}


/*----------------------*/
/*          mb          */
/*----------------------*/
@media screen and (max-width: 768px) {

	/* --------- 調整・消去 --------- */
	body .box-white,
	body .post-content {
		padding: 0;
	}
	body .group {
		padding: 0 0 80px;
	}
	body main > .title_area,
	body .group::before,
	body .inner > header,
	body .inner dl.periodText {
		display: none !important;
	}
	body .group .inner {
		width: 100%;
	}
	body .post-content p {
		margin: 0;
	}
	#campaign .pc { display: none !important; }
	#campaign .sp { display: block !important; }

	/* --------- 個別 --------- */
	#campaign {
		margin-top: 7px;
		background-size: 28px 28px;
	}

	/* ヘッダー */
	#campaign header h2 {
		width: 78%;
		margin: 32px auto 20px;
	}
	body #campaign header p {
		margin: 0 7%;
		font-size: 13px;
	}

	/* テーマ */
	#campaign #theme {
		margin: 0 16px 56px;
		padding: 32px 20px 40px;
	}
	#campaign #theme h3 span {
		font-size: 19px;
	}
	body #campaign #theme h3 + p {
		font-size: 14px;
	}
	#campaign #theme p.caption {
		margin-bottom: 36px;
		font-size: 11px;
	}
	#campaign #theme .outer {
		flex-direction: column;
		gap: 20px;
	}

	/* 応募要項 */
	#campaign #campaign_detail {
		padding: 0 16px 56px;
	}
	#campaign #campaign_detail h2 {
		font-size: 22px;
	}
	#campaign #campaign_detail table,
	#campaign #campaign_detail tbody,
	#campaign #campaign_detail tr,
	#campaign #campaign_detail th,
	#campaign #campaign_detail td {
		display: block;
		width: auto;
	}
	#campaign #campaign_detail table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	/* 白背景は行(tr)側に持たせる → th・td間にすき間が出ても背景が透けない */
	#campaign #campaign_detail tr {
		margin: 0 0 12px;
		padding: 18px 20px 20px;
		border-radius: 10px;
		background-color: var(--white);
	}
	body #campaign #campaign_detail th,
	body #campaign #campaign_detail td {
		margin: 0;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
	}
	body #campaign #campaign_detail th {
		margin-bottom: 6px;
		font-size: 15px;
	}
}


/*----------------------*/
/*          pc          */
/*----------------------*/
@media print, screen and (min-width: 769px) {

	/* --------- 調整・消去 --------- */
	body .box-white,
	body .post-content {
		padding: 0;
		max-width: 960px;
	}
	body .inner > header,
	body .inner dl.periodText {
		display: none !important;
	}
	body .post-content p {
		margin: 0;
	}
	#campaign .pc { display: block !important; }
	#campaign .sp { display: none !important; }

	/* --------- 個別 --------- */

	/* ヘッダー */
	#campaign header h1 {
		width: 90%;
		margin: 0 auto;
	}
	#campaign header h2 {
		max-width: 480px;
		margin: 48px auto 32px;
	}
	body #campaign header p {
		max-width: 680px;
		padding: 0 40px;
		font-size: 13px;
	}

	/* テーマ */
	#campaign #theme {
		margin: 0 48px 80px;
		padding: 48px 64px 64px;
	}
	#campaign #theme h3 span {
		font-size: 26px;
	}
	body #campaign #theme h3 + p {
		font-size: 17px;
	}
	#campaign #theme .outer {
		align-items: flex-start;
		gap: 32px;
	}
	#campaign #theme .outer + .outer {
		margin-top: 64px;
	}
	#campaign #theme .outer.reverse {
		flex-direction: row-reverse;
	}
	#campaign #theme .outer .imgbox {
		flex: 0 0 50%;
	}
	#campaign #theme .outer .txtbox {
		flex: 1 1 auto;
		padding-top: 8px;
	}

	/* 応募要項 */
	#campaign #campaign_detail {
		padding: 0 48px 80px;
	}
	#campaign #campaign_detail table {
		border-collapse: separate;
		border-spacing: 0 12px;
	}
	body #campaign #campaign_detail th {
		width: 160px;
		padding: 22px 20px 22px 32px;
		border-radius: 10px 0 0 10px;
		font-size: 15px;
	}
	body #campaign #campaign_detail td {
		padding: 22px 32px 22px 0;
		border-radius: 0 10px 10px 0;
	}
}