.wf-sawarabigothic {
	font-family: "Sawarabi Gothic";
}

body{
	background: #dce7ef;
	margin: 0;
}

#contents {
	overflow: hidden;
}

#contents .contents-wrap:not(:root){
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-size: 17px;
	letter-spacing: .4px;
	line-height: 2 !important;
	margin: 0 auto 30px;
}

.main{
	max-width: 840px;
	margin: 14px auto 0;
	padding: 32px 60px 40px;
	background: #fff;
	box-shadow: 0 2px 4px rgb(98 109 104 / 16%);
	position: relative;
}

.main strong{
	font-size: 110%;
}

.contents-wrap mark{
	background: linear-gradient(transparent 70%, #d6dcf5 70%);
	background: -webkit-linear-gradient(transparent 70%, #d6dcf5 70%);
	padding-bottom: 0;
	padding-top: 0;
	font-weight: 700;
	font-size: 110%;
}

.text {
    margin: 0.8em;
    font-size: medium;
		line-height: 1.8em;
	}
	
.post-header-tag{
	background: #e3f5f1;
	padding: 0px 20px 0px 20px;
	color: #428bca;
	font-weight: 700;
	font-size: 16px;
	line-height: 32px;
	z-index: 2;
	position: relative;
	margin-left: 25px;
	display: inline-block;
}
.post-header-tag::before{
	content: '\f521';
	font-family: "Font Awesome 5 Free";
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #428bca;
	border-radius: 35px;
	position: absolute;
	width: 39px;
	height: 39px;
	line-height: 37px;
	text-align: center;
	left: -25px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	border-bottom: 3px solid #428bcab;
}
.post-header-tag::after {
	content: '';
	top: 0;
	right: 0;
	border-width: 16px 10px 16px 0px;
	border-color: transparent #fff transparent transparent;
	border-style: solid;
	position: absolute;
}
.post-header h2{
	padding: 20px 0px;
	position: relative;
	font-size: 28px;
	margin: 0;
	z-index: 1;
	font-weight: 700;
	line-height: 1.7;
	margin-top: -1px;
}
.post-header h2 .fadeIn{
  animation-name: fadeIn;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  opacity: 0;
	display: block;
}

.date, .date-list{
	margin-bottom: 1em;
	color: #999;
	font-size: 16px;
	font-weight: 700;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	list-style: none;
	line-height: 1.5;
}
.date li, .date-list li{
	display: inline-block;
	margin-right: 10px;
}
.date i{
	margin-right: 4px;
	/* color: #758cce; */
	font-size: 15px;
}
.date-list li:first-child::before{
	content: '\f017';
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	margin-right: 4px;
	font-size: 15px;
}
.date-list li:nth-child(2)::before{
	content: '\f2f1';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 4px;
	font-size: 15px;
}

.sub-head{
	margin: 3em 0 1.8em;
	padding: 18px 20px;
	border-left: 5px solid #4ec078;
	border-bottom: solid 3px #dadada;
	font-weight: bold;
	background-color: #f7f7f7;
	line-height: 1.6;
	font-size: 24px;
}
.update-head{
	margin: 3em 0 1em;
	padding: 6px 12px;
	font-size: 22px;
	border-left: 5px solid #428bca;
}

.main .asterisk{
	font-size: small;
	margin: 5px 0 0;
}

.update-list{
	list-style: none;
	font-size: 15px;
	border-bottom: 1px solid #eee;
	padding-left: 0;
	padding-bottom: 20px;
	margin-left: 10px;
	line-height: initial;
	/* font-weight: 700; */
}

.update-list:not(:last-child){
	margin-bottom: 20px;
}

.update-list:nth-child(odd){
	border-bottom: 1px solid #808080;
}

.update-date{
	font-size: 14px;
	color: #999;
}
.update-date, .update-label{
	display: inline-block;
}
.update-label{
	background: #e3f5f1;
	color: #428bca;
	padding: 2px 8px;
	border-radius: 30px;
	font-size: 13px;
	margin: 0 2px;
	line-height: 1.4;
	border: 2px solid;
}

.update-label {
	background: #e3f5f1;
	color: #428bca;
	padding: 2px 8px;
	border-radius: 30px;
	font-size: 13px;
	margin: 0 2px;
	line-height: 1.4;
	border: 2px solid;
}

.update-date i{
	margin-right: 4px;
}
.update-title{
	margin-top: 0.2em;
}

.past-btn a{
	position: relative;
}
.past-btn a::before{
	content: "";
	position: absolute;
	top: 50%;
	left: -14px;
	width: 8px;
	height: 8px;
	border: 2px solid;
	border-color: #428bca #428bca transparent transparent;
	transform: translateY(-50%)rotate(45deg);
	-moz-transform: translateY(-50%)rotate(45deg);
	-webkit-transform: translateY(-50%)rotate(45deg);
}
.purple-cr{
	color: #7c95dc;
}

a:hover {
				text-decoration:none;
			}
			.top10 {
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 10px;
			}
			.subtitle {
				color:#221816;
				line-height: 1.4;
			}
			.ranking-btn {
				text-align: center;
			}
			.rank-icon {
				font-weight: 700;
				margin:  5px 0 0;
				padding:10px;
				color: #fff;
				text-align: center;
				border-radius: 50%;
				box-shadow: 3px 3px 4px #555;
			}
			.rank-icon-1 {
				background: #dbb400;
				font-size: x-large;
			}
			.rank-icon-2 {
				background: #9fa0a0;
				font-size: x-large;
			}
			.rank-icon-3 {
				background: #c47022;
				font-size: x-large;
			}
			.rank-icon-4 {
				background:  #b0c4de;
				font-size: x-large;
			}
			.rank-icon-over-5 {
				background: #b0c4de;
				font-size: small;
			}
			.ranking-card {
				transition-duration: 0.4s;	/*変化に掛かる時間*/
				box-shadow         : 0px 0px 6px 1px #dddcd6;
				border-radius      : 6px;
				padding            : 0.8em !important;
				margin-bottom      : 20px;
			}
			.ranking-card:hover {
				transform: scale(1.05);	/*画像の拡大率*/
				transition-duration: 0.4s;	/*変化に掛かる時間*/
			}
			.ranking-section {
				margin-top: 2em;
			}
			.ranking-section .container {
				width:87%;
			}
			.book-face-img {
				box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.4);
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.ranking-row {
				display: flex;
				flex-wrap: wrap;
			}
			.series-title {
				color: black;
				margin-bottom: 0;
			}
			.book-title {
				margin-top: 0;
			}


@media (min-width: 461px){
	.main{
		border-radius: 12px;
	}
	.title h1 {
    border-radius: 0 0 12px 12px;
}
}
@media (max-width: 767px){
	.title h1{
		padding: 0;
    background: #4ec078;
}
	.title h1 img{
		max-width: 240px;
    width: 62vw;
	}
	}
}
@media (max-width: 640px){
.main{
		padding: 32px 20px 40px;
	}
.post-header h2 {
    font-size: 20px;
}
.post-header-tag {
    font-size: 14px;
		background: #e3f5f1;
		padding: 0px 16px 0px 16px;
    line-height: 28px;
}
.post-header-tag::before {
		width: 35px;
    height: 35px;
    line-height: 33px;
}
.post-header-tag::after {
    border-width: 14px 10px 14px 0px;
}
.date{
		font-size: 15px;
}
.date li{
		margin-right: 5px;
}
.date i{
	font-size: 14px;
}
.sub-head{
    font-size: 20px;
}
}
@media (max-width: 460px){
	#contents{
		padding: 0;
	}
	#contents .col-xs-12{
		padding: 0;
	}
	.main{
		padding: 28px 16px;
			margin: 10px auto;
	}
.main p, .main ul, .main ol {
    font-size: 15px;
}
}
@media (max-width: 360px){
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
		-moz-transition: rotate(6px);
		-webkit-transition: rotate(6px);
	}
  to {
    opacity: 1;
    transform: translateY(0px);
		-moz-transition: translateY(0px);
		-webkit-transition: translateY(0px);
	} }