@charset "UTF-8";

/* //////////////////////////////////////////////////////////// */
/* article */
/* //////////////////////////////////////////////////////////// */
body {
	background: #FFE7E7 none;
}

article {
	padding: 20px 20px 0;

	& section {
		margin-bottom: 20px;
		padding: 5px;
		background: var(--bg-color);

		& h2 {
			padding: 10px;
			color: var(--bg-color);
			font-size: 1.43em;
			background: var(--accent-color);
		}

		& ul {
			padding: 10px 20px 10px 25px;

			& li {
				line-height: 1.4;

				& a {
					padding: 8px 0;
					display: block;
				}
			}
		}

		&.important {

			&:has(.ss-preview-part) > div {
				width: 100%;
			}

			& .article-pages {
				width: 100%;
			}

			& h2 {
				width: 100%;
				background: #C00;
			}

			& ul {
				width: 100%;
				list-style: none;

				& li {
					position: relative;

					&::before {
						content: "";
						width: 0;
						height: 0;
						display: block;
						position: absolute;
						top: calc(.7em + 6px);
						left: -12px;
						border: 4px solid transparent;
						border-left: 6px solid var(--font-color);
					}
					
					& a {
						color: #C00;
						text-decoration: none;
						pointer-events: none;
					}
				}
			}

			& .btn {
				width: calc(100% - 30px);
				margin: 0 15px 20px;
				position: relative;
				line-height: 1;
				color: #000;
				font-weight: 700;
				text-align: center;
				font-size: 1.3em;
				background: #FFE7E7;
				border: 3px solid #C00;
				border-radius: 0;

				&::after {
					content: "";
					width: 17px;
					height: 17px;
					display: block;
					position: absolute;
					top: calc(50% - 8.5px);
					right: 20px;
					border-top: 1px solid #C00;
					border-right: 1px solid #C00;
					transform: rotate(45deg);
				}
			}
		}
	}
}

footer {
	padding-top: 0;
	& > div:first-child {
		background: rgba(0,0,0,.65) none;

		&::before,
		&::after {
			content: none;
		}
	}
}










/* /////////////////////////////////////////////////////////////////////////////////////// */
/* PC *//* /////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 1100px) {
	article {
		width: 720px;
		margin-left: auto;
		margin-right: auto;
		padding: calc(2em + 44px) 0 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		& section {
			width: calc(50% - 10px);
			border-radius: 4px;
			box-shadow: 0 3px 12px 0 rgba(0,0,0,.2),
						0 1px 3px 0 rgba(0,0,0,.3);

			&.important {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				& .btn {
					width: calc(50% - 25px);
				}
				& .btn + .btn {
					margin-left: 0;
				}
			}
		}

		&:has(.ss-preview-part) {
			article {
				padding: 0;
			}

			.important ~ div {
				width: calc(50% - 10px);
				display: flex;

				& > section {
					width: 100%;
				}
			}
		}

	}
	footer {
		margin-top: 0;
	}
}