/* bootstrap menu */

.bmp {
    padding-left: 0px !important;
}

.bmp-active {
    font-weight: bold;
}

.navi-custom {
	background: rgba(255, 255, 255, 1);
}

li.list-group-item {
	padding: 10px 30px 10px 0px;
    font-weight: bold;
}

li.list-group-item:hover {
	background: rgba(255, 255, 255, 1);
}

ul.bmp > li.list-group-item > a {
	padding: 0px 0px 0px 30px;
    color: rgba(0, 0, 0, 1);
}

ul.bmp > li.list-group-item > ul {
	margin: 5px 5px 5px 10px;
	background: rgba(230, 230, 230, 1);
	position: absolute;
	display: none;
	z-index: 10;
	border-radius: 0px 0px 10px 10px;
}

ul.bmp > li.list-group-item > ul > li.list-group-item-child {
	margin: 0px 15px 0px 15px;
	padding: 10px 10px 10px 10px;
    color: rgba(0, 0, 0, 1);
    border-top: 1px dotted #666;
}
ul.bmp > li.list-group-item > ul > li.list-group-item-child:first-child {
	    border-style: none;
}

ul.bmp > li.list-group-item > ul > li.list-group-item-child > a {
    color: rgba(0, 0, 0, 1);
}


@media screen and (max-width: 1024px) {
	.menu > div.pbNested > div.pbNested > div.login {
		display: none;
	}

	.navi-custom {
		background: rgba(255, 255, 255, 1);
	}

	li.list-group-item {
	    min-width : 100%;
		padding: 5px 30px;
	    font-weight: bold;
	    clear: both;
	}

	li.list-group-item:hover {
		background: rgba(255, 255, 255, .9);
	}
	ul.bmp > li.list-group-item > a {
	    min-width : 100%;
	    color: rgba(0, 0, 0, 1);
	}

	ul.bmp > li.list-group-item > ul {
		background: rgba(255, 255, 255, .9);
		position: relative;
		display: block;
	    border-top: 1px solid #666;
	    clear: both;
	}
	ul.bmp > li.list-group-item > ul.nav {
	    clear: both;
	}

	ul.bmp > li.list-group-item > ul > li.list-group-item-child {
	    font-weight: normal;
		padding: 5px 60px;
	    border-style: none;
	}
	ul.bmp > li.list-group-item > ul > li.list-group-item-child > a {
	    color: rgba(0, 0, 0, 1);
	}

}

@media screen and (max-width: 767px) {
	.menu > div.pbNested > div.pbNested > div.login {
		display: block;
	}

	.navi-custom {
		background: rgba(255, 255, 255, 1);
	}

	li.list-group-item {
	    min-width : 100%;
		padding: 5px 30px;
	    font-weight: bold;
	    clear: both;
	}

	li.list-group-item:hover {
		background: rgba(255, 255, 255, .9);
	}
	ul.bmp > li.list-group-item > a {
	    min-width : 100%;
	    color: rgba(0, 0, 0, 1);
	}

	ul.bmp > li.list-group-item > ul {
		background: rgba(255, 255, 255, .9);
		position: relative;
		display: block;
	    border-top: 1px solid #666;
	    clear: both;
	}

	ul.bmp > li.list-group-item > ul > li.list-group-item-child {
	    font-weight: normal;
		padding: 5px 60px;
	    border-style: none;
	}
	ul.bmp > li.list-group-item > ul > li.list-group-item-child > a {
	    color: rgba(0, 0, 0, 1);
	}

}

/* detail bottom */

div.details-info > div.articleLink {
	width : 100% !important;
	clear : both !important;
	margin : 10px;
	display: flex;
	justify-content: space-between;
}
div.details-info > div.articleLink > div.prevPage {
	position: relative;
	padding-top : 10px;
}
div.details-info > div.articleLink > div.prevPage:before {
	position: absolute;
	top: 30%;
	bottom: 0;
	left: 10px;
	margin: auto;
	font-family: fontAwesome;
	content: '\f100';
	color: #FFF;
	vertical-align: middle;
	font-size:20px;
	transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
}
div.details-info > div.articleLink > div.prevPage > a {
	padding: 7px 15px 7px 30px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
div.details-info > div.articleLink > div.prevPage > a:hover {
	background: #99afba;
}
div.details-info > div.articleLink > div.prevNoPage {
	position: relative;
	padding-top : 10px;
}
div.details-info > div.articleLink > div.prevNoPage:before {
	position: absolute;
	top: 30%;
	bottom: 0;
	left: 10px;
	margin: auto;
	font-family: fontAwesome;
	content: '\f100';
	color: #666666;
	vertical-align: middle;
	font-size:20px;
	transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
}
div.details-info > div.articleLink > div.prevNoPage > span {
	padding: 7px 15px 7px 30px;
	background: #999999;
	color: #666666;
	border-radius: 30px;
	text-decoration: none;
}
div.details-info > div.articleLink > div.listPage {
	position: relative;
	padding-top : 10px;
}
div.details-info > div.articleLink > div.listPage:before {
	position: absolute;
	top: 30%;
	bottom: 0;
	left: 10px;
	margin: auto;
	font-family: fontAwesome;
	content: '\f102';
	color: #FFF;
	vertical-align: middle;
	font-size:20px;
	transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
}
div.details-info > div.articleLink > div.listPage > a {
	padding: 7px 15px 7px 30px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
div.details-info > div.articleLink > div.listPage > a:hover {
	position: relative;
	background: #99afba;
}
div.details-info > div.articleLink > div.followPage {
	position: relative;
	padding-top : 10px;
}
div.details-info > div.articleLink > div.followPage:after {
	position: absolute;
	top: 30%;
	bottom: 0;
	right: 10px;
	margin: auto;
	font-family: fontAwesome;
	content: '\f101';
	color: #FFF;
	vertical-align: middle;
	font-size:20px;
	transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
}
div.details-info > div.articleLink > div.followPage > a {
	padding: 7px 30px 7px 15px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
div.details-info > div.articleLink > div.followPage > a:hover {
	background: #99afba;
}
div.details-info > div.articleLink > div.followNoPage {
	position: relative;
	padding-top : 10px;
}
div.details-info > div.articleLink > div.followNoPage:after {
	position: absolute;
	top: 30%;
	bottom: 0;
	right: 10px;
	margin: auto;
	font-family: fontAwesome;
	content: '\f101';
	color: #666666;
	vertical-align: middle;
	font-size:20px;
	transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
}
div.details-info > div.articleLink > div.followNoPage > span {
	padding: 7px 30px 7px 15px;
	background: #999999;
	color: #666666;
	border-radius: 30px;
	text-decoration: none;
}
/*
@media screen and (max-width: 1024px) {
	div.details-info > div.articleLink > div.prevPage:before {
		left: 10px;
	}
	div.details-info > div.articleLink > div.listPage:before {
		left: 10px;
	}
	div.details-info > div.articleLink > div.followPage:after {
		right: 10px;
	}
}
*/
/* ranking */
.popular .count span:after {
    content: '';
}

.popular .count > span > div > span.like:before {
	font-family: FontAwesome;
	content: '\f087';
	font-size: 13px;
	margin-right: 3px;
	line-height: 1;
	color: #ccc;
}
.popular .nice > span > div > span.access:before {
    font-family: FontAwesome;
    content: '\f06e';
    font-size: 13px;
    margin-right: 3px;
    line-height: 1;
    color: #ccc;
}

/* summary view detail list */
.details-list .image {
	position : relative;
}

.details-list .already {
	position : absolute;
	top : 0;
	width : 100%;
	padding: 2px 5px;
	background: rgba(0,0,0,.6);
	text-align : left;
	z-index:1;
}

.details-list .already span {
	font-family: FontAwesome;
	font-size: 20px;
	margin-right: 3px;
	line-height: 1;
}
.details-list .already span.read:after {
	content: '\f2b6';
	font-weight : 400;
	color: #FFF;
}
.details-list .already span.unread:after {
	content: '\f003';
	font-weight : 900;
	color: #FFF;
}

/* summary view toppage */
.new .image {
	position : relative;
}

.new .already {
	position : absolute;
	top : 0;
	width : 100%;
	padding: 2px 5px;
	background: rgba(0,0,0,.6);
	z-index:1;
}

.new .already span {
	font-family: FontAwesome;
	font-size: 20px;
	margin-right: 3px;
	line-height: 1;
}
.new .already span.read:after {
	content: '\f2b6';
	font-weight : 400;
	color: #FFF;
}
.new .already span.unread:after {
	content: '\f003';
	font-weight : 900;
	color: #FFF;
}

/* text */

.base-text {
	margin-top: 10px;
	margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
	.base-text {
		margin-top: 10px;
		margin-bottom: 15px;
	}
}

/* header */

@media screen and (max-width: 1024px) {
	.pbHeaderArea .pbBlockSearch {
		display: block!important;
		position: relative;
		z-index: 1;
		width: 100%;
		border-bottom: 1px solid #ccc;
		background: #f0f0f0;
	}
	.pbHeaderArea .pbBlockSearch form {
		margin:10px auto;
	}
	.pbHeaderArea .pbBlockSearch form:before {
		display:none;
	}
	.pbHeaderArea .pbBlockSearch input[type="text"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
		font-size: 18px;
		width: calc(100% - 90px);
		padding: 2px 2px;
		background: #fff;
		border: none;
		border-radius: 4px;
	}
	.pbHeaderArea .pbBlockSearch input[type="submit"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 70x;
		margin-left: auto;
		padding: 2px;
		background: #192226;
		color: #fff;
		border: none;
		border-radius: 4px;
		transition: all .3s;
		cursor: pointer;
		font-family: FontAwesome;
		font-size: 20px;
	}
	.pbHeaderArea .pbBlockSearch input[type="submit"]:hover {
		background: #99afba;
	}
}

h1,
h2,
h3 {
	font-family: "M PLUS 1p";
}
h1 {
	font-weight: black;
}
.base-h1box .h1 h1 {
	font-family: 'M PLUS 1p';
}
.base-h1box .subtitle {
	font-family: 'M PLUS 1p';
	margin-top: 10px;
}
.base-h2_subtitle .h2 h2 {
	font-family: 'M PLUS 1p';
}
.base-h3_subtitle .h3 h3 {
	font-family: 'M PLUS 1p';
}
.footer .slider-title {
	font-family: 'M PLUS 1p';
}


.new li {
	width: calc(25% - 20px);
}
.new li:nth-child(n+4) {
	margin-top: 0px;
}
.new li:nth-child(n+5) {
	margin-top: 20px;
}
.new .image img {
	height: 130px;
}

@media screen and (max-width: 1024px) {
	.new li {
		width: calc(33.33% - 20px);
	}
	.new li:nth-child(n+4) {
		margin-top: 20px;
	}
	.new .image img {
		height: 130px;
	}
}

@media screen and (max-width: 767px) {
	.new li {
		width: calc(33.33% - 6px);
	}
	.new li:nth-child(n+3) {
		margin-top: 0px;
	}
	.new li:nth-child(n+4) {
		margin-top: 6px;
	}
	.new li:nth-child(n+9) {
		display: inherit;
	}
	.new li:nth-child(n+13) {
		display: none;
	}
	.new .image img {
		height: 120px;
	}
}


