#page_all_wrapper {
	padding: 0 30px;
	margin: 0 auto;
	color: #333;
	max-width: 1100px;
	position: relative;
	background-color: #fff;
	border-left: solid 1px #999999;
	border-right: solid 1px #999999;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 -10px 10px 5px #ffeebb inset;
}

header {
	background-color: #fff;
	.top_section {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		margin: 0;
	}

	.menu {
		display: flex;
		gap: 0.5em;
		br {
			display: none;
		}
		p {
			margin: 0;
			text-align: center;
		}

		a {
			text-decoration: none;
			color: #fff;
			display: block;
			width: 7.5em;
			box-sizing: border-box;
			padding: 0.8em 0;
			letter-spacing: 0.1em;
		}
	}

	.login {
		a {
			background-color: #6FB230;
			background-image: url("../images/header/keyicon.png");
			background-repeat: no-repeat;
			background-position: left 0.5em center;
			box-sizing: border-box;
			padding-left: 1em;
		}
	}

	.register {
		a {
			background-color: #EB6100;
		}
	}

	.sp_menu {
		display: none;
	}

	.head_topics {
		background-color: #dda146;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(15 * var(--px));
		gap: 0.5em;
		letter-spacing: 0.1em;
		padding: 0.5em;

		p {
			margin: 0;
		}
	}

	.pr {
		font-size: calc(10 * var(--px));
	}

	.message {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;

		.title {
			font-size: calc(13 * var(--px));
		}

		.count {
			span {
				color: #0265cb;
			font-size: calc(20 * var(--px));
				margin-right: 0.2em;
			}
		}
	}

	.header_menu {
		font-size: calc(13 * var(--px));
		background-color: #fff;
		border-top: solid 2px #eee;
		border-bottom: solid 1px #ccc;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
		display: flex;
		padding: 0;
		margin: 0;
		list-style-type: none;
		li {
			flex: 1;
			margin: 0;
			border-right: solid 1px #ccc;

			&:last-of-type {
				border-right: none;
			}
		}

		a {
			padding: 1em 0;
			background-color: #FEF3D7;
			box-shadow: 0 0px 0px 2px white inset;
			display: flex;
			height: 100%;
			box-sizing: border-box;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #000;
			text-decoration: none;
			line-height: 1.5em;
			&:hover {
				background-color: #fff;
			}
		}
	}

}

#page_container {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	margin-top: 1.5em;
}

#sidebar {
	width: 290px;
	display: flex;
	flex-direction: column;
	gap: 1em;
	background-color: #fff;
	.ranking_section {
		background: none;
		border: solid 3px #9b7050;
		box-sizing: border-box;

		.image {
			margin: 0;
		}

		.text {
			margin: 1em;
		}

		.ranking_txt {
			margin-top: 0;
			line-height: 1.5em;
		}

		.ranking_btn {
			text-align: center;
			margin-bottom: 0;

			a {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 0.2em;
				color: #fff;
				text-align: center;
				padding: 0.8em;
				border-radius: 3px;
				background: linear-gradient(to bottom, #ff9800 0%, #ff5722 100%);
				text-decoration: none;

				&:before {
					content: "";
					display: block;
					width: 0.3em;
					height: 0.3em;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform: rotate(45deg) translateX(-50%) translateY(50%);
				}
			}
		}
	}
	.author_section {
		border: solid 3px #ccc;
		.section_title {
			text-align: center;
			background-color: #FEF3D7;
			border-bottom: solid 3px #ccc;
			font-size: calc(16 * var(--px));
			padding: 0.2em;
			font-weight: normal;
			margin: 0;
		}
		.wrap {
			margin: 0.4em;
			font-size: calc(13 * var(--px));
			line-height: 1.8em;
		}
		.image {
			margin-top: 0;
		}
		.name {
			text-align: center;
			margin-top: 0.5em;
		}
	}
	.sns_section {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2em;
		margin-left: 2em;
		margin-right: 2em;
		p {
			flex: 1;
			margin: 0;
		}
		a {
			position: relative;
			padding-top: 100%;
			display: block;
		}
		img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.x {
			a {
				background-color: #000;
				border-radius: 0.5em;
			}
			img {
				width: 50%;
				height: 50%;
				transform: translate(-50%, -50%);
				top: 50%;
				left: 50%;
			}
		}
	}
	.top3_section {
		background: none;
		border: solid 3px #9b7050;
		box-sizing: border-box;
		position: sticky;
		top: 118px;
		.image {
			margin: 0;
		}
		ol {
			list-style-type: none;
			padding-left: 0;
			margin: 0;
			font-size: calc(12 * var(--px));
			a, .not_af_url {
				text-decoration: none;
				padding: 1em;
				display: block;
				color: #000;
			}
			a {
				&:hover {
					background-color: #eee;
				}
			}
			li {
				border-bottom: 1px solid #ccc;
				&:nth-of-type(1) {
					.title:before {
						content: url("../images/sidebar/rank1.png");
					}
				}
				&:nth-of-type(2) {
					.title:before {
						content: url("../images/sidebar/rank2.png");
					}
				}
				&:nth-of-type(3) {
					.title:before {
						content: url("../images/sidebar/rank3.png");
					}
				}
			}
		}
		.title {
			display: flex;
			align-items: center;
			gap: 0.5em;
			margin: 0;
			color: var(--link-color);
		}
		.star {
			text-align: center;
			margin: 0.5em;
			font-size: calc(20 * var(--px));
			color: #ffcd00;
			letter-spacing: 0.2em;
		}
		.text {
			line-height: 1.8em;
			margin: 0;
		}
	}
	.sidebar_categories {
		border: solid 3px #ccc;
		border-top: none;
		font-size: calc(12 * var(--px));
		padding-left: 0;
		list-style-type: none;
		margin: 0;
		line-height: 1.5em;
		.category_name {
			background-color: #FEF3D7;
			border-top: solid 3px #ccc;
			cursor: pointer;
			margin: 0;
			display: flex;
			padding: 0.5em;
			align-items: center;
			gap: 0.5em;
		}
		.icon {
			width: 3.5em;
			height: 3.5em;
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;
			}
		}
		.name {
			flex: 1;
		}
		.posts {
			margin: 0;
			padding: 0;
			list-style-type: none;
			display: none;
			&.open {
				display: block;
			}
			&.hidden {
				display: none !important;
			}
		}
		.post {
			border-top: solid 3px #ccc;
			background-color: #fff;
			a {
				display: flex;
				padding: 1em;
				gap: 0.5em;
				min-height: 3.5em;
				align-items: center;
				transition-duration: 0.3s;
				transition-property: background-color;
				text-decoration: none;
				&:hover {
					background-color: #ffdc70;
				}
			}
		}
	}
}

body.admin-bar {
	#sidebar {
		.top3_section {
			top: 150px;
		}
	}
}

footer {
	text-align: center;
	margin-top: 3em;
	#scroll_top {
		margin: 0;
		position: fixed;
		z-index: 2;
		width: 3.5em;
		height: 3.5em;
		bottom: 20px;
		right: 50px;
		background-color: #000;
		cursor: pointer;
		display: none;
		opacity: 0.5;
		span {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
		}
	}
	.pr {
		text-align: center;
		font-size: calc(12 * var(--px));
		color: #808080;
		padding: 0 1em;
	}
	.footer_wrap {
		font-size: calc(12 * var(--px));
		border-top: solid 5px #FF6D10;
		border-bottom: solid 3px #FF6D10;
		padding: 2em 0.5em;
		margin-left: -25px;
		margin-right: -25px;
		background-color: #fff;
	}
	.footer_menu {
		display: flex;
		align-items: center;
		justify-content: center;
		list-style-type: none;
		padding: 0;
		margin: 0;
		gap: 0.5em 0;
		li {
			padding: 0 1em;
			border-right: solid 1px #ccc;
			&:last-of-type {
				border-right: none;
			}
		}
		a {
			color: #9D794B;
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 1em;
			&:hover {
				color: #5ead3c;
			}
			&:before {
				background-repeat: no-repeat;
				background-position: center;
				background-image: url("../images/footer/footer_navi_arrow.png");
				content: '';
				height: 7px;
				width: 5px;
			}
		}
	}
	.copyright {
		margin-top: 2em;
		margin-bottom: 0;
		text-align: center;
		color: #9D794B;
		line-height: 1.5em;
	}
}

main {
	flex: 1;
	min-width: 0;
	h1 {
		padding: 0.5em;
		padding-left: 1.3em;
		font-size: calc(26 * var(--px));
		border: solid 1px #bebebe;
		background-color: #FEF3D7;
		border-radius: 0.3em;
		position: relative;
		line-height: 1.8em;
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0.5em;
			border-left: 6px solid #FF950F;
			border-radius: 3px;
			height: 60%;
			transform: translateY(-50%);
		}
	}
}

#breadcrumb {
	margin: 0 1em;
	overflow: auto;
	white-space: nowrap;
	padding-bottom: 0.5em;
	color: #111;
	span {
		font-size: calc(12 * var(--px));
	}
	a {
		color: #111;
		text-decoration: none;
		position: relative;
		padding-bottom: 0.4em;
		display: inline-block;
		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid #111;
			width: 100%;
			transform: scale(0);
			transform-origin: center;
			transition: 0.3s transform;
		}
		&:hover:after {
			transform: scale(1);
		}
	}
}

#archive_page {
	.post_list {
		display: flex;
		gap: 2em;
		flex-direction: column;
		.title {
			line-height: 1.8em;
			padding: 0.5em;
			padding-left: 1.3em;
			font-size: calc(20 * var(--px));
			border: solid 1px #bebebe;
			background-color: #fff;
			border-radius: 0.3em;
			position: relative;
			&:before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0.5em;
				border-left: 6px solid #FF950F;
				border-radius: 3px;
				height: 60%;
				transform: translateY(-50%);
			}
		}
		.wrap {
			display: flex;
			gap: 1em;
		}
		.thumbnail {
			width: 200px;
		}
		.text {
			flex: 1;
			line-height: 1.8em;
		}
		.excerpt {
			margin-top: 0;
		}
		.link {
			margin-bottom: 0;
			text-align: right;
		}
	}
	.nav-links {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.5em;
		font-size: calc(20 * var(--px));
		margin-top: 2em;
		.page-numbers {
			box-sizing: border-box;
			width: 2em;
			height: 2em;
			border: 1px solid #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}
	}
	#review_search_form {
		margin-bottom: 3em;
		table, td, th {
			border: 1px solid #ccc;
		}
		table {
			border-collapse: collapse;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 0.5em;
		}
		th, td {
			padding: 0.5em;
		}
		th {
			background-color: #f7e6c5;
			text-align: left;
		}
		td {
			background-color: #f8fdf7;
		}
		button {
			font-size: 22px;
			padding: 15px 20px 10px 50px;
			background-position: 10px 17px;
			display: block;
			width: auto;
			min-width: 300px;
			cursor: pointer;
			margin: 0;
			border-radius: 7px;
			text-align: center;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			box-shadow: rgba(16, 17, 18, 0.61961) 4px 5px 7px -1px;
			background-image: url(//masa-ka.net/pascase/images/css/arrow_white.png);
			background-repeat: no-repeat;
			position: relative;
			left: 0;
			top: 0;
			transition: all ease 0.1s;
			border: none;
			background-color: #FF6633;
			margin-inline: auto;
			&:hover {
				box-shadow: rgba(16, 17, 18, 0.61961) 2px 2px 7px -1px;
				position: relative;
				left: 2px;
				top: 2px;
				opacity: 0.9;
			}
		}
	}
}
#share_sns {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-top: 3em;
	li {
		font-size: calc(14 * var(--px));
		text-align: center;
	}
	a {
		text-decoration: none;
		color: #fff;
		display: block;
		min-width: 6em;
		border-radius: 3px;
		padding: 0.5em;
		&:hover {
			opacity: 0.8;
		}
	}
	.share-x a {
		background: #000;
		box-shadow: 0 2px #333;
	}
	.share-facebook a {
		background: #3b5998;
		box-shadow: 0 2px #2d4373;
	}
	.share-hatena a {
		background: #2c6ebd;
		box-shadow: 0 2px #225694;
	}
	.share-line a {
		background: #00C300;
		box-shadow: 0 2px #009d00;
	}
}

.review_page_score {
	.helpful {
		text-align: right;
		font-size: calc(14 * var(--px));
		margin-bottom: 0.5em;
		span {
			font-size: calc(25 * var(--px));
			color: #f00;
		}
	}
	.content {
		border-radius: 1em;
		background-color: #fefdd3;
		padding: 0.5em;
		border: 1px solid #bebebe;
		gap: 0.5em;
		display: flex;
		flex-direction: column;
	}
	.post_info {
		display: flex;
		align-items: center;
		gap: 0.5em;
	}
	.icon {
		width: 3.5em;
		img {
			width: 100%;
			height: auto;
		}
	}
	p {
		margin: 0;
		padding: 0;
	}
	.post_info_wrap {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		p {
			margin: 0;
		}
	}
	.inner_wrap {
		display: flex;
		gap: 0.5em;
		align-items: center;
	}
	.username {
		white-space: nowrap;
	}
	.status {
		display: flex;
		gap: 0.5em;
		align-items: center;
		flex-wrap: wrap;
	}
	.successful, .count, .period {
		padding: 0.5em 0.5em;
		border: 2px solid;
		background-color: #fff;
		color: #2c8883;
		border-radius: 0.2em;
		line-height: 1em;
	}
	.successful {
		color: #de4747;
		border-color: #de4747;
	}
	.count, .period {
		border-color: #2C8883;
		color: #2c8883;
	}
	.tags {
		display: flex;
		gap: 0.5em;
		align-items: center;
		list-style-type: none;
		padding-left: 0;
		margin: 0;
		flex-wrap: wrap;
		li {
			&::after {
				content: '|';
				margin-left: 0.5em;
			}
			&:last-of-type::after {
				display: none;
			}
		}
	}
	.average {
		display: flex;
		align-items: center;
		gap: 0.5em;
		margin: 0;
		p {
			margin: 0;
		}
		.average_title {
			font-size: calc(20 * var(--px));
			font-weight: bold;
		}
		.star {
			color: #fad544;
			font-size: calc(24 * var(--px));
		}
		.score {
			font-size: calc(20 * var(--px));
			span {
				color: #f00;
				font-weight: bold;
			}
		}
	}
	.scores {
		display: flex;
		align-items: center;
		gap: 0.5em;
		p {
			margin: 0;
		}
		.score {
			display: flex;
			align-items: center;
			gap: 0.2em;
		}
		.score_title {
			font-weight: bold;
		}
		.star {
			color: #fad544;
		}
	}
	.excerpt {
		margin-top: 1em;
		line-height: 1.8em;
		margin: 0;
	}
}