.hidden-xs.col-sm-2.col-md-3{
	padding-right: 30px;
}
.col-xs-12.col-sm-10.col-md-9.pull-right{
	background: #FFF9F2;
}

#contents{
	padding-left: 0;
	padding-right: 0;
}

.contents-wrap{
	max-width: 900px;
	background: #f7f3e8 url(/rnote/kiko_mezashita/images/note-bg.png) repeat-y;
	background-position: right;
	padding: 200px 60px 40px 40px;
	margin: -170px 0 40px;
}

.contents-wrap p:not(:root){
	font-family: "Times New Roman",Times,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
	line-height: 1.9;
	text-indent: 1em;
}

.header h1{
	position: relative;
	left: -34px;
	margin: 0 0 0 40px;
	max-width: 880px;
}

.header h1 .intro{
	background: url(/rnote/kiko_mezashita/images/intro-bg.png) no-repeat;
	background-size: cover;
	padding: 10px 25px;
	position: absolute;
	color: #fff;
	width: 64%;
	margin: 0;
	line-height: 1.4;
	left: 5%;
	top: 84%;
	text-indent: 0;
	font-size: 14px;
}
.header h1 .intro.part2{
	background: url(/rnote/kiko_mezashita/images/intro-bg-part2.png) no-repeat;
	background-size: cover;
}

.head2{
	font-family: "Times New Roman",Times,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
	display: grid;
	align-items: flex-end;
	grid-template-columns: 56px auto;
	font-size: 40px;
	gap: 6px;
	margin-left: -70px;
	margin-bottom: 30px;
	margin-top: 30px;
}
.head2 span{
	background: url(/rnote/kiko_mezashita/images/head2-border.png) repeat-x;
	background-position: bottom;
	padding-bottom: 2px;
	line-height: 1.4;
}
.head2 .visible-sp{
	display: none;
}

div.webcontents ul li{
	font-size: 12px;
}
.top_box a:visited{
	color: #428bca;
}

.contents-wrap p.separate{
	color: #5894CF;
	text-align: center;
	font-size: 10px;
	margin: 1.4em 0;
}
.contents-wrap p.separate.part2{
	color: #339092;
}

span.tips {
  cursor: pointer;
}
.tips sup{
	text-decoration: underline;
	margin-right: 2px;
}
.tips sup:hover{
	text-decoration: none;
}
.annotation{
	color: #C04D56;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	letter-spacing: 2px;
}
.popover.bottom{
	max-width: 450px;
}

.illust{
	float: right;
	padding: 0 0 20px 20px;
	width: 45%;
}
.illust.part2{
	width: 38%;
}

.pagenation{
	font-weight: 400;
	font-size: 17px;
	margin-top: 1.5em;
}
.pagenation.right{
  text-align: right;
}
.pagenation.top{
	font-size: max(14px, min(2vw,16px));
	margin-top: 1.2em;
}
.pagenation.left.top{
	margin-top: 0;
}
.pagenation a{
	color: #C04D56;
	text-decoration: underline;
	display: block;
	position: relative;
}
.pagenation a:hover{
	text-decoration: none;
}
.pagenation .fa-angle-double-left{
	margin-right: 6px;
}
.pagenation .fa-angle-double-right{
	margin-left: 6px;
}

.profile-box{
	display: grid;
	grid-template-columns: auto 90px;
	align-items: end;
	margin: max(2em, min(4vw,3em)) 0 2em;
	max-width: 420px;
}
.profile-txt p:not(:root){
	margin: 0;
	text-indent: 0;
}
.profile-txt .name{
	font-size: 20px;
}
.profile-txt p:not([class]){
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size: 12px;
	line-height: 1.6;
}

.book-info{
	max-width: 500px;
	margin: 4em auto 0;
}
.book-info-head{
	background: #29759D;
	color: #fff;
	font-weight: 700;
	padding: 7px 20px;
	font-size: 16px;
}
.book-info-content{
	display: grid;
	grid-template-columns: 1fr 2.5fr;
	gap: 20px;
	background: #f0e6d9;
	padding: 20px;
	border: 2px solid #29759D;
	border-top: 0;
}
.book-info-content>img{
	border: 1px solid #29759D;
	transition: .15s all;
}
.book-info-content p:not(:root){
	text-indent: 0;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	line-height: 1.4;
	color: #333;
}
.book-num{
	font-size: 12px;
}
.book-title{
	font-weight: 700;
	font-size: 18px;
}
.book-info-content:hover img{
	transform: rotate(-6deg);
}
.book-info-content:hover{
	text-decoration: underline #333;
}


@media (max-width: 1115px){
	.contents-wrap{
		padding-top: 220px;
	}
}

@media (min-width: 768px){
	.contents-wrap{
		margin-left: 40px;
	}

	.visible-sp{
		display: none !important;
	}
}

@media (max-width: 767px){
	.head2{
		margin-left: 0;
	}

	.pagenation.right.top a{
		margin-right: 22px;
	}
	.pagenation.right.top .fa-angle-double-right{
		margin-left: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	}
}

@media (max-width: 640px){

	/* .pagenation.top a[data-label] span{
		display: none;
	}
	.pagenation.top a[data-label]::before {
    content: attr(data-label);
	} */

	.popover.bottom{
    margin-right: 15px;
    left: 15px !important;
	}

	.col-xs-12.col-sm-10.col-md-9.pull-right{
		background: #f7f3e8;
	}

	.contents-wrap{
		background: #f7f3e8;
		padding: 210px 0 0px;
    margin: -200px 0 40px;
	}

	.header h1{
		left: 0;
    margin: 0;
	}
	.header h1 .intro{
		position: relative;
		width: 100%;
		left: 0;
		margin-top: 15px;
		padding: 10px 15px;
	}

	.head2{
		grid-template-columns: 40px auto;
    font-size: 24px
	}
	.head2 .visible-sp{
		display: block;
	}

	.illust{
		padding: 0 0 15px 15px;
	}

	.profile-txt .name:not(:root){
		margin-top: 1em;
		font-size: 18px;
	}
}
