/* ===========================
   ページ個別の設定
   =========================== */
:root {
	--color-key: #2b2b2b;
	--color-accent: #2C4A3F;
	--color-bg: #F5F3F1;
	--color-ui-bg: #ffffff;
	--color-ui-sub: #eae4dc;
	--color-text_dark: #000000;
	--color-text_gray: #B8B6B5;
	--color-text_light: #ffffff;
	--color-border_dark: #000000;
	--color-border_light: #ffffff;

	--color-text_main: #222222;

	/* コンテンツ幅 PC */
	--container-w: 1180px;

	/* パンくず */
	--color_breadcrumb-common: #ffffff;
}

/* コンテンツ幅 タブレット */
@media (max-width: 1179px) and (min-width: 810px) {
	:root {
		--container-w: 810px;
	}
}

/* コンテンツ幅 スマホ */
@media (max-width: 809px) {
	:root {
		--container-w: 100vw;
	}
}


/* ==============================
   Reset / Base
   ============================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html,
body {
	height: 100%;
	background-color: #EFF5F0;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

ul,
ol {
	list-style: none;
}

button,
input,
textarea {
	font: inherit;
}

img {
	width: 100%;
	display: block;
}

a {
	opacity: 1;
	transition: opacity .25s ease-in-out;
}
a:hover {
	opacity: .65;
}
.sp-only {
	display: none;
}
@media (max-width: 809px) {
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}
}

/* contents */
#campaign {
	font-family: yu-gothic-pr6n, sans-serif;
    padding-bottom: 38px;
	color: var(--color-text_main);

	.anniversary-50th {
        max-width: 728px;
		margin-inline: auto;
		padding: 48px 24px 6px;
		line-height: 1.8;

		figure {
			width: 205px;
			margin-inline: auto;
		}
		.anniversary-heading {
			font-family: "yu-mincho-pr6n", sans-serif;
			font-size: 22px;
			color: var(--color-accent);
			text-align: center;
            padding-block: 17px 8px;
		}
		p {
			font-size: 16px;
			text-align: center;
			padding-bottom: 30px;
		}
		&::after {
            content: "";
            display: block;
            background-image: url(../img/anniversary_border_pc.svg);
            width: 100%;
            height: 3px;
            background-size: 100%;
		}
	}
	@media (max-width: 809px) {
		.anniversary-50th {
			padding: 32px 24px 15px;

			figure {
				width: 151px;
			}
			.anniversary-heading {
	            font-size: 20px;
	            padding-block: 12px 13px;
			}
			p {
				font-size: 14px;
	            padding-bottom: 21px;
			}
			&::after {
				background-image: url(../img/anniversary_border_sp.svg);
				height: auto;
				aspect-ratio: 1 / 0.0061;
			}
		}
	}

	.contents-lead {
        max-width: 728px;
		padding-inline: 24px;
		margin-inline: auto;
        padding-block: 48px 50px;

		p {
			text-align: center;

			&:first-of-type {
				font-size: 19px;
				line-height: 1.8;
                padding-bottom: 17px;
			}
			&:last-of-type {
				font-size: 14px;
				line-height: 1.6;
			}
			@media (max-width: 809px) {
				&:first-of-type {
					font-size: 17px;
					text-align: left;
				}
            	&:last-of-type {
                	font-size: 12px;
				}
			}

			a {
				color: var(--color-text_main);

				&:hover {
					text-decoration: none;
				}
			}

		}
	}
	@media (max-width: 809px) {
		.contents-lead {
			padding-block: 33px 42px;
		}
	}

	.subscribe {
		padding-inline: 24px;
		padding-bottom: 42px;

		.btn_subscribe {
			display: block;
			max-width: 400px;
			margin-inline: auto;
		}
	}
	@media (max-width: 809px) {
		.subscribe {
	        padding-bottom: 35px;
		}
	}

	section {
		max-width: 728px;
		padding-inline: 24px;
		margin-inline: auto;

		.subheading {
			width: 249px;
			margin-inline: auto;
			text-align: center;
			font-size: 26px;
			line-height: 1.6;
			color: var(--color-accent);
			font-weight: 400;
			font-family: dnp-shuei-mincho-pr6n, sans-serif;

			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 14px;
				background-image: url(../img/bg_subheading_pc.svg);
				background-repeat: no-repeat;
				background-size: 100%;
                margin-top: 4px;
			}
		}
		@media (max-width: 809px) {
			.subheading {
				width: 217px;
				font-size: 22px;
			}
		}
	}

	.period {
	    padding-bottom: 30px;

		p {
			font-size: 20px;
			line-height: 1.8;
			text-align: center;
            padding-block: 17px;
		}
	}
	@media (max-width: 809px) {
		.period {
			padding-bottom: 24px;

			p {
				font-size: 17px;
				padding-block: 15px;
			}
		}
	}

	.prize {

		.bgcolor {
			width: 100%;
	        padding-block: 26px 34px;
			background-color: #FAFFFB;
		}

		ul {
			padding-block: 16px 11px;
		}

		li {
			font-size: 19px;
			line-height: 1.8;
			font-family: dnp-shuei-mincho-pr6n, sans-serif;
			font-weight: 400;
			text-align: center;
            padding-bottom: 20px;

			&:nth-of-type(n+2)::before {
				content: "";
				display: block;
				width: 300px;
				height: 3px;
				background-image: url(../img/line_prize_pc.svg);
				background-size: 100%;
				margin-inline: auto;
                margin-bottom: 12px;
			}

		}

		a {
			font-size: 16px;
			display: block;
			margin-inline: auto;
			width: fit-content;
			color: #558F79;
            margin-bottom: 17px;

			&:hover {
				text-decoration: none;
			}
		}
		.annotation {
			font-size: 13px;
			line-height: 1.6;
			color: #555555;
			text-align: center;
		}
	}
	@media (max-width: 809px) {
		.prize {

			.bgcolor {
				padding-block: 20px 27px;
			}
			li {
				font-size: 17px;

				&:nth-of-type(n+2)::before {
	                width: 128px;
					height: 2px;
					background-image: url(../img/line_prize_sp.svg);
	                margin-bottom: 10px;
				}
			}
			a {
				font-size: 14px;
			}
			.annotation {
				font-size: 11px;
			}
		}
	}

	.apply {
		padding-top: 43px;

		ol {
            padding-block: 29px;
			padding-left: 45px;
			position: relative;

			&::before {
                content: "";
                display: block;
                width: 3px;
                height: 150px;
                background-image: url(../img/line_vertical_pc.svg);
                background-repeat: no-repeat;
                background-size: 100%;
                position: absolute;
                top: 49px;
                left: 66px;
				z-index: 0;
			}
		}

		li {
			display: flex;
			align-items: center;
			font-size: 19px;
			position: relative;
            z-index: 1;
			line-height: 1.5;

			&:nth-of-type(1) {
				font-size: 16px;

				span.text-bg {
					display: inline-block;
					font-size: 19px;
                    line-height: 1.1;
					color: var(--color-accent);
					margin-inline: 5px;
					background-image: url(../img/bg_apply_text.webp);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
			}
			&:nth-of-type(n+2) {
				margin-top: 27px;
			}

			&::before {
				content: "";
				display: block;
				width: 46px;
				height: 46px;
                margin-right: 17px;
				background-size: 100%;
				background-repeat: no-repeat;
				flex-shrink: 0;
			}
			&:nth-of-type(1)::before {
				background-image: url(../img/number01.webp);
			}
			&:nth-of-type(2)::before {
				background-image: url(../img/number02.webp);
			}
			&:nth-of-type(3)::before {
				background-image: url(../img/number03.webp);
			}

			&:nth-of-type(1) .text-bg-wrapper::after {
				content: "";
                display: inline-block;
                width: 14px;
                height: 19px;
				background-image: url(../img/icon_follow.svg);
				background-size: 100%;
				background-repeat: no-repeat;
                margin-bottom: -3px;
				margin-left: 2px;
			}
		}

		.subscribed {
			font-size: 16px;
			max-width: 463px;
			margin-inline: auto;
			background-color: #FAFFFB;
            padding: 18px 32px;

			p {
				text-align: center;
				line-height: 1.6;
			}
		}
	}
	@media (max-width: 809px) {
		.apply {
	        padding-top: 36px;

			ol {
	            padding-block: 17px;
				padding-left: 0;

				&::before {
					width: 2px;
					height: 130px;
					background-image: url(../img/line_vertical_sp.svg);
                    top: 26px;
					left: 19px;
				}
			}

			li {
				font-size: 16px;


				&:nth-of-type(1) {
					font-size: 14px;
		            line-height: 1.9;

					span.text-bg {
						font-size: 16px;
					}
				}

				&::before {
					width: 40px;
					height: 40px;
				}

				&:nth-of-type(n+2) {
                    margin-top: 13px;
    	        }
				&:nth-of-type(3) {
                    margin-top: 20px;
    	        }
			}
			.subscribed {
				font-size: 14px;
				padding-block: 16px 12px;
			}
    	}
	}

	.winner {
        padding-block: 41px 48px;

		p {
            padding-block: 18px 35px;
			font-size: 19px;
			line-height: 1.8;
			text-align: center;
            letter-spacing: -.03em;
		}
		dt {
			font-size: 16px;
			padding-bottom: 2px;

			&::before {
				content: "";
				display: inline-block;
				width: 12px;
				height: 12px;
				background-color: currentColor;
				margin-right: 9px;
			}
		}
		dd {
			font-size: 14px;
            line-height: 1.8;
		}

		a {
			color: var(--color-text_main);

			&:hover {
				text-decoration: none;
			}
		}
	}

	@media (max-width: 809px) {
		.winner {
			padding-block: 36px 41px;

			p {
				padding-block: 15px 31px;
				font-size: 16px;
			}
			dt {
				font-size: 14px;

				&::before {
					width: 10px;
					height: 10px;
				}
			}
			dd {
				font-size: 12px;
			}
		}
	}
}

@media (max-width: 809px) {
	#campaign {
	    padding-bottom: 80px;
	}
}
/* /contents */