:root {
	--color-primary: #c00;
	--color-primary-rgb: 204,0,0;
	--color-primary-shade: #b40000;
	--color-primary-tint: #feecec;
	--color-secondary: #0163aa;
	--color-secondary-rgb: 1,99,170;
	--color-secondary-shade: #015796;
	--color-secondary-tint: #006fc5;
	--color-tertiary: #9e59d3;
	--color-tertiary-rgb: 158,89,211;
	--color-tertiary-shade: #8b4eba;
	--color-tertiary-tint: #f2eaf9;
	--color-success: #2dd55b;
	--color-success-rgb: 45,213,91;
	--color-success-shade: #28bb50;
	--color-success-tint: #42d96b;
	--color-warning: #ffc409;
	--color-warning-rgb: 255,196,9;
	--color-warning-shade: #e0ac08;
	--color-warning-tint: #ffca22;
	--color-danger: #c5000f;
	--color-danger-rgb: 197,0,15;
	--color-danger-shade: #ad000d;
	--color-danger-tint: #cb1a27;
	--color-light: #f3f2f0;
	--color-light-rgb: 251,250,249;
	--color-light-shade: #d6d5d3;
	--color-light-tint: #f4f3f2;
	--color-medium: #ddd;
	--color-medium-rgb: 221,221,221;
	--color-medium-shade: #666;
	--color-medium-tint: #eaeaea;
	--color-dark: #333;
	--color-dark-rgb: 51,51,51;
	--color-dark-shade: #2d2d2d;
	--color-dark-tint: #474747;
	--base-px: 20px;
	--base-fz: 160%;
}
.bg-light {
	background-color: #f3f2f0;
	background-color: var(--color-light);
}

.campaign-inner-box {
	max-width: 1440px;
	margin-inline: auto;
	padding: 40px calc(20px * 2);
	padding: 40px calc(var(--base-px) * 2);
}
.campaign-inner-box.pt0 {
	padding-top: 0;
}

.photo-camp .inline-block {
	display: inline-block;
}
.photo-camp-lead {
	font-size: 140%;
	line-height: 1.8;
}
.photo-camp-ttl {
	position: relative;
	padding-bottom: 20px;
	font-size: 160%;
	font-weight: bold;
	text-align: center;
}
.photo-camp-ttl:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 120px;
	height: 0;
	margin-left: -60px;
	border-top: 3px solid #c00;
	border-top: 3px solid var(--color-primary);
}
.photo-camp-box {
	background-color: #fff;
	border-radius: 20px;
	padding: 40px calc(20px * 2);
	padding: 40px calc(var(--base-px) * 2);
}
.photo-camp ol.num > li + li {
	margin-top: calc(20px * 1);
	margin-top: calc(var(--base-px) * 1);
}
.photo-camp .marker {
	background: linear-gradient(transparent 40%, #ffe083 40%);
}
.photo-camp-coupon-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(20px * 1);
	gap: calc(var(--base-px) * 1);
}
.photo-camp-coupon-flow li {
	border: 2px solid #ddd;
	border: 2px solid var(--color-medium);
	border-radius: 10px;
	overflow: hidden;
	background-color: #fff9db;
}
.photo-camp-coupon-flow img {
	width: 100%;
}
.photo-camp-coupon-flow p {
	font-size: 80%;
	line-height: 1.4;
	padding: 10px;
}
.photo-camp-item {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	-moz-column-gap: calc(20px * 2);
	-moz-column-gap: calc(var(--base-px) * 2);
	     column-gap: calc(20px * 2);
	     column-gap: calc(var(--base-px) * 2);
	row-gap: calc(20px * 4);
	row-gap: calc(var(--base-px) * 4);
}
.photo-camp-item a {
	display: block;
	border-radius: 20px;
	overflow: hidden;
	margin-inline: auto;
	max-width: 430px;
}
.photo-camp-item a .btn {
	background-color: #c00;
	background-color: var(--color-primary);
	color: #fff;
	padding: 10px;
	transition: all .3s;
}
.photo-camp .photo-camp-login-box {
	margin-inline: auto;
	max-width: 900px;
}
@media screen and (max-width: 959.98px) {
	:root {
		--base-px: 15px;
		--base-fz: 150%;
	}
}
@media (max-width: 819.98px) {
	br.pc-block {
		display: none;
	}
	.photo-camp-coupon-flow {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(20px * 2);
		gap: calc(var(--base-px) * 2);
	}
	.photo-camp-coupon-flow p {
		font-size: 100%;
	}
	.photo-camp-item {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
	}
	.photo-camp-item > li:first-child {
		grid-area: 1/1/2/3;
	}
	.photo-camp-item > li:nth-child(2) {
		grid-area: 2/1/3/2;
	}
	.photo-camp-item > li:nth-child(3) {
		grid-area: 2/2/3/3;
	}
}
@media screen and (max-width: 767.98px) {
	:root {
		--base-px: 10px;
		--base-fz: 140%;
	}
}
@media (max-width: 639.98px) {
	.photo-camp-lead {
		font-size: 130%;
	}
	.photo-camp-coupon-flow {
		grid-template-columns: 1fr;
		margin-inline: auto;
		width: 90%;
	}
	.photo-camp-item {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
	}
	.photo-camp-item > li:first-child {
		grid-area: 1/1/2/2;
	}
	.photo-camp-item > li:nth-child(2) {
		grid-area: 2/1/3/2;
	}
	.photo-camp-item > li:nth-child(3) {
		grid-area: 3/1/4/2;
	}
}
@media (any-hover: hover) {
	.photo-camp-item a:hover .btn {
		background-color: #31afb5;
	}
}