@charset "UTF-8";

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

.bread_nav,
.inner,
#content{
	width: 978px;
	margin: 0 auto;
	
}
.c120 img{
	width:120px;
}
.c200 img{
	width:200px;
}
.c268 img{
	width:268px;
}
.c283 img{
	width:283px;
}
.c400 img{
	width:400px;
}

/*----------------------------------
パンくずナビ
------------------------------------*/
.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 #writer{
	text-align: left;
	font-size: 1.5vw;
	margin: 0 0 10px;
}

main .bnr{
	text-align: center;
}

.main_v{
	margin-bottom: 5px;
}

#content a.read_bt::before{
	content: "";
	background: url(../img/ipad.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/calendar.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: #fff;
	margin: 0 0 18px;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}
#content h3::before{
	content: "";
	background: #4ed0d0 url(../img/infomation.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: #4ed0d0;
	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/infomation.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 no-repeat -2% center;
}
#content #new_comic h3::before {
	content: "";
	background:#4ed0d0 url(../img/book_icon_2.png) no-repeat center;
	
}

#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: 23.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;
}
#new_comic h5 {
	font-size: 2em;
	padding: 0 0 0 1%;
	font-weight: bold;
}

/*----------------------------------
comic
------------------------------------*/
#comic{
	margin: 0 0 40px;
}
#comic h3{
	color: #ffffff;
	background: #002746 no-repeat -2% center;
}
#content #comic h3::before {
	content: "";
	background:#4ed0d0  url(../img/book_icon_2.png) no-repeat center;
	
}
#comic .box_wrap{
	display: flex;
	flex-wrap: wrap;
	
}
#comic .box{
	display: inline-block;
	width: 23%;
	margin:1%;
}
#comic .title{
	font-size: 1.3rem;
}
#comic .kind_of_comic{
	font-size: 1rem;
}
#comic .kind_of_comic::before{
	content: "■";
}

#comic h5 {
	font-size: 1.5em;
	padding: 0 0 0 1%;
	font-weight: bold;
}

/*----------------------------------
novel
------------------------------------*/
#novel{
	margin: 0 0 40px;
}
#novel h3{
	color: #ffffff;
	background: #002746 no-repeat -2% center;
}
#content #novel h3::before {
	content: "";
	background:#4ed0d0  url(../img/book_icon_2.png) no-repeat center;
	d
}
#novel .box_wrap{
	display: flex;
	flex-wrap: wrap;
	
}
#novel .box{
	display: inline-block;
	width: 23%;
	margin:1%;
}
#novel .box2{
	display: inline-block;
	width: 46%;
	margin:2%;
}
#novel .box3{
	display: inline-block;
	width: 30%;
	margin:1%;
}
#novel .title{
	font-size: 1.3rem;
}
#novel .kind_of_novel{
	font-size: 1rem;
}
#novel .kind_of_novel::before{
	content: "■";
}
/*----------------------------------
character
------------------------------------*/
#character{
	margin: 0 0 40px;
}
#character h3{
	color: #ffffff;
	padding: 5px 0;
	text-align: center;
}
#character h3::before{
	content:none;
}
#character h4{
	background: #dbdbdb;
	text-align: center;
	font-weight: bold;
	padding: 5px 0;
	margin-bottom: 20px;
}
#character .box{
	width: 50%;
	display: inline-block;
	margin: 0 0 20px;
}
#character .chara1,
#character .chara2,
#character .chara3{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#character .right{
	width: 290px;
	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 (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;
}
#new_comic .right2{
	width: 600px !important;
}
}
@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: 1.5vw;
	}

	#comic{
		margin: 0 0 8%;
	}
	#content #new_comic h3,
	#comic h3{
		background: #002746 no-repeat -4vw center;
}
#content h3 span{
	top: 1vw;
}
	#comic .box_wrap{
		display: flex;
		
		flex-wrap: wrap;
	}
	#comic .box{
		width: 30%;
		margin: 1%;
	}
	#comic .title{
		font-size: 1.5vw;
		text-align: justify;
		margin-top: 1rem;
	}
	#comic .kind_of_comic{
		font-size: 1.5vw;
		text-align: justify;
		text-indent: -1em;
		margin-left: 1em;
	}
	
	#novel .box_wrap{
		display: flex;
		flex-wrap: wrap;
	}
	#novel .box{
		width: 30%;
		margin: 1%;
	}
	#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  no-repeat -4vw center;
}
#content h3 span{
	top: 2.5vw;
}
	#comic .box_wrap{
		display: flex;
		
		flex-wrap: wrap;
	}
	#comic .box{
		width: 48%;
		margin: 1%;
	}
	#comic .title{
		font-size: 3vw;
		text-align: justify;
		margin-top: 1rem;
	}
	#comic .kind_of_comic{
		font-size: 3vw;
		text-align: justify;
		text-indent: -1em;
		margin-left: 1em;
	}
	
	#novel .box_wrap{
		display: flex;
		flex-wrap: wrap;
	}
	#novel .box{
		width: 48%;
		margin: 1%;
	}
	#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,
	#character .chara3{
		display: block;
	}

}

/*----------------------------------
writer
------------------------------------*/
	#writer p{
		vertical-align: text-bottom;
	}
	#writer .author{
		margin-left: 1em;
		font-size: 1vw;
	}

/*----------------------------------
modal
------------------------------------*/
	.modal { position:fixed; display:none; z-index:9999; top:40%; left:50%; width:400px; height:200px; margin:-120px 0 0 -220px; padding:20px; text-align:center; }
.modal p { margin-bottom:10px; }
.modal a { cursor:pointer; }