header {
	padding: 0 0.5em;
	box-sizing: border-box;
	.top_section {
		padding: 0.5em 0;
		justify-content: space-between;
	}
	.logo {
		width: 150px;
		gap: 1em;
	}
	.menu {
		font-size: calc(12 * var(--px));
		line-height: 1.5em;
		a {
			width: auto;
			padding: 0.8em;
		}
		br {
			display: block;
		}
	}
	.login a {
		padding-left: 2em;
	}
	.head_topics {
		flex-direction: column;
		font-size: calc(10 * var(--px));
		.title {
			font-size: calc(10 * var(--px));
		}
		.count span {
			font-size: calc(14 * var(--px));
		}
	}
	.bottom_section a {
		padding: 0.5em;
	}
	.sp_menu {
		display: block;
		img {
			width: 3em;
			height: 3em;
		}
		.name {
			font-size: calc(8 * var(--px));
		}
		.open, .close {
			display: none;
			margin: 0;
			&.show {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
#page_all_wrapper {
	padding: 0;
	border-top: 7px solid #F9AE31;
	box-shadow: none;
	overflow: hidden;
}
#page_container {
	padding: 0 0.5em;
	display: block;
}
#sidebar {
	position: fixed;
	right: 0;
	transform: translateX(100%);
	top: 80px;
	height: calc(100vh - 80px);
	overflow: auto;
	transition-duration: 0.3s;
	transition-property: transform;
	box-sizing: border-box;
	padding: 10px;
	z-index: 20;
	&.open {
		transform: translateX(0);
	}
}
footer {
	margin-bottom: 6em;
	.footer_menu {
		justify-content: flex-start;
		flex-wrap: wrap;
		font-size: calc(16 * var(--px));
	}
	.copyright {
		padding: 0 1em;
	}
	#scroll_top {
		right: 10px;
		bottom: 30px;
		width: 2.5em;
		height: 2.5em;
		img {
			width: 1.7em;
			height: 1.7em;
			object-fit: contain;
			object-position: center;
		}
	}
}
body.admin-bar {
	#sidebar {
		top: calc(80px + 46px);
		height: calc(100vh - 80px - 46px);
	}
}

#archive_page {
	.post_list {
		.wrap {
			flex-direction: column;
		}
		.thumbnail {
			width: auto;
		}
	}
}

#single_page {
	.review_page_score {
		.scores {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}
	}
	.yarpp-thumbnails-horizontal {
		grid-template-columns: repeat(1, 1fr);
		width: 80%;
		margin-inline: auto;
		.yarpp-thumbnail, .yarpp-thumbnail-default {
			& > img {
				aspect-ratio: unset;
			}
		}
		.yarpp-thumbnail-title {
			text-decoration: underline;
			font-size: calc(16 * var(--px));
		}
		.yarpp-thumbnail {
			padding: 0;
			color: var(--link-color);
			&:hover {
				background-color: transparent;
				opacity: 1;
			}
		}
	}
	.review_section, .company_review_list {
		.review_group {
			font-size: calc(12 * var(--px));
		}
		p {
			margin: 0;
		}
		.button_list {
			margin-top: 1em;
			li {
				padding: 0.5em;
				font-size: calc(14 * var(--px));
			}
		}
	}
	.company_review_score {
		p {
			margin: 0;
		}
	}
}

.review_page_score {
	.post_info {
		align-items: flex-start;
	}
	.tags {
		margin-left: -3em;
	}
	.icon {
		width: 2.5em;
	}
	.average {
		display: flex;
		align-items: center;
		gap: 0.5em;
		.average_title {
			font-size: calc(18 * var(--px));
			font-weight: bold;
		}
		.star {
			font-size: calc(16 * var(--px));
		}
		.score {
			font-size: calc(18 * var(--px));
		}
	}
	.inner_wrap {
		align-items: flex-start;
	}
	.scores {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
			font-size: calc(14 * var(--px));
	}
}
main {
	h1 {
		font-size: calc(18 * var(--px));
	}
}