#single_page {
	.date {
		display: flex;
		align-items: center;
		font-size: calc(12 * var(--px));
		margin-left: 1em;
		gap: 0.5em;
		&.modified:before {
			width: 1em;
			height: 1em;
			content: '';
			background-image: url("../images/single/loop2.svg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}
	}
	.author {
		line-height: 1.7em;
		margin: 1em 0 3em;
		font-size: calc(14 * var(--px));
		padding: 0.5em 1em;
		color: #222;
		border: 2px solid #D2BB90;
		border-radius: 0.5em;
		display: flex;
		gap: 0.5em;
		align-items: center;
		.image {
			border-radius: 50%;
			box-shadow: 0px 0px 3px #ebebeb;
			border: 3px solid #ccc;
			width: 3.5em;
			height: 3.5em;
			margin: 0;
			overflow: hidden;
		}
		.profile {
			margin: 0;
			flex: 1;
		}
	}
	#single_bottom {
		margin-top: 3em;
	}
	.company_review_score {
		br, span {
			margin: 0;
			line-height: 1em;
		}
		p {
			margin: 0;
			line-height: 1.2em;
		}
		.average {
			background-color: #DFEFFB;
			padding: 0.5em;
			padding-left: 2em;
			position: relative;
			&:before {
				content: '';
				width: 4em;
				height: 4em;
				background-image: url("../images/single/star_hyouka.webp");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.wrap {
				border: 1px solid #000;
				background-color: #fff;
				padding: 0.2em 0.5em;
				padding-left: 1.2em;
				display: flex;
				align-items: center;
				font-size: calc(21 * var(--px));
				gap: 0.5em;
			}
			.score {
				display: flex;
				align-items: center;
				gap: 0.5em;
				span {
					color: #c30e23;
					font-size: calc(48 * var(--px));
				}
			}
		}
		.satisfaction, .correction, .agent, .join, .count {
			display: flex;
			align-items: center;
			gap: 0.5em;
			padding: 0.5em 0;
			border-bottom: 1px dotted #000;
			font-size: calc(14 * var(--px));
			&:before {
				content: '';
				width: 9px;
				height: 9px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
			}
			.title {
				width: 7em;
			}
		}
		.satisfaction {
			&:before {
				background-image: url("../images/single/ecalic_pink.png");
			}
		}
		.correction {
			&:before {
				background-image: url("../images/single/ecalic_green.png");
			}
		}
		.agent {
			&:before {
				background-image: url("../images/single/ecalic_blue.png");
			}
		}
		.join {
			&:before {
				background-image: url("../images/single/ecalic_orange.png");
			}
		}
		.count {
			&:before {
				background-image: url("../images/single/ecalic_orange.png");
			}
		}
		.star {
			display: flex;
			img {
				width: 1.2em;
				height: 1.2em;
			}
		}
	}
	.review_embed {
		padding: 2em;
		margin: 1em 0;
		background-color: #fffeeb;
		&.poor {
			background-color: #fff;
			background: repeating-linear-gradient(-45deg, #e2fffc, rgba(226, 255, 252, 0) 3px, rgba(226, 255, 252, 0.6) 3px, #e2fffc 7px);
		}
		.title-wrap {
			display: flex;
			align-items: center;
			gap: 0.5em;
		}
		.icon {
			width: 3em;
			height: 3em;
			margin: 0;
		}
		.review-title {
			margin: 0;
			font-size: calc(20 * var(--px));
		}
		.categories {
			display: flex;
			flex-wrap: wrap;
			p {
				&:after {
					content: '/';
				}
				&:last-of-type:after {
					display: none;
				}
			}
		}
		.score {
			display: flex;
			align-items: center;
			justify-content: space-between;
			p {
				margin: 0;
			}
		}
		.total {
			span {
				color: #c30e23;
			}
		}
		.stars {
			display: flex;
			align-items: center;
			gap: 1em;
			> div {
				display: flex;
				align-items: center;
			}
		}
		.star {
			display: flex;
			align-items: center;
			img {
				width: 1em;
				height: 1em;
			}
		}
		.link {
			margin-bottom: 0;
		}
		.excerpt {
			line-height: 1.8em;
			margin-top: 1em;
		}
	}
	.afe {
		color: #808080;
		font-size: calc(14 * var(--px));
	}
	.review_page_score {
		margin-bottom: 2em;
	}
	.arrow_button {
		text-align: center;
		margin-top: 3em;
		margin-bottom: 3em;
		a {
			font-size: calc(22 * var(--px));
			padding: 0.8em 0.5em;
			display: inline-flex;
			gap: 0.5em;
			align-items: center;
			border-radius: 0.3em;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			box-shadow: 0.2em 0.2em 0.2em 0 rgba(16, 17, 18, 0.61961);
			transition: all ease 0.1s;
			background-color: var(--pascase-orange);
			&::before {
				width: 1.5em;
				height: 1.5em;
				content: '';
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				background-image: url("../images/single/arrow_white.png");
			}
			&:hover {
				transform: translate(0.2em, 0.2em);
				box-shadow: 0 0 0.2em 0 rgba(16, 17, 18, 0.61961);
				opacity: 0.9;
			}
		}
	}
	.user_helpful {
		.wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.count {
			font-weight: bold;
			span {
				font-size: calc(24 * var(--px));
				color: #f00;
			}
		}
		button {
			display: block;
			font-weight: normal;
			color: #006699;
			font-weight: bold;
			border: solid 1px #006699;
			background: linear-gradient(#F0FBFD, #BED6FB);
			border-radius: 0.5em;
			padding: 0.5em 1em;
			box-shadow: 0.1em 0.1em 0.3em 0 rgba(0, 0, 0, 0.4);
			cursor: pointer;
			transition: all ease 0.1s;
			&:hover {
				transform: translate(0.1em, 0.1em);
				box-shadow: 0 0 0.3em 0 rgba(0,0,0,0.4);
				opacity: 0.9;
			}
			&.pressed {
				transform: translate(0.1em, 0.1em);
				box-shadow: 0 0 0.3em 0 rgba(0,0,0,0.4);
				filter: grayscale(100%);
				opacity: 0.6;
			}
		}
	}
	.company_review_list {
		font-size: calc(16 * var(--px));
		.sort_buttons {
			display: flex;
			align-items: center;
			gap: 0.5em;
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5em;
				list-style-type: none;
				padding-left: 0;
				li {
					cursor: pointer;
					position: relative;
					padding: 0.25em 0.5em;
					text-decoration: none;
					color: #FFF;
					background-color: #fd9535;
					border-radius: 0.25em;
					box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
					border: solid 2px #d27d00;
					&:hover {
						opacity: 0.8;
					}
				}
			}
			.sort_title {
				margin: 0;
			}
		}
		.review_list {
			.review_group {
				display: none;
				&.open {
					display: block;
				}
			}
		}
	}
	.review_section {
		font-size: calc(16 * var(--px));
		.button_list {
			display: flex;
			margin-left: 10px;
			list-style-type: none;
			padding-left: 0;
			li {
				margin: 0;
				margin-right: 10px;
				max-width: 100px;
				text-align: center !important;
				cursor: pointer;
				background-color: #fff;
				color: #1972b1;
				border: 1px solid #1972b1;
				font-weight: bold;
				border-radius: 5px;
				padding: 5px 0;
				@media screen and (max-width: 320px) {
					font-size: 12px !important;
				}
				@media screen and (min-width: 425px) {
					width: 100%;
				}
				&.open {
					cursor: auto;
					color: #fff;
					position: relative;
					background-color: #f63;
					border-color: #f63;
					&:after {
						content: '';
						width: calc(100% + 2px);
						top: calc(100% - 5px);
						left: -1px;
						height: 2em;
						display: block;
						position: absolute;
						background-color: #f63;
					}
				}
			}
		}
		.review_group {
			display: none;
			border: 2px solid #f00;
			padding: 5px;
			margin-top: 1em;
			border-radius: 10px;
			&.open {
				display: block;
			}
		}
		.review_list {
			position: relative;
			background-color: #fffeeb;
		}
	}
	.rating_graph {
		dl {
			font-size: calc(13 * var(--px));
			max-width: 320px;
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 0.5em;
		}
		.item {
			display: flex;
			gap: 0.5em;
		}
		dt {
			padding: 0;
		}
		dd {
			padding: 0;
			flex: 1;
			margin-left: 0;
			display: flex;
			gap: 0.5em;
		}
		.bar {
			flex: 1;
			height: 1.1rem;
			border-radius: 1px;
			box-shadow: inset 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);
		}
		.meter {
			display: block;
			border-radius: 1px;
			background: linear-gradient(to bottom,#ffce00,#ffa700);
			height: 100%;
			box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.05);
		}
		.percent {
			width: 4em;
		}
	}
	.single_bottom {
		text-decoration: none;
		color: #333;
		display: block;
		padding: 0.7em;
		border-radius: 0.7em;
		border: solid 5px #F0EBE8;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
		margin-top: 3em;
		.point_box2 {
			h2 {
				font-size: calc(18 * var(--px)) !important;
				padding: 0;
				border: none;
				background-color: transparent;
				display: flex;
				gap: 0.5em;
				align-items: center;
				margin: 1em 0;
				&:first-child {
					margin-top: 0;
				}
				&:before {
					content: '';
					position: static;
					transform: none;
					background-image: url("../images/widget/leaf.svg");
					width: 1.6em;
					height: 1.6em;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					border: none;
				}
			}
			p {
				margin: 1em 0;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	.yarpp-thumbnails-horizontal {
		display: grid;
		gap: 0;
		grid-template-columns: repeat(3, 1fr);
		margin-top: 1.5em;
		.yarpp-thumbnail, .yarpp-thumbnail-default {
			width: auto;
			height: auto;
			margin: 0;
			border: none;
		}
		.yarpp-thumbnail {
			padding: 0.7em;
			transition-property: all;
			transition-duration: 0.3s;
			color: #000;
			&:hover {
				background-color: #eee;
				opacity: 0.7;
				color: var(--link-color);
				&:after {
					color: var(--link-color);
				}
				.yarpp-thumbnail-title {
					text-decoration: underline;
				}
			}
			&:after {
				content: '⇒　詳細はコチラ';
				text-align: right;
				font-size: calc(13 * var(--px));
				display: block;
				margin-top: 0.5em;
				font-weight: normal;
			}
		}
		.yarpp-thumbnail, .yarpp-thumbnail-default {
			& > img {
				min-height: 0;
				min-width: 0;
				width: 100%;
				height: auto;
				aspect-ratio: 1 / 1;
				object-fit: cover;
				object-position: center;
			}
		}
		.yarpp-thumbnail-title {
			width: auto;
			margin: 0;
			font-size: calc(20 * var(--px));
			margin-top: 0.5em;
			max-height: none;
			line-height: 1.5em;
		}
	}

}