@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : original.css
Description : 原作
===================================================================== */
.original {
	padding: calc(120 / 750 * 100%) 0 calc(260 / 750 * 100%);
}

.original .inner {
	z-index: 1;
}

.original_img {
	margin-bottom: calc(30 / 630 * 100%);
}

.original_img::before,
.original_img::after {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco1.png) no-repeat center/contain;
	width: calc(129 / 650 * 100%);
	padding-top: calc(127 / 650 * 100%);
}

.original_img::before {
	top: 0;
	left: 0;
	margin: calc(-50 / 650 * 100%) 0 0 calc(-50 / 650 * 100%);
}

.original_img::after {
	bottom: 0;
	right: 0;
	margin: 0 calc(-50 / 650 * 100%) calc(-50 / 650 * 100%) 0;
	z-index: -1;
}

.original_img_wrap::before {
	content: '';
	position: absolute;
	background: url(../images/deco/img_deco3.png) no-repeat center/contain;
	top: 0;
	left: 0;
	width: calc(148 / 650 * 100%);
	padding-top: calc(286 / 650 * 100%);
	z-index: 1;
	margin: calc(-130 / 650 * 100%) 0 0 calc(-110 / 650 * 100%);
}

.original_img_wrap::after {
	content: '';
	position: absolute;
	background: url(../images/deco/img_deco4.png) no-repeat center/contain;
	bottom: 0;
	right: 0;
	width: calc(228 / 650 * 100%);
	padding-top: calc(201 / 650 * 100%);
	z-index: 1;
	margin: 0 calc(-105 / 650 * 100%) calc(-172 / 650 * 100%) 0;
	-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
}

.original_txt {
	text-align: center;
	margin-bottom: calc(50 / 650 * 100%);
}

.original_ttl {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 4rem;
	color: #9b200c;
}

.original_author {
	line-height: 1;
}

.original_book {}

.original_comment_ttl {
	text-align: center;
	color: #9b200c;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 3.4rem;
	margin-bottom: 1em;
}

.original_comment_ttl::before,
.original_comment_ttl::after {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco2.png) no-repeat center/contain;
	width: calc(39 / 650 * 100%);
	padding-top: calc(26 / 650 * 100%);
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.original_comment_ttl::before {
	left: 0;
	margin-left: calc(30 / 650 * 100%);
}

.original_comment_ttl::after {
	right: 0;
	margin-right: calc(30 / 650 * 100%);
}

.original_comment_list > * {
	margin-bottom: 1.5em;
	padding-left: 1.7em;
}

.original_comment_list dt {
	color: #9b200c;
	font-weight: 700;
}

.original_comment_list dt::before {
	content: 'Q';
	position: absolute;
	top: 0;
	left: 0;
}

.original_site {
	margin: calc(70 / 650 * 100%) auto 0;
}


@media screen and (min-width: 768px) {

	.original {
		padding: calc(120 / 1200 * 100%) 0 calc(210 / 1200 * 100%);
	}

	.original_img {
		width: calc(600 / 1000 * 100%);
		margin: 0 auto calc(30 / 1000 * 100%);
	}

	.original_img::before,
	.original_img::after {
		width: calc(129 / 600 * 100%);
		padding-top: calc(127 / 600 * 100%);
	}

	.original_img::before {
		margin: calc(-50 / 600 * 100%) 0 0 calc(-51 / 600 * 100%);
	}

	.original_img::after {
		margin: 0 calc(-51 / 600 * 100%) calc(-50 / 600 * 100%) 0;
	}

	.original_img_wrap::after {
		width: calc(152 / 600 * 100%);
		padding-top: calc(134 / 600 * 100%);
		margin: 0 calc(-115 / 600 * 100%) calc(-88 / 600 * 100%) 0;
	}

	.original_txt {
		margin-bottom: calc(55 / 1000 * 100%);
	}

	.original_ttl {
		font-size: 2.8rem;
		margin-bottom: .2em;
	}

	.original_author,
	.original_book {
		font-size: 1.8rem;
		line-height: 1.6;
	}

	.original_comment {
		width: calc(800 / 1000 * 100%);
		margin: 0 auto;
	}

	.original_comment_ttl {
		font-size: 2.4rem;
	}

	.original_comment_ttl::before,
	.original_comment_ttl::after {
		width: calc(24 / 800 * 100%);
		padding-top: calc(16 / 800 * 100%);
	}

	.original_comment_ttl::before {
		margin-left: calc(190 / 800 * 100%);
	}

	.original_comment_ttl::after {
		margin-right: calc(190 / 800 * 100%);
	}

	.original_comment_list > * {
		margin-bottom: 1.2em;
		padding-left: 2em;
	}

	.original_site {
		margin-top: calc(48/ 1000 * 100%) !important;
	}

}

@media screen and (min-width: 1200px) {

	.original {
		padding: 120px 0 210px;
	}
}