/****************************
	* レイアウト・全体
	****************************/
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		font-family: "Noto Serif JP", serif;
		font-weight: 500;
		font-style: normal;
		font-size: 62.5%;
		line-height: 170%;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		letter-spacing: 1px;
		background-color: #000;
	}

	body {
		font-size: 1.7rem;
		line-height: 180%;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		letter-spacing: 1px;
		color: #fff;
		background-color: #000;
		overflow-x: hidden;
	}

	a:link {
		transition: 0.5s;
	}

	.pc_only {
		display: block;
	}

	.sp_only {
		display: none;
	}

	aside {
		font-size: 1.7rem;
	}

	figure {
		margin: 0;
		padding: 0;
	}

	img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		pointer-events: none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
	}

	.wrap {
		position: relative;
		max-width: 1100px;
		width: 100%;
		padding: 0 20px;
		margin: 0px auto 0px;
		text-align: center;
	}

	@media screen and (max-width: 768px) {
		.pc_only {
			display: none;
		}

		.sp_only {
			display: inline-block;
		}

	}

	/****************************
	* ヘッダー
	****************************/
	header
	{
		width: 100%;
		padding:70px 0 30px;
	}
	header figure.main_img
	{
		max-width: 880px;
		margin: 0 auto ;
	}
	header h1
	{
		width: 100%;
		margin: 70px auto 0px;
		padding:40px 0;
		background-image: linear-gradient(57deg, #b3b3b3, #4d4d4d);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header h1 img
	{
		display: block;
		max-width:800px;
	}
	@media screen and (max-width: 768px)
	{
		header
		{
			width: 100%;
			padding:0px 0 0px;
		}
		header h1
		{
			width: 100%;
			margin: 0px auto 0px;
			padding:25px 30px;
		}
	}

	/****************************
	* フッター
	****************************/
	footer {
		font-size: 1rem;
		position: relative;
		z-index: 1;
		height: 50px;
		padding: 5px 0;
		text-align: center;
		color: #fff;
		background: #000;
	}


	/****************************
	* read, bookinfo
	****************************/
	.read
	{
		margin: 50px auto 0;
		padding: 20px 0;
	}
	.read .sale_info
	{
		width: fit-content;
		margin: 0 auto;
		line-height: 1.8;
		letter-spacing: 0.15em;
	}
	.read .sale_info p
	{
		padding:20px 30px;
		border: 1px solid #ccc;
		font-size: 2.3rem;
		text-align: left;
	}
	.read .sale_info strong
	{
		font-weight: 700;
		font-size:1.1em;
		color:#ffff33;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 5px;
	}
	.read .sale_info aside
	{
		font-size:2rem;
		margin-top:5px;
		text-align: right;
	}
	@media screen and (max-width: 768px)
	{
		.read
		{
			margin: 20px auto 0;
			padding: 10px 0;
		}
		.read .sale_info
		{
			letter-spacing: 0.1em;
		}
		.read .sale_info p
		{
			font-size: 1.5rem;
			padding:10px 10px;
		}
		.read .sale_info aside
		{
			font-size:1.3rem;
		}
	}
	.read .sale_info2
	{
		margin-top:20px;
	}
	.read .sale_info2 p
	{
		font-size: 2rem;
		text-align: center;
		line-height: 2;
	}
	.read .sale_info2 p span
	{
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 5px;
	}
	.read .sale_info2 p strong
	{
		font-weight: 700;
		font-size:1.2em;
		color:#ffff33;
		text-decoration: underline;
		text-decoration-style: double;
		text-decoration-thickness: 1px;
		text-underline-offset: 8px;
	}
	.read .sale_info2 p strong b
	{
		font-size:1.2em;
		color:#ffff33;
	}
	.read .sale_info2 aside
	{
		font-size:1.2em;
		font-weight: 600;
	}
	@media screen and (max-width: 768px)
	{
		.read .sale_info2 p
		{
			font-size: 1.5rem;
		}
		.read .sale_info2 aside
		{
			font-size:1rem;
		}
	}

	.bookinfo
	{
		margin-top:30px;
		padding-bottom:100px;
		text-align: left;
	}
	.bookinfo .flex_wrap
	{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 50px;
		flex-wrap: wrap;
	}
	.bookinfo .flex_wrap figure
	{
		max-width: 200px;
		width: 100%;
	}
	.bookinfo .flex_wrap .info_txt
	{
		max-width: 700px;
		text-align: left;
	}
	.bookinfo .flex_wrap .info_txt h4
	{
		letter-spacing: 0.2em;
	}
	.bookinfo .flex_wrap .info_txt h3
	{
		margin-top:16px;
		font-size: 2.8rem;
		letter-spacing: 0.2em;
		margin-left:-0.5em;
		margin-bottom: 16px;
	}
	.bookinfo .flex_wrap .info_txt dl
	{
		display: flex;
		gap:0em;
		margin:0 0 8px 0;
		padding:0;
	}
	.bookinfo .flex_wrap .info_txt dt
	{
		flex-shrink: 0;
		width: 4em;
		white-space: nowrap;
	}
	.bookinfo .flex_wrap .info_txt dt::after
	{
		content: "：";
	}
	.bookinfo .flex_wrap .info_txt dd
	{
		flex-grow: 1;
	}
	@media screen and (max-width: 768px)
	{
		.bookinfo
		{
			margin-top:20px;
			padding-bottom:50px;
		}
		.bookinfo .flex_wrap
		{
			gap: 10px;
		}
		.bookinfo .flex_wrap .info_txt h4
		{
			letter-spacing: 0.1em;
			text-align: center;
		}
		.bookinfo .flex_wrap .info_txt h3
		{
			text-align: center;
			font-size: 2.8rem;
			letter-spacing: 0.1em;
		}
		.bookinfo .flex_wrap .info_txt dl
		{
			font-size: 1.3rem;
			margin:0 0 0px 0;
		}
		.bookinfo .flex_wrap .info_txt dt
		{
			flex-shrink: 0;
			width: 3em;
			white-space: nowrap;
		}
	}
	.bookinfo .btn_wrap
	{
		width: 100%;
		max-width: 800px;
		margin-top: 50px;
		margin-inline: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 50px;
	}
	.bookinfo .btn_wrap div
	{
		width: calc((100% - 50px) / 2);
	}
	.bookinfo .btn_wrap div a
	{
		display: block;
		width: 100%;
		padding:10px;
		text-align: center;
		background-color: #4d4d4d;
		font-weight: 900;
		color:#fff;
		font-size: 1.8rem;
		transition: 0.3s;
		white-space: nowrap;
		margin-bottom: 5px;
	}
	.bookinfo .btn_wrap div a:hover
	{
		text-decoration: none;
		opacity: 0.6;
	}
	.bookinfo .btn_wrap div a::after
	{
		content: ">>";
		font-weight: 900;
		font-size: 2rem;
		margin-left: 4px;
		letter-spacing: -0.1em;
	}

	.bookinfo .btn_wrap + div aside
	{
		font-size: 2rem;
		color:#fff;
		margin-top:16px;
		text-decoration: underline;
		text-underline-offset: 5px;
	}
	@media screen and (max-width: 768px)
	{
		.bookinfo .btn_wrap
		{
			width: 100%;
			margin-top: 30px;
			flex-direction: column;
			gap: 20px;
		}
		.bookinfo .btn_wrap div
		{
			width: 90%;
		}
		.bookinfo .btn_wrap div a
		{
			font-size: 1.5rem;
			line-height: 1.3;
		}
		.bookinfo .btn_wrap div a + aside
		{
			font-size: 1.3rem;
			line-height: 1.3;
		}
		.bookinfo .btn_wrap + div aside
		{
			font-size: 1.3rem;
		}
	}

	.point
	{
		margin-top:30px;
		padding-bottom:80px;
	}
	.point .wrap
	{
		width: 100%;
		max-width: 1000px;
		text-align: left;
	}
	.point .left
	{
		margin-bottom:80px;
	}
	.point .right
	{
		margin-bottom:80px;
	}
	.point .bottom
	{
		margin-left:15%;
		margin-bottom:50px;
		padding-bottom:8px;
		border-bottom: 2px solid #fff;
	}
	@media screen and (max-width: 768px)
	{
		.point
		{
			margin-top:10px;
			padding-bottom:50px;
		}
		.point .left
		{
			margin-bottom:30px;
		}
		.point .right
		{
			margin-bottom:30px;
		}
		.point .bottom
		{
			width: 90%;
			margin:0 auto 20px;
			line-height: 1.3;
			text-align: center;
		}
	}
	.point .wrap h3
	{
		display: flex;
		flex-direction: column;
		width: 70%;
		padding:20px 50px 25px 0px;
		background-color: #818181;
		margin-bottom:30px;
		position: relative;
		z-index: 1;
	}
	.point .wrap h3::after
	{
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background-color: #818181;
		z-index: 0;
	}
	.point .right .wrap h3
	{
		padding:20px 0px 25px 50px;
		margin-left:30%;
	}
	.point .right .wrap h3::after
	{
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		background-color: #818181;
		z-index: 0;
	}
	.point .wrap h3 span
	{
		display:block;
		font-size: 2.5rem;
		margin-bottom:0.5em;
	}
	.point .wrap h3 p
	{
		display:block;
		font-size: 3.5rem;
		margin-left:30%;
	}
	.point .right .wrap h3 p
	{
		display:block;
		font-size: 3.5rem;
		margin-left:5%;
	}
	.point .wrap > p
	{
		padding:0 0 0 20px;
		border-left:2px solid #fff;
	}
	.point .right .wrap > p
	{
		margin-left:30%;
	}
	@media screen and (max-width: 768px)
	{
		.point .wrap h3
		{
			width: 100%;
			margin-left:0;
			padding:10px 20px;
			margin-bottom:20px;
		}
		.point .wrap h3::after
		{
			content: none;
		}
		.point .right .wrap h3
		{
			padding:10px 20px;
			margin-left:0;
			margin-bottom:20px;
		}
		.point .right .wrap h3::after
		{
			content: none;
		}

		.point .wrap h3 span
		{
			display:block;
			font-size: 1.5rem;
			margin-bottom:0.1em;
		}
		.point .wrap h3 p
		{
			display:block;
			font-size: 2rem;
			margin-left:0;
		}
		.point .right .wrap h3 p
		{
			display:block;
			font-size: 2rem;
			margin-left:0;
		}
		.point .wrap > p
		{
			padding:0 0 0 20px;
			border-left:2px solid #fff;
			font-size:1.4rem;
			line-height:1.7;
		}
		.point .right .wrap > p
		{
			margin-left:0;
			font-size:1.4rem;
		}
	}

	.comment .wrap
	{
		margin: 0 auto 50px;
		padding: 40px 50px;
		width: 100%;
		max-width: 900px;
		text-align: left;
		border: 1px solid #fff;
		outline-offset: 7px;
		outline:1px solid #fff;
		background-image: linear-gradient(197deg, #979797, #3a3a3a);
		position: relative;
	}
	.comment .wrap::after
	{
		content: "";
		position: absolute;
		top: -15px;
		left: -15px;
		width: calc(100% + 30px);
		height: calc(100% + 30px);
		border: 1px solid #fff;
		z-index: 1;
	}
	.comment .wrap h3
	{
		font-size: 2.5rem;
		margin-bottom:20px;
	}
	.comment .wrap p
	{
		font-size: 1.5rem;
		line-height: 2.3;
	}
	@media screen and (max-width: 768px)
	{
		.comment .wrap
		{
			padding:20px 30px;
			margin: 0 auto 30px;
			outline-offset: 5px;
		}
		.comment .wrap::after
		{
			content: none;
		}
		.comment .wrap h3
		{
			font-size: 1.6rem;
			margin-bottom:8px;
		}
		.comment .wrap p
		{
			font-size: 1.3rem;
			line-height: 2;
		}
	}