@charset "UTF-8";

body{
	color: #666;
	font-family: "Meiyo";
}

.bread_nav,
.inner,
#content{
	width: 978px;
	margin: 0 auto;
	
}
#content h4{
	background: #4ed2cf;
	text-align: left;
	color: #fff;
	margin: 0 0 18px;
	padding:5px;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}

/*----------------------------------
パンくずナビ
------------------------------------*/
.bread_nav{
	margin-bottom: 10px;
}

.bread_nav span{
	display: inline-block;
	width: 20px;
}


/*----------------------------------
main
------------------------------------*/
main{
	margin: 0 0 40px;
	
}


main #btn_sns{
	text-align: right;
	margin: 0 0 10px;
}

main .bnr{
	text-align: center;
}

.main_v{
	margin-bottom: 5px;
}

#content a.read_bt::before{
	content: "";
	background: url(../img/book_icon.png) no-repeat left;
	display: inline-block;
	vertical-align: bottom;
	background-size: 30px;
	width: 40px;
	height: 30px;
	vertical-align: sub;
}
/*----------------------------------
#content
------------------------------------*/
#content figure{
	display: inline-block;
}
#content .title{
	font-size: 2.5rem;
	font-weight: bold;
}
#content .kikan{
	display: inline-block;
	font-size: 1.5rem;
	background: #dbdbdb;
	padding: 0 100px;
	border-radius: 20px;
}
#content .kikan::before{
	content: "";
	background: url(../img/clock_icon.png) no-repeat left;
	display: inline-block;
	vertical-align: bottom;
	background-size: 17px;
	width: 21px;
	height: 28px;
}
#content h3{
	background: #002746;
	text-align: left;
	color: #ff9501;
	margin: 0 0 18px;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}
#content h3::before{
	content: "";
	background: #ff9501 url(../img/megaphone_icon.png) no-repeat center;
	display: inline-block;
	background-size: 30px;
	width: 50px;
	height: 39px;
	vertical-align: middle;
	margin: 0 15px 0 0;
}
#content h3 span{
	position: absolute;
	top: 3px;
}
/*----------------------------------
new_story
------------------------------------*/
#new_story{
	margin: 0 0 40px;
}

#new_story .right{
	max-width: 666px;
	margin: 0 0 0 49px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}
#new_story .right a.read_bt{
	font-size: 1.8rem;
	color: #ffffff;
	display: inline-block;
	padding: 7px 275px;
	width: 100%;
	background: #ff9501;
	border-radius: 5px;
	margin: 0 0 20px;
}
#content .kikan{
	padding: 5px 100px;
}

.t_box {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.t_box p {
    margin: 0; 
    padding: 0;
}

/*----------------------------------
back_number
------------------------------------*/
#back_number{
	margin: 0 0 40px;
}
#content #back_number h3{
	color: #87969d;
}
#content #back_number h3::before{
	content: "";
	background: #87969d url(../img/megaphone_icon.png) no-repeat center;
}
#back_number .box_wrap{
	margin: 0 0 40px;
}
#back_number .box{
	background: #dbdbdb;
	padding: 10px;
	margin: 2px;
}
#back_number .right{
	width: 800px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 22px;
	position: relative;
}
#back_number .kikan{
	display: inline-block;
	font-size: 1.5rem;
	background: #f4f4f4;
	padding: 0 100px;
	border-radius: 20px;
}
#back_number .read_bt{
	width: 250px;
	display: inline-block;
	background: #87969d;
	padding: 10px 0;
	border-radius: 5px;
	text-align: center;
	color: #ffffff;
	font-size: 1.5rem;
	position: absolute;
	top: 27%;
	right: 0;
}
#back_number .bt_kanso{
	color: #87969d;
	text-decoration: underline;
	display: block;
	width: 50%;
	text-align: center;
	font-size: 2rem;
	margin: 0 auto;
}
#back_number .title{
	font-size: 1.4rem;
}

/*----------------------------------
new_comic
------------------------------------*/
#new_comic{
	margin: 0 0 40px;
}
#content #new_comic h3{
	color: #ffffff;
	background: #002746 url(../img/h3_bg.png) no-repeat -2% center;
}
#content #new_comic h3::before {
	content: "";
	background: url(../img/book_icon_2.png) no-repeat center;
	display: inline-block;
	background-size: 30px;
	width: 50px;
	height: 39px;
	vertical-align: middle;
	margin: 0 30px 0 0;
}

#new_comic .right{
	width: 685px;
	display: inline-block;
	vertical-align: top;
	margin: 0 0 0 20px;
}
#new_comic .right .sakka{
	font-size: 1.5rem;
}
#new_comic .right .detail{
	font-size: 14px;
}
#new_comic .right .lead{
  display: block;
  color: #019fe6;
  font-size:24px;
  font-weight:bold;
}
#new_comic .stores {
	display: table;
	width: 100%;
	margin-top: 1em;
}
#new_comic .stores dd {
	width: 31.33%;
	display: table-cell;
	vertical-align: middle;
	padding: 1% 1% 0 1%;
}
#new_comic .stores dd a {
	width: 100%;
	display: block;
	background: #e5e5e5;
	padding: 0.7em;
	text-align: center;
}
#comic .title{
		font-size: 1.5vw;
		text-align: justify;
		margin-top: 0.5rem;
	}
/*----------------------------------
comic
------------------------------------*/
#comic{
	margin: 0 0 40px;
}
#comic h3{
	color: #ffffff;
	background: #002746 url(../img/h3_bg.png) no-repeat -2% center;
}
#content #comic h3::before {
	content: "";
	background: url(../img/book_icon_2.png) no-repeat center;
	display: inline-block;
	background-size: 30px;
	width: 50px;
	height: 39px;
	vertical-align: middle;
	margin: 0 30px 0 0;
}
#comic .box_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#comic .box{
	display: inline-block;
	width: 24%;
}
#comic .title{
	font-size: 1.3rem;
}
#comic .kind_of_comic{
	font-size: 1rem;
}
#comic .kind_of_comic::before{
	content: "■";
}
/*----------------------------------
pager
------------------------------------*/
.pager {
    clear:both;
    margin:0;
    text-align:center;
	padding:10px;
}

.pager span {
    margin:5px;
    padding:5px 8px;
    color:#fff;
    background:#4ed2cf;
	border-radius:5px;
}
.pager span:hover {
    cursor:pointer;
    background:#4ed2cf;
}

.pager span.current {
    color:#4ed2cf;
    background:none;
}
.pager span.current:hover {
    cursor:default;
}

.pager span.invalid {
    color:#dcdcdc;
    background:none;
}
.pager span.invalid:hover {
    cursor:default;
}

.pager span.ellipsis {
    color:#4ed2cf;
    background:none;
}
.pager span.ellipsis:hover {
    cursor:default;
}
@media screen and (min-width:960px) {
#bg_p
{
	background:#b8f1f2;
	padding:10px;
}
#bg
{
	background: #fff;
	width: 998px;
	margin:0 auto;
	border-radius:5px;
	
}
.bread_nav{
	padding-top:10px;
}
#fnav{
	padding-top:10px;
}
footer{
	margin:0;
}
}
@media screen and (max-width:960px) {

	.bread_nav,
	.inner,
	#content{
		width:100%;
		padding: 0 1rem;
	}
	
	main,main #btn_sns{
		margin: 0 0 8%;
	}

	.bread_nav{
		margin-bottom: 2%;
		font-size: 3.5vw;
	}
	.main_v{
		margin-bottom: 2%;
	}

	.lead{
		font-size: 1.5vw;
		text-align: justify;
	}

	.twin{
		display: flex;
		justify-content: space-between;
	}
	#content h3{
		font-size: 2.5vw;
		margin: 0 0 4%;
	}
	#content .title{
		font-size: 2.5vw;
		line-height: 1.2em;
		text-align: left;
	}
	#content .right a.read_bt{
		padding: 0;
		font-size: 2.5vw;
		line-height: 2;
	}
	#content a.read_bt::before{
		width: 5vw;
		background-size: contain;
		margin-right: 0.25em;
	}
	#content .kikan::before{
		background-size: contain;
		vertical-align: text-top;
		width: 4vw;
		height: 4vw;
		margin-right: 0.25em;
	}

	#new_story{
		overflow: hidden;
		position: relative;
		padding-bottom: 10vw;
	}
	#new_story figure{
		width: 23%;
		float: left;
	}
	#new_story .right{
		float: right;
		width: 73%;
		margin: 0;
		padding: 0;
	}
	#new_story .kikan{
		width: 90%;
		margin: auto;
		padding: 1vw;
		font-size: 2.5vw;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#back_number,#back_number .box_wrap{
		margin: 0 0 8%;
	}
	#back_number .box{
		overflow: hidden;
	}
	#back_number figure{
		width: 23%;
		float: left;
		text-align: center;
	}
	#back_number .right{
		width: 73%;
		padding: 0;
		margin: 0;
		float: right;
	}
	#back_number .read_bt{
		padding: 0;
		width: 100%;
		position: static;
	}
	#back_number .kikan{
		padding: 1vw 2vw;
		font-size: 2.5vw;
	}
	#back_number .kikan::before{
		width: 3vw;
		vertical-align: top;
	}
	#back_number .bt_kanso{
		width: auto;
		font-size: 4.5vw;
	}

	#new_comic{
		height: auto;
		margin: 0 0 8%;
		position: relative;
	}
	#new_comic figure{
		width: 30vw;
	}
	#new_comic .right{
		width: 100%;
		display:block;
		vertical-align: top;
		margin: 0;
	}
	#new_comic .right .text1{
		position: absolute;
		left: 33vw;
		top: calc(3.5vw + 39px);
	}
	#new_comic .right .sakka{
		font-size: 3.5vw;
	}
	#new_comic .right .lead{
		margin: 4% 0;
		text-align: justify;
		font-size: 1.5vw;
		font-weight: bold;
	}
	#new_comic .right .detail{
		text-align: justify;
		font-size: 1vw;
	}

	#comic{
		margin: 0 0 8%;
	}
	#content #new_comic h3,
	#comic h3{
		background: #002746 url(../img/h3_bg.png) no-repeat -4vw center;
}
#content h3 span{
	top: 1vw;
}
	#comic .box_wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#comic .box{
		width: 24%;
		margin: 0;
	}
	#comic .title{
		font-size: 1.3vw;
		text-align: justify;
		margin-top: 0.5rem;
	}
	#comic .kind_of_comic{
		font-size: 1.3vw;
		text-align: justify;
		text-indent: -1em;
		margin-left: 1em;
	}
	
	#novel .box_wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#novel .box{
		width: 24%;
		margin: 0;
	}
	#novel .title{
		font-size: 1.5vw;
		text-align: justify;
		margin-top: 1rem;
	}
	#novel .kind_of_novel{
		font-size: 1.5vw;
		text-align: justify;
		text-indent: -1em;
		margin-left: 1em;
	}
#character .right{
	width: 200px;
	display: inline-block;
	vertical-align: top;
	margin: 0 0 0 10px;
}
#character .chara_name{
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
}

	
}

@media screen and (max-width:640px) {

	.bread_nav,
	.inner,
	#content{
		width:100%;
		padding: 0 1rem;
	}

	main,main #btn_sns{
		margin: 0 0 8%;
	}

	.bread_nav{
		margin-bottom: 2%;
		font-size: 3.5vw;
	}
	.main_v{
		margin-bottom: 2%;
	}

	.lead{
		font-size: 3.5vw;
		text-align: justify;
	}

	.twin{
		display: flex;
		justify-content: space-between;
	}

	#content h3{
		font-size: 4.5vw;
		margin: 0 0 4%;
	}
	#content .title{
		font-size: 4.5vw;
		line-height: 1.2em;
		text-align: left;
	}
	#content .right a.read_bt{
		padding: 0;
		font-size: 4vw;
		line-height: 2;
	}
	#content a.read_bt::before{
		width: 5vw;
		background-size: contain;
		margin-right: 0.25em;
	}
	#content .kikan::before{
		background-size: contain;
		vertical-align: text-top;
		width: 4vw;
		height: 4vw;
		margin-right: 0.25em;
	}

	#new_story{
		overflow: hidden;
		position: relative;
		padding-bottom: 10vw;
	}
	#new_story figure{
		width: 33%;
		float: left;
	}
	#new_story .right{
		float: right;
		width: 63%;
		margin: 0;
		padding: 0;
	}
	#new_story .kikan{
		width: 90%;
		margin: auto;
		padding: 1vw;
		font-size: 3.5vw;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#back_number,#back_number .box_wrap{
		margin: 0 0 8%;
	}
	#back_number .box{
		overflow: hidden;
	}
	#back_number figure{
		width: 33%;
		float: left;
		text-align: center;
	}
	#back_number .right{
		width: 63%;
		padding: 0;
		margin: 0;
		float: right;
	}
	#back_number .read_bt{
		padding: 0;
		width: 100%;
		position: static;
	}
	#back_number .kikan{
		padding: 1vw 2vw;
		font-size: 2.5vw;
	}
	#back_number .kikan::before{
		width: 3vw;
		vertical-align: top;
	}
	#back_number .bt_kanso{
		width: auto;
		font-size: 4.5vw;
	}

	#new_comic{
		height: auto;
		margin: 0 0 8%;
		position: relative;
	}
	#new_comic figure{
		width: 30vw;
	}
	#new_comic .right{
		width: 100%;
		display:block;
		vertical-align: top;
		margin: 0;
	}
	#new_comic .right .text1{
		position: absolute;
		left: 33vw;
		top: calc(3.5vw + 39px);
	}
	#new_comic .right .sakka{
		font-size: 3.5vw;
	}
	#new_comic .right .lead{
		margin: 4% 0;
		text-align: justify;
		font-size: 4.5vw;
		font-weight: bold;
	}
	#new_comic .right .detail{
		text-align: justify;
		font-size: 3.5vw;
	}

	#comic{
		margin: 0 0 8%;
	}
	#content #new_comic h3,
	#comic h3{
		background: #002746 url(../img/h3_bg.png) no-repeat -4vw center;
}
#content h3 span{
	top: 2.5vw;
}
	#comic .box_wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#comic .box{
		width: 48%;
		margin: 0;
	}
	#comic .title{
		font-size: 3vw;
		text-align: justify;
		margin-top: 0.5rem;
	}
	#comic .kind_of_comic{
		font-size: 3vw;
		text-align: justify;
		text-indent: -1em;
		margin-left: 1em;
	}
	
	#novel .box_wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#novel .box{
		width: 24%;
		margin: 0;
	}
	#novel .title{
		font-size: 3vw;
		text-align: justify;
		margin-top: 1rem;
	}
	#novel .kind_of_novel{
		font-size: 3vw;
		text-align: justify;
		text-indent: -1em;
		margin-left: 1em;
	}

	#character{
		margin: 0 0 0px;
	}
	#character h4{
		font-size: 4.5vw;
		margin: 0 0 8%;
	}
	#character .box{
		display: flex;
		width: 100%;
		margin: 0 0 8%;
		justify-content: space-between;
	}
	#character .chara_name{
		margin: 0 0 3%;
	}
	#character .chara1,
	#character .chara2{
		display: block;
	}

}