@charset "utf-8";
main{
	width: 1200px;
	margin: 0 auto;
}
article{
	float: left;
	width: 940px;
}
aside{
	float: right;
	width: 226px;
}
aside section{
	background-color: #f9f9f4;
}
aside .inner{
	position: relative;
	padding: 10px;
}
aside h2{
	padding: 8px 5px 8px 32px;
	background-color: #50c7f2;
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: left center;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
}
aside .category h2,
aside .news h2,
aside .archive h2{
	background-image: url(/themes/fantasiabunko/images/global/aside/icon-blog.png);
}
aside .pickup h2{
	background-image: url(/themes/fantasiabunko/images/global/aside/icon-series.png);
}
aside .twitter h2{
	background-image: url(/themes/fantasiabunko/images/global/aside/icon-twitter.png);
}
/* pickup */
aside .pickup .inner{
	padding: 15px 10px 20px;
}
aside .pickup .list{
	margin: 5px 0;
}
aside .pickup .list img{
	width: 100%;
}
aside .pickup .list figure{
	border: 1px solid #efebe5;
}
aside .pickup .slick-prev{
	overflow: hidden;
	z-index: 10;
	cursor: pointer;
	position: absolute;
    top: 5px;
    left: 95px;
	width: 36px;
	height: 19px;
	background-image: url(/themes/fantasiabunko/images/global/control/up.png);
	background-size: 36px 19px;
	padding: 0;
	border: none;
	background-color: transparent;
	outline: none;
	appearance: none;
	text-indent: 100%;
	white-space: nowrap;
}
aside .pickup .slick-next{
	overflow: hidden;
	z-index: 10;
	cursor: pointer;
	position: absolute;
	bottom: 5px;
    left: 95px;
	width: 36px;
	height: 19px;
	background-image: url(/themes/fantasiabunko/images/global/control/down.png);
	background-size: 36px 19px;
	padding: 0;
	border: none;
	background-color: transparent;
	outline: none;
	appearance: none;
	text-indent: 100%;
	white-space: nowrap;
}
aside .pickup .slick-prev:hover,
aside .pickup .slick-next:hover{
	opacity: 0.8;
}
/* category */
aside .categoryList li{
	display: inline-block;
}
aside .categoryList li{
	margin-right: 10px;
}
aside .categoryList li:last-child{
	margin-right: 0;
}
aside .categoryList li a.category{
	width: auto;
	padding: 0 10px;
}
/* news */
aside .news .list li{
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
	line-height: 1.2;
}
aside .news .list li a{
	display: block;
}
aside .news .link{
	text-align: right;
}
aside .news .link::after{
    content: "\f138";
    margin-left: 5px;
    font-size: 14px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    color: #217fc4;
}
/* archive */
aside .archive li{
	font-size: 16px;
	line-height: 1.5;
}
/* twitter */
aside{
	margin-bottom: 40px;
}
aside .twitter{
	margin-bottom: 20px;
}
aside .twitter .inner{
	padding: 0;
}
aside .twitter .timeline{
    overflow-y: scroll;
    height: 360px;
}
/* banner */
aside .banner{
	padding-top: 10px;
	background: transparent;
}
aside .bannerList li{
	margin-bottom: 10px;
	border: 1px solid #efebe5;
	box-sizing: border-box;
}
aside .bannerList li img{
	width: 100%;
}
@media screen and (max-width:767px) and (min-width: 1px){
	main{
		width: auto;
	}
	article{
		float: none;
		width: auto;
	}
	aside{
		float: none;
		width: auto;
		margin: 0 10px 30px;
	}
	aside .pickup .slick-prev{
	    top: 50%;
	    right: auto;
	    bottom: auto;
	    left: 0;
		width: 31px;
		height: 61px;
		margin-top: -30.5px;
		background-image: url(/themes/fantasiabunko/images/global/control/left.png);
		background-size: 31px 61px;
	}
	aside .pickup .slick-next{
	    top: 50%;
	    right: 0;
	    bottom: auto;
	    left: auto;
		width: 31px;
		height: 61px;
		margin-top: -30.5px;
		background-image: url(/themes/fantasiabunko/images/global/control/right.png);
		background-size: 31px 61px;
	}
	aside .pickup .list{
		margin: 0 5px;
	}
}
/*-----------------------------------------------
 specialSite
-----------------------------------------------*/
#specialSite{
	margin: 0 auto 40px;
}
#specialSite h1{
	position: relative;
	height: 50px;
	margin-bottom: 40px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-specialsite.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#specialSite h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#specialSite .bnrList{
	margin-right: -36px;
	font-size: 0;
}
#specialSite .bnrList li{
	display: inline-block;
	margin: 0 37px 40px 0;
	width: 207px;
	vertical-align: top;
}
#specialSite .bnrList li.top{
	width: 451px;
}
#specialSite .bnrList li .image{
	margin-bottom: 5px;
	border: 1px solid #efebe5;
}
#specialSite .bnrList li figcaption{
	font-size: 14px;
	line-height: 1.2;
}
#specialSite .bnrList li img{
	max-width: 100%;
}


@media screen and (max-width:767px) and (min-width: 1px){
	#specialSite{
		width: auto;
		margin: 0 10px 30px;
	}
	#specialSite h1{
		margin: 0 0 10px;
		font-size: 24px;
	}
	#specialSite .bnrList{
		margin: 0;
	}
	#specialSite .bnrList li{
		width: 50%;
		margin: 0 0 30px 0;
		box-sizing: border-box;
	}
	#specialSite .bnrList li:nth-child(even){
		padding-right: 5px;
	}
	#specialSite .bnrList li:nth-child(odd){
		padding-left: 5px;
	}
	#specialSite .bnrList li.top{
		width: 100%;
		padding: 0;
	}
	#specialSite .bnrList li img{
		width: 100%;
	}
}
/*-----------------------------------------------
 pickup
-----------------------------------------------*/
#pickup{
	margin: 0 auto 40px;
}
#pickup h1{
	position: relative;
	height: 50px;
	margin-bottom: 40px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-series.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#pickup h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#pickup .sort{
	text-align: center;
	font-size: 0;
}
#pickup .sort li{
	cursor: pointer;
	display: inline-block;
	margin: 0 5px;
	padding: 10px 20px;
	font-size: 18px;
	font-weight: 300;
	border: 1px solid #000;
	border-radius: 40px;
	transition: all 0.7s ease;
}
#pickup .sort li.current,
#pickup .sort li:hover{
	background-color: #eee;
}
#pickup .pickupList{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -32px;
}
#pickup .pickupList li{
	width: 210px;
	margin: 0 33px 20px 0;
	box-sizing: border-box;
}
#pickup .pickupList .image{
	margin-bottom: 10px;
	border: 1px solid #efebe5;
	font-size: 0;
}
#pickup .pickupList .image img{
	width: 100%;
}
#pickup .pickupList figcaption{
	line-height: 1.5;
}
#pickup .pickupList figcaption a{
	color: #2380c5;
}
#pickup .pickupList .author{
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
}
#pickup .pickupList p.text{
	margin-bottom: 10px;
	font-weight: 300;
}
#pickup .pickupList .tags span{
    display: inline-block;
    padding: 0px 2px;
    margin: 0 5px 5px 0;
    font-size: 12px;
    text-align: center;
    color: #fff;
}
#pickup .pickupList .tags span.anime{
	background-color: #c39eff;
	line-height: 1.5;
}
#pickup .pickupList .tags span.comic{
	background-color: #00ceb7;
	line-height: 1.5;
}
#pickup .pickupList .tags span.web{
	background-color: #f5d659;
	line-height: 1.5;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#pickup{
		width: auto;
		margin: 0 0 30px;
		padding-top: 10px;
	}
	#pickup h1{
		margin: 0 10px 10px;
		font-size: 24px;
	}
	#pickup .sort li{
		padding: 5px;
		font-size: 14px;
	}
	#pickup .pickupList{
		margin: 0;
	}
	#pickup .pickupList li{
		width: 50%;
		flex-basis: 50%;
		margin: 0 0 20px;
		padding: 0 10px;
	}
	#pickup .pickupList .tags span {
		width: auto;
	    padding: 0 5px;
	}
}
/*-----------------------------------------------
 movie
-----------------------------------------------*/
#movie{
	margin: 0 auto 40px;
}
#movie h1{
	position: relative;
	height: 50px;
	margin-bottom: 40px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-movie.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#movie h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#movie .movieList{
	margin-right: -36px;
	font-size: 0;
}
#movie .movieList li{
	display: inline-block;
	margin: 0 37px 40px 0;
	width: 207px;
	vertical-align: top;
}
#movie .movieList li .image{
	overflow: hidden;
	position: relative;
	margin-bottom: 5px;
	border: 1px solid #efebe5;
}
#movie .movieList li figcaption{
	font-size: 14px;
	line-height: 1.2;
}
#movie .movieList li img{
	max-width: 100%;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#movie .movieList a:hover img{
	transform: scale(1.1);
}
#movie .movieList .image a::before{
	display: block;
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 134px;
	background-image: url(/themes/fantasiabunko/images/global/control/play.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60px;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#movie .movieList .image a:hover::before{
	opacity: 0;
	transform: scale(0.9);
}
@media screen and (max-width:767px) and (min-width: 1px){
	#movie{
		width: auto;
		margin: 0 10px 30px;
	}
	#movie h1{
		margin: 0 0 10px;
		font-size: 24px;
	}
	#movie .movieList{
		margin: 0;
	}
	#movie .movieList li{
		width: 50%;
		margin: 0 0 30px 0;
		box-sizing: border-box;
	}
	#movie .movieList li:nth-child(odd){
		padding-right: 5px;
	}
	#movie .movieList li:nth-child(even){
		padding-left: 5px;
	}
	#movie .movieList li img{
		width: 100%;
	}
	#movie .movieList .image a::before{
		height: 100%;
	}
}
/*-----------------------------------------------
 calendar
-----------------------------------------------*/
#calendar{
	margin: 0 auto 40px;
}
#calendar h1{
	position: relative;
	height: 50px;
	margin-bottom: 40px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-calendar.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#calendar h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#calendar .list{
	margin-bottom: 20px;
	border-top: 1px dotted #50c7f2;
}
#calendar .list li{
	padding: 20px 0;
	border-bottom: 1px dotted #50c7f2;
	font-size: 24px;
	line-height: 1.2;
}
#calendar .list .date{
	position: absolute;
	width: 180px;
	height: 90px;
	box-sizing: border-box;
}
#calendar .list .year{
	font-size: 14px;
	font-weight: normal;
}
#calendar .list .day{
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	text-align: right;
}
#calendar .list .day span{
	font-size: 56px;
	font-weight: 700;
	font-family: impact;
	text-align: center;
}
#calendar .list .note{
	min-height: 90px;
	margin-left: 200px;
	padding-left: 20px;
	border-left: 3px solid #50c7f2;
	box-sizing: border-box;
}
#calendar .list .week{
	padding: 2px 0;
	width: 180px;
	background-color: #50c7f2;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	color: #fff;
}
#calendar .notice{
	text-align: right;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#calendar{
		width: auto;
		margin: 0 10px 30px;
	}
	#calendar h1{
		margin: 0 0 20px;
		font-size: 24px;
	}
	#calendar .list{
		margin-bottom: 40px;
	}
	#calendar .list .date{
		position: static;
		width: auto;
		height: auto;
		margin-bottom: 10px;
	}
	#calendar .list .week{
		width: auto;
	}
	#calendar .list .note{
		min-height: 0;
		margin: 0;
		padding: 0;
		border: none;
		font-size: 16px;
	}
	#calendar .list .day,
	#calendar .list .year{
		text-align: left;
	}
	#calendar .notice{
		text-align: left;
	}
	
}
/*-----------------------------------------------
 #news
-----------------------------------------------*/
#news{
	margin: 0 auto 40px;
}
#news h1{
	position: relative;
	height: 50px;
	margin-bottom: 20px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-blog.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#news h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}

#news dl.newsList dt{
	position: relative;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	color: #66ccff;
}

#news dl.newsList dd{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #50c7f2;
	line-height: 1.2;
	font-size: 20px;
}

#news dl.newsList dd a{
	color: #000;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#news{
		margin: 0 10px 30px;
	}
	#news h1{
		margin: 0 0 20px;
		font-size: 24px;
	}
}
/*-----------------------------------------------
 blog
-----------------------------------------------*/
#blog{
	margin: 0 auto 40px;
}
#blog h1{
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-blog.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#blog h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#blog .calendar{
	position: absolute;
	top: 23px;
	right: 0;
}
#blog .calendar a{
	display: inline-block;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #3eb134;
	font-size: 20px;
	line-height: 1.2;
	color: #ffff00;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#blog .calendar a:hover{
	background-color: #29cf54;
	text-decoration: none;
}
#blog .calendar a::before{
	content: "\f073";
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
}
#blog .calendar a::after{
	content: "\f105";
	margin-left: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
#blog .blogList{
	margin-bottom: 10px;
}
#blog .blogList li{
	padding: 20px 0;
    border-bottom: 1px dotted #50c7f2;
    background-image: url(/themes/fantasiabunko/images/global/icon/right.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 31px 500px;
}
#blog .blogList .image{
    float: left;
    width: 152px;
    border: 1px solid #efebe5;
    box-sizing: border-box;
    line-height: 0;
}
#blog .blogList .image img{
	width: 100%;
}
#blog .blogList .detail{
	float: right;
	width: 770px;
	min-height: 111px;
	padding-right: 31px;
	box-sizing: border-box;
}
#blog .blogList .detail .date{
	margin-bottom: 10px;
}
#blog .blogList .detail time{
	display: inline-block;
	margin-right: 20px;
	font-size: 16px;
	vertical-align: middle;
	color: #66ccff;
}
#blog .blogList .detail .category{
	display: inline-block;
	vertical-align: middle;
}
#blog .blogList .detail h2{
	font-size: 18px;
	line-height: 1.2;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#blog{
		margin: 0 10px 30px;
	}
	#blog h1{
		margin: 0;
		font-size: 24px;
	}
	#blog .calendar{
		position: static;
		text-align: center;
	}
	#blog .calendar a{
		display: block;
		border-radius: 10px;
	}
	#blog .blogList .image{
		width: 30%;
	}
	#blog .blogList .detail{
		width: 66%;
	}
	#blog .blogList .detail time{
		margin-right: 10px;
		font-size: 12px;
	}
}
/*-----------------------------------------------
 blogDetail
-----------------------------------------------*/
#blogDetail{
	margin: 0 auto 40px;
}
#blogDetail > h1{
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	margin-bottom: 20px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-blog.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#blogDetail > h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#blogDetail > h2{
	margin-bottom: 10px;
	border-bottom: 5px solid #000;
	padding-bottom: 5px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}
#blogDetail .sns{
	margin-bottom: 10px;
	font-size: 0;
	text-align: right;
}
#blogDetail .sns li{
	display: inline-block;
	margin-right: 10px;
}
#blogDetail .sns li:last-child{
	margin-right: 0;
}
#blogDetail .sns li img{
	width: 30px;
}
#blogDetail .calendar{
	position: absolute;
	top: 23px;
	right: 0;
}
#blogDetail .calendar a{
	display: inline-block;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #3eb134;
	font-size: 20px;
	line-height: 1.2;
	color: #ffff00;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#blogDetail .calendar a:hover{
	background-color: #29cf54;
	text-decoration: none;
}
#blogDetail .calendar a::before{
	content: "\f073";
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
}
#blogDetail .calendar a::after{
	content: "\f105";
	margin-left: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
#blogDetail .date{
	margin-bottom: 10px;
}
#blogDetail .date time{
	display: inline-block;
	margin-right: 20px;
	font-size: 16px;
	vertical-align: middle;
	color: #66ccff;
}
#blogDetail .date .category{
	display: inline-block;
	vertical-align: middle;
}
#blogDetail .post{
	margin-bottom: 50px;
	font-size: 16px;
	line-height: 1.5;
}
#blogDetail .post h1,
#blogDetail .post h2{
	font-size: 22px;
	line-height: 1.5;
}
#blogDetail .post h3{
	font-size: 22px;
	line-height: 1.5;
}
#blogDetail .post p{
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.5;
}
#blogDetail .post img{
	max-width: 100%;
}
#blogDetail .post a:hover img{
	opacity: 0.8;
	animation: btn 0.3s;
	-webkit-animation: btn 0.3s;
	-moz-animation: btn 0.3s;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#blogDetail{
		margin: 0 10px 30px;
	}
	#blogDetail > h1{
		margin: 0 0 10px;
		font-size: 24px;
	}
	#blogDetail > h2{
		font-size: 24px;
	}
	#blogDetail .calendar{
		position: static;
		text-align: center;
	}
	#blogDetail .calendar a{
		display: block;
		border-radius: 10px;
	}
}
/*-----------------------------------------------
 newRelease
-----------------------------------------------*/
#newRelease{
	margin: 0 auto 40px;
}
#newRelease h1{
	display: inline-block;
	position: relative;
	height: 50px;
	padding: 10px 0 10px 70px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-new-big.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 60px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#newRelease .title::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#newRelease h1 span{
	font-size: 50px;
}
#newRelease div.flag{
	height: 70px;
	line-height: 70px;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#newRelease{
		margin: 0 10px 0;
	}
	#newRelease h1{
		display: block;
		margin: 0;
		font-size: 24px;
	}
	#newRelease h1 span{
		font-size: 36px;
	}
	#newRelease h1::after{
		content:"";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		width: 100%;
		margin-top: 5px;
		border: 1px solid #50c7f2;
		box-sizing: border-box;
	}
	#newRelease .title::after{
		display: none;
		position: absolute;
	}
}
/*-----------------------------------------------
 product
-----------------------------------------------*/
#product{
	margin: 0 auto 40px;
}
#product h1{
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	margin-bottom: 20px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-series.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#product h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#product h1 span{
	position: absolute;
	right: 0;
	font-size: 14px;
	font-weight: 400;
}
#product h1 span::after{
	content: "\f107";
	margin-left: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
#product dl.pull {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 5px;
}
#product dl.pull dt {
    display: table-cell;
    padding-right: 10px;
    font-size: 20px;
    text-align: left;
    vertical-align: middle;
}
#product dl.pull dd {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}
#product dl.pull dd::after{
	display: block;
	content: "\f107";
	position: absolute;
	top: 0;
	right: 5px;
	height: 40px;
	margin-left: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: 40px;
	color: #50c7f2;
}
#product dl.pull select{
	width: 140px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 14px;
	font-weight: bold;
	line-height: 40px;
	color: #50c7f2;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#product dl.pull select:hover{
	background-color: #fcffd7;
}
#product .searchResult{
	margin-bottom: 20px;
	padding: 20px;
	background-color: #f9f9f4;
}
#product .searchResult h2{
	font-size: 18px;
	font-weight: 300;
}
#product .books{
	display: inline-block;
	font-size: 16px;
	vertical-align: top;
}
#product .books a{
	display: block;
	position: relative;
	width: 120px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #50c7f2;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 40px;
	color: #50c7f2;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#product .books a:hover{
	background-color: #fcffd7;
}
#product .books a::after{
	display: block;
	content: "\f105";
	position: absolute;
	top: 0;
	right: 5px;
	height: 40px;
	margin-left: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: 40px;
	color: #50c7f2;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#product{
		margin: 0px 10px 0;
	}
	#product h1{
		display: block;
		margin: 0 0 20px;
		font-size: 24px;
	}
	#product .select{
		text-align: right;
	}
	#product dl.pull select{
		width: 120px;
	}
	#product .books{
		margin-right: 5px;
		text-align: left;
	}
	#product dl.pull{
		margin-bottom: 5px;
	}
	#product dl.pull dt{
		font-size: 14px;
	}
}
/*-----------------------------------------------
 productDetail
-----------------------------------------------*/
#productDetail{
	margin-bottom: 40px;
}
#productDetail h1{
	margin-bottom: 10px;
	font-size: 26px;
	line-height: 1.2;
}
#productDetail .title{
	margin-bottom: 20px;
	border-bottom: 3px solid #50c7f2;
}
#productDetail .author{
	margin-bottom: 10px;
}
#productDetail .author li{
	display: inline-block;
	margin-right: 20px;
	line-height: 1.2;
}
#productDetail .author li:last-child{
	margin-right: 0;
}
#productDetail .author li a{
	color: #00a89f;
}
/* coverDetail */
#productDetail .coverDetail{
	float: left;
	width: 353px;
}
#productDetail .coverDetail figure{
	margin-bottom: 20px;
	text-align: center;
}
#productDetail .coverDetail figure img{
	max-width: 100%;
}
#productDetail .coverDetail .info dt {
    position: relative;
    float: left;
    clear: left;
    width: 80px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #d6d6d8;
    background-color: #76777e;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}
#productDetail .coverDetail .info dd {
    float: left;
    width: 262px;
    margin: 0 0 10px;
    padding-left: 10px;
    border-bottom: 1px solid #d6d6d8;
    line-height: 1.5;
}
/* contentDetail */
#productDetail .contentDetail{
	float: right;
	width: 562px;
}
#productDetail .contentDetail .catch{
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	font-family: "Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E",“メイリオ”,Meiryo,serif;
}
#productDetail .contentDetail p.text{
	margin-bottom: 20px;
	line-height: 1.8;
}
#productDetail .contentDetail .btnList{
	margin-bottom: 20px;
	font-size: 0;
}
#productDetail .contentDetail .btnList li{
	display: inline-block;
	width: 270px;
	font-size: 18px;
}
#productDetail .contentDetail .btnList .trial{
	margin-right: 20px;
}
#productDetail .contentDetail .btnList .trial a{
	display: block;
	padding: 5px 0;
	border: 1px solid #3eb479;
	border-radius: 10px;
	background-color: #3eb479;
	line-height: 1.2;
	text-align: center;
	color: #ffff00;
}
#productDetail .contentDetail .btnList .special a{
	display: block;
	padding: 5px 0;
	border: 1px solid #217fc4;
	border-radius: 10px;
	background-color: #fff;
	line-height: 1.2;
	text-align: center;
	color: #217fc4;
}
#productDetail .contentDetail .shop{
	padding: 10px 10px 0;
	background-color: #f9f9f4;
}
#productDetail .contentDetail .shop p{
	margin-bottom: 10px;
	font-weight: 700;
}
#productDetail .contentDetail .shop .bnrList{
	font-size: 0;
}
#productDetail .contentDetail .shop .bnrList li{
	display: inline-block;
	width: 172px;
	margin: 0 13px 13px 0;
}
#productDetail .contentDetail .shop .bnrList li:nth-child(3n){
	margin-right: 0;
}
#productDetail .contentDetail .shop .bnrList li img{
	width: 100%;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#productDetail{
		margin: 0px 10px 30px;
	}
	#productDetail .coverDetail{
		float: none;
		width: auto;
		max-width: 100%;
		margin-bottom: 10px;
	}
	#productDetail .coverDetail .info dt{
		width: 30%;
	}
	#productDetail .coverDetail .info dd{
		width: 70%;
		box-sizing: border-box;
	}
	#productDetail .contentDetail{
		float: none;
		width: auto;
	}
	#productDetail .contentDetail .btnList li.trial{
		float: left;
		width: 48%;
		margin: 0 4% 0 0;
	}
	#productDetail .contentDetail .btnList li.special{
		float: left;
		width: 48%;
		margin: 0;
	}
	#productDetail .contentDetail .shop .bnrList li{
		width: 49%;
		margin: 0 2% 2% 0 !important;
		box-sizing: border-box;
	}
	#productDetail .contentDetail .shop .bnrList li:nth-child(even){
		margin: 0 0 2% 0 !important;
	}
}
/*-----------------------------------------------
 productOther
-----------------------------------------------*/
#productOther{
}
#productOther p{
	margin-bottom: 20px;
	font-size: 20px;
}
#productOther h1{
	position: relative;
	padding: 10px 0 10px 0;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.2;
}
#productOther h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#productOther .column-video-auto,
#productOther .column-video-center,
#productOther .column-video-left,
#productOther .column-video-right{
	width: 600px;
	margin-bottom: 20px;
}
#productOther .acms-col-sm-12{
	width: 100%;
}
/* character */
#productOther .characterColumn{
	float: left;
	width: 100%;
	margin-bottom: 20px;
	box-sizing: border-box;
	padding: 0 10px;
}
#productOther .characterColumn .image{
	margin-bottom: 10px;
	text-align: center;
}
#productOther .characterColumn .image img{
	max-width: 100%;
}
#productOther .characterColumn .subtitle{
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 300;
}
#productOther .characterColumn figcaption{
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 500;
}
#productOther .characterColumn .text{
	font-size: 15px;
	line-height: 1.5;
}
#productOther .characterColumn+hr.clearHidden{
	display: none;
}

#productOther .characterColumn.col-lg-3{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
#productOther .characterColumn.col-lg-4{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33%;
    -ms-flex: 0 0 33%;
    flex: 0 0 33%;
    max-width: 33.3%;
}
#productOther .characterColumn.col-lg-6{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

#productOther .column-image-center{
	margin-bottom: 30px;
}

#productOther .characterColumn .image{
	float: left;
	width: 30%;
	margin-right: 10px;
}

#productOther .characterColumn.col-lg-3 .image{
	float: none;
	width: auto;
	margin-right: 0;
}
#productOther .characterColumn.col-lg-4 .image{
	float: none;
	width: auto;
	margin-right: 0;
}
#productOther .characterColumn.col-lg-6 .image{
	float: left;
	width: 30%;
	margin-right: 10px;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#productOther h1{
		margin-bottom: 10px;
	}
	#productOther{
		margin: 0px 10px 0;
	}
	#productOther p{
		font-size: 16px;
	}
	#productOther .column-video-auto,
	#productOther .column-video-center,
	#productOther .column-video-left,
	#productOther .column-video-right{
		min-width: 0;
		max-width: 100%;
		width: 100%;
	}
	#productOther .characterColumn.col-lg-3{
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 50%;
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	}
	#productOther .characterColumn.col-lg-6 .image{
		float: none;
		width: auto;
		margin-right: 0;
	}
}

/*-----------------------------------------------
 newRelease
-----------------------------------------------*/
#newRelease{
	margin: 0 auto 0;
}
#newRelease h1{
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-new.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#newRelease.books h1{
	margin-bottom: 0;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-series.png);
}
#newRelease .title{
	position: relative;
	margin-bottom: 20px;
}
#newRelease .title::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#newRelease h1 span{
	position: absolute;
	right: 0;
	font-size: 14px;
	font-weight: 400;
}
#newRelease h1 span::after{
	content: "\f107";
	margin-left: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
#newRelease ul.productThumbList{
	padding: 10px 0 0 10px;
	background-color: #f9f9f4;
	font-size: 0;
}
#newRelease ul.productThumbList > li {
    display: inline-block;
    width: 83px;
    margin: 0 10px 10px 0;
    box-sizing: border-box;
    border: 1px solid #efebe5;
    font-size: 0;
    line-height: 0;
}
#newRelease ul.productThumbList > li img{
	width: 100%;
}
#newRelease .productList{
	border-top: 1px dotted #50c7f2;
}
#newRelease.books .productList{
	border-top: none;
}
#newRelease .productList > li{
	padding: 20px 0;
	border-bottom: 1px dotted #50c7f2;
}
#newRelease .productList > li div.cover{
    float: left;
    width: 180px;
    margin-bottom: 20px;
    line-height: 0;
}
#newRelease .productList > li div.cover figure{
	margin-bottom: 5px;
    border: 1px solid #efebe5;
}
#newRelease .productList > li div.cover figure img {
    width: 100%;
}

#newRelease .productList > li div.detail{
	float: right;
	width: 740px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
#newRelease .productList > li div.detail .head{
	margin-bottom: 15px;
	padding: 0 0 0 10px;
	border-left: 5px solid #50c7f2;
}
#newRelease .productList > li div.detail h3{
	margin-bottom: 10px;
	font-size: 24px;
	line-height: 1.2;
}
#newRelease .productList > li ul.author{
	display: inline-block;
}
#newRelease .productList > li ul.author li {
    display: inline-block;
    margin-right: 10px;
    line-height: 1.5;
}
#newRelease .productList > li ul.author li a {
    font-weight: bold;
    color: #00a89f;
}
#newRelease .productList > li div.detail p.release{
    line-height: 1.5;
}
#newRelease .productList > li div.detail .catch{
	margin-bottom: 10px;
	padding-top: 15px;
	border-top: 1px dotted #bcbcbc;
	font-size: 20px;
	font-family: "Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E",“メイリオ”,Meiryo,serif;
}
#newRelease .productList > li .btnList{
	font-size: 0;
}
#newRelease .productList > li .btnList li{
	display: block;
	font-size: 14px;
}
#newRelease .productList > li .btnList .trial{
	margin-bottom: 5px;
}
#newRelease .productList > li .btnList .trial a{
	display: block;
	padding: 5px 0;
	border: 1px solid #3eb479;
	border-radius: 10px;
	background-color: #3eb479;
	line-height: 1.2;
	text-align: center;
	color: #ffff00;
}
#newRelease .productList > li .btnList .special a{
	display: block;
	padding: 5px 0;
	border: 1px solid #217fc4;
	border-radius: 10px;
	background-color: #fff;
	line-height: 1.2;
	text-align: center;
	color: #217fc4;
}
#newRelease .productList .shop{
	padding: 13px 13px 0;
	background-color: #f9f9f4;
}
#newRelease .productList .shop p{
	margin-bottom: 10px;
	font-weight: 700;
}
#newRelease .productList .shop .bnrList{
	font-size: 0;
}
#newRelease .productList .shop .bnrList li{
	display: inline-block;
	width: 172px;
	margin: 0 13px 13px 0;
}
#newRelease .productList .shop .bnrList li:nth-child(5n){
	margin-right: 0;
}
#newRelease .productList .shop .bnrList li img{
	width: 100%;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#newRelease{
		margin: 0 10px;
	}
	#newRelease h1 {
        display: block;
	    margin: 0;
	    font-size: 24px;
	}
	#newRelease .title{
		margin-bottom: 0;
	}
	#newRelease .title::after{
		display: none;
	}
	#newRelease ul.productThumbList{
		padding: 2% 0 0 2%;
	}
	#newRelease ul.productThumbList > li {
	    width: 18%;
	    margin: 0 2% 2% 0;
	}
	#newRelease .productList > li div.cover{
		width: 30%;
		min-height: 120px;
	}
	#newRelease .productList > li div.detail{
		width: 66%;
		min-height: 0;
	}
	#newRelease .productList > li div.detail h3{
		font-size: 18px;
	}
	#newRelease .productList > li div.detail .catch{
		font-size: 18px;
		line-height: 1.2;
	}
	#newRelease .productList .shop{
		padding: 2% 2% 0 2%;
	}
	#newRelease .productList .shop .bnrList li{
		width: 49%;
		margin: 0 2% 2% 0 !important;
		box-sizing: border-box;
	}
	#newRelease .productList .shop .bnrList li:nth-child(even){
		margin: 0 0 2% 0 !important;
	}
}
/*-----------------------------------------------
 history
-----------------------------------------------*/
#history{
	margin: 0 auto 40px;
}
#history h1{
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	margin-bottom: 20px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-series.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#history h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#history .historyList{
	padding: 10px;
	background-color: #f9f9f4;
	font-size: 0;
}
#history .historyList li{
	display: inline-block;
	width: 153px;
	padding: 0 4px;
	box-sizing: border-box;
	vertical-align: top;
}
#history .historyList .image{
	margin-bottom: 5px;
	border: 1px solid #efece6;
}
#history .historyList li img{
	width: 100%;
}
#history .historyList figcaption{
	font-size: 14px;
	line-height: 1.2;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#history{
		margin: 0px 10px 30px;
	}
	#history h1{
		display: block;
		margin: 0 0 10px;
		font-size: 24px;
	}
	#history .historyList li{
		width: 33.3%;
		margin-bottom: 10px;
		padding: 0 2%;
	}
}
/*-----------------------------------------------
 series
-----------------------------------------------*/
#series{
	margin: 0 auto 40px;
}
#series h1{
	position: relative;
	padding: 10px 0 10px 0;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.2;
}
#series h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#series .seriesList{
	font-size: 0;
}
#series .seriesList li{
    display: inline-block;
    width: 188px;
    margin-bottom: 20px;
    padding: 0 8px;
    box-sizing: border-box;
    vertical-align: top;
}
#series .seriesList .image{
	margin-bottom: 5px;
	border: 1px solid #efece6;
}
#series .seriesList li img{
	width: 100%;
}
#series .seriesList figcaption{
	font-size: 14px;
	line-height: 1.2;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#series{
		margin: 0px 10px 30px;
	}
	#series .seriesList li{
		width: 25%;
		margin-bottom: 10px;
		padding: 0 2%;
	}
	#series .seriesList figcaption{
		font-size: 12px;
	}
}
/*-----------------------------------------------
 search
-----------------------------------------------*/
#search{
	display: block !important;
	margin: 0 auto 40px;
}
#search h1{
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-search.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#search h1::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
section#search dl{
	display: table;
	padding: 20px 0;
	border-bottom: 1px dotted #00b09b;
}
section#search dl dt{
	display: table-cell;
	width: 220px;
	font-size: 20px;
	text-align: left;
	vertical-align: middle;
}
section#search dl dd{
	display: table-cell;
	width: 720px;
	vertical-align: middle;
}
section#search input[type="search"]{
	width: 400px;
	margin-right: 10px;
	padding: 5px 30px 5px 10px;
	border: 1px solid #50c7f2;
	background-color: #ffffff;
	font-size: 18px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
section#search input[type="search"]::-webkit-input-placeholder{
	color: #b8ecff;
}
section#search input[type="search"]:focus{
	background-color: #fcffd7;
}
section#search input[type="submit"]{
	padding: 5px 20px 5px 20px;
	border-radius: 10px;
	border: none;
    appearance: none;
    outline: none;
	background-color: #3eb134;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5;
	color: #fff;
	font-family: "Font Awesome 5 Free";
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
section#search input[type="submit"]:hover{
	background-color: #4dc8b9;
}
section#search select{
	position: relative;
	width: 520px;
	padding: 10px;
	border: 1px solid #50c7f2;
	background-color: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	color: #50c7f2;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
section#search select:hover{
	background-color: #fcffd7;
}
section#search div.indexSearch{
	float: left;
	width: 50%;
	padding: 20px 0;
}
section#search div.indexSearch p.title{
	font-weight: 400;
	font-size: 20px;
}
section#search div.indexSearch ul{
	font-size: 0;
}
section#search div.indexSearch ul li{
	display: inline-block;
	margin: 0 1px 1px 0;
	vertical-align: top;
}
section#search div.indexSearch ul li a{
	display: block;
	width: 80px;
	height: 30px;
	background-color: #50c7f2;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	color: #ffff00;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
section#search div.indexSearch ul li a:hover{
	background-color: #04bcff;
}
section#search div.indexSearch ul li.blank{
	width: 80px;
	height: 30px;
}

@media screen and (max-width:767px) and (min-width: 1px){
	#search{
		margin: 0 10px 0;
	}
	#search h1{
		display: block;
		margin: 0 0 10px;
		font-size: 24px;
	}
	section#search dl{
		display: block;
		margin-bottom: 20px;
		padding: 0 0 20px;
		border-bottom: 1px dotted #00b09b;
	}
	section#search dl dt{
		display: block;
		width: auto;
		font-size: 16px;
		line-height: 1.5;
	}
	section#search input[type="search"]{
		width: 50%;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	section#search input[type="submit"]{
		font-size: 16px;
	}
	section#search select{
		width: 100%;
		font-size: 16px;
	}
	section#search div.indexSearch{
		float: none;
		width: auto;
		margin: 0 0 10px 0;
		padding: 0;
	}
	section#search div.indexSearch p.title{
		font-size: 16px;
	}
	section#search div.indexSearch ul li{
		width: 20%;
		height: 50px;
		margin: 0;
	}
	section#search div.indexSearch ul li.blank{
		width: 20%;
		height: 50px;
	}
	section#search div.indexSearch ul li a{
		width: auto;
		box-sizing: border-box;
		height: 50px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		line-height: 50px;
	}
}
/*-----------------------------------------------
 magazine
-----------------------------------------------*/
#magazine{
	margin: 0 auto 40px;
}
#magazine h1{
	display: inline-block;
	position: relative;
	height: 50px;
	padding: 10px 0 10px 60px;
	background-color: #fff;
	background-image: url(/themes/fantasiabunko/images/global/title/icon-magazine.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 38px;
	font-weight: 300;
	line-height: 50px;
}
#magazine .title{
	position: relative;
	margin-bottom: 20px;
}
#magazine .title::after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #50c7f2;
	box-sizing: border-box;
}
#magazine div.flag {
    height: 70px;
    line-height: 70px;
}
#magazine .tabs{
	position: absolute;
	top: 23px;
	right: 0;
}
#magazine .tabs a{
	display: inline-block;
	margin-left: 10px;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #3eb134;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.2;
	color: #ffff00;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#magazine .tabs a:hover{
	background-color: #29cf54;
	text-decoration: none;
}
#magazine .tabs a::before{
	content: "\f518";
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
#magazine .tabs a::after{
	content: "\f105";
	margin-left: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
#magazine .now{
	font-size: 24px;
	line-height: 1.5;
}
/* cover */
#magazine .cover{
	float: left;
	width: 426px;
	margin-bottom: 20px;
}
#magazine .cover img{
	width: 100%;
}
/* detail */
#magazine .detail{
	float: right;
	position: relative;
	width: 472px;
}
#magazine .magazine{
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}
#magazine .no{
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
	font-size: 62px;
	font-weight: 700;
	line-height: 1.2;
}
#magazine .date{
	font-size: 40px;
}
#magazine .date span{
	font-size: 50px;
	font-weight: 700;
}
#magazine .notice{
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #000;
}
#magazine .coverDetail{
	margin-bottom: 20px;
	font-size: 20px;
	color: #217fc4;
}
#magazine .author{
	margin-bottom: 10px;
}
#magazine .content{
	margin-bottom: 20px;
	padding: 15px;
	background-color: #50c7f2;
	color: #fff;
}
#magazine .pop{
	position: absolute;
	z-index: 1;
	top: 90px;
	right: 0;
}
#magazine .shop{
	padding: 13px 13px 0;
	background-color: #f9f9f4;
}
#magazine .shop p{
	margin-bottom: 10px;
	font-weight: 700;
}
#magazine .shop .bnrList{
	font-size: 0;
}
#magazine .shop .bnrList li{
	display: inline-block;
	width: 172px;
	margin: 0 13px 13px 0;
}
#magazine .shop .bnrList li:nth-child(5n){
	margin-right: 0;
}
#magazine .shop .bnrList li img{
	width: 100%;
}
/* item */
#magazine section{
	margin-bottom: 40px;
}
#magazine h2{
	margin-bottom: 20px;
	border-bottom: 1px solid #000;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
}
#magazine .itemList li{
	float: left;
	width: 285px;
	margin: 0 42px 20px 0;
}
#magazine .itemList li .image{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	text-align: center;
}
#magazine .itemList li .image a{
	margin: 0 auto;
}
#magazine .itemList li .image img{
	max-width: 100%;
}
#magazine .itemList li:nth-child(3n){
	margin-right: 0;
}
#magazine .itemList figcaption{
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	color: #2380c5;
}
#magazine .itemList p{
	line-height: 1.2;
}
/* media */
#magazine .mediaList li{
	float: left;
	width: 470px;
	margin-bottom: 2px;
	padding-bottom: 30px;
	box-sizing: border-box;
}
#magazine .mediaList .image{
	float: left;
	width: 90px;
	box-sizing: border-box;
	border: 1px solid #e6e8ea;
	font-size: 0;
}
#magazine .mediaList .image img{
	max-width: 100%;
}
#magazine .mediaList .text{
	float: right;
	width: 360px;
	box-sizing: border-box;
}
#magazine .mediaList li:nth-child(odd){
	border-right: 1px dotted #000;
}
#magazine .mediaList li:nth-child(odd) .text{
	padding-right: 20px;
}
#magazine .mediaList li:nth-child(even){
	padding-left: 20px;
}
#magazine .mediaList li:nth-child(even) .text{
	width: 340px;
}
#magazine .mediaList figcaption{
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 1.2;
	color: #2380c5;
}
#magazine .outline{
    padding: 20px;
    background: #f9f9f4;
    font-size: 16px;
    margin-top: 20px;
} 
/* lineup */
#magazine .lineupList li{
	margin-bottom: 20px;
	box-sizing: border-box;
}
#magazine .lineupList .image{
	float: left;
	position: relative;
	width: 160px;
	box-sizing: border-box;
	border: 1px solid #e6e8ea;
	text-align: center;
}
#magazine .lineupList .image img{
	max-width: 100%;
}
#magazine .lineupList .text{
	float: left;
	width: 100%;
	margin: 0 0 0 -160px;
	padding: 0;
	box-sizing: border-box;
}
#magazine .lineupList figcaption{
	margin: 0 0 10px 170px;
	font-size: 18px;
	line-height: 1.2;
	color: #2380c5;
	vertical-align: middle;
}
#magazine .lineupList .text p{
	margin-left: 170px;
}
#magazine .lineupList .text p a{
	color: #00a89f;
}

/* series */
#magazine .seriesList > div{
	width: 460px;
	margin-bottom: 20px;
	box-sizing: border-box;
}
#magazine .seriesList .image{
	float: left;
	width: 92px;
	box-sizing: border-box;
	border: 1px solid #e6e8ea;
	font-size: 0;
}
#magazine .seriesList .text{
	float: right;
	width: 350px;
	box-sizing: border-box;
}
#magazine .seriesList figcaption{
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 1.2;
	color: #2380c5;
}
#magazine .seriesList > div:nth-child(odd){
	float: left;
}
#magazine .seriesList > div:nth-child(even){
	float: right;
}
/* link */
#magazine .pagelink li{
	width: 450px;
}
#magazine .pagelink li a{
	display: block;
	position: relative;
	height: 110px;
	background-color: #50c7f2;
	line-height: 110px;
	text-align: center;
	font-size: 36px;
	color: #fff;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#magazine .pagelink li a::after {
	position: absolute;
	right: 10px;
    content: "\f105";
    margin-left: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
#magazine .pagelink a:hover{
	background-color: #13a4f7;
}
#magazine .pagelink li:nth-child(1){
	float: left;
}
#magazine .pagelink li:nth-child(2){
	float: right;
}
/* next */
#magazine .magazineImage{
	margin-bottom: 20px;
	text-align: center;
}
#magazine .magazineImage img{
	max-width: 100%;
}
#magazine .magazineImage figcaption{
	font-size: 14px;
	color: #333;
}
#magazine .nextMagazineList{
	margin-bottom: 20px;
}
#magazine .nextMagazineList li{
	padding: 20px 0;
	border-bottom: 1px solid #000;
}
#magazine .nextMagazineList li .sub{
	margin-bottom: 5px;
	font-size: 18px;
}
#magazine .nextMagazineList li .ti{
	font-size: 36px;
	line-height: 1.2;
}
#magazine .nextMagazineList li.top .ti{
	font-size: 48px;
}

#magazine .pickupList{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -32px;
}
#magazine .pickupList li{
	width: 210px;
	margin: 0 33px 20px 0;
	box-sizing: border-box;
}
#magazine .pickupList .image{
	margin-bottom: 10px;
	border: 1px solid #efebe5;
}
#magazine .pickupList .image img{
	width: 100%;
}
#magazine .pickupList figcaption{
	line-height: 1.5;
}
#magazine .pickupList figcaption a{
	color: #2380c5;
}
#magazine .pickupList .author{
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
}
#magazine .pickupList p.text{
	margin-bottom: 10px;
	font-weight: 300;
}
#magazine .pickupList .tags span{
	display: inline-block;
	width: 95px;
	margin-right: 5px;
	font-size: 12px;
	text-align: center;
	color: #fff;
}
#magazine .pickupList .tags span.anime{
	background-color: #c39eff;
	line-height: 1.5;
}
#magazine .pickupList .tags span.comic{
	background-color: #00ceb7;
	line-height: 1.5;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#magazine{
		margin: 0 10px 0;
	}
	#magazine section{
		margin-bottom: 30px;
	}
	#magazine h1{
		display: block;
		margin: 0;
		font-size: 24px;
	}
	#magazine h1 span{
		font-size: 36px;
	}
	#magazine h1::after{
		content:"";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		width: 100%;
		margin-top: 5px;
		border: 1px solid #50c7f2;
		box-sizing: border-box;
	}
	#magazine .title::after{
		display: none;
		position: absolute;
	}
	#magazine h2{
		font-size: 22px;
	}
	#magazine .pop{
		position: absolute;
		z-index: 1;
		width: 20%;
		top: 50px;
		right: 0;
	}
	#magazine .pop img{
		width: 100%;
		max-width: 130px;
	}
	/* cover */
	#magazine .cover{
		float: none;
		width: auto;		
	}
	/* detail */
	#magazine .detail{
		float: none;
		width: auto;
		margin: 0 0 0;	
	}
	#magazine .magazine{
		font-size: 18px;
	}
	#magazine .no{
		margin-bottom: 5px;
		font-size: 40px;
	}
	#magazine .date{
		font-size: 22px;
	}
	#magazine .date span{
		font-size: 30px;
	}
	#magazine .coverDetail{
		font-size: 18px;
	}
	#magazine .shop{
		margin-bottom: 10px;
		padding: 2% 2% 0 2%;
	}
	#magazine .shop .bnrList li{
		width: 49%;
		margin: 0 2% 2% 0 !important;
		box-sizing: border-box;
	}
	#magazine .shop .bnrList li:nth-child(even){
		margin: 0 0 2% 0 !important;
	}
	#magazine .tabs{
		position: static;
		text-align: center;
	}
	#magazine .tabs a{
		display: block;
		margin-bottom: 10px;
		border-radius: 10px;
	}
	/* item */
	#magazine .itemList li:nth-child(odd){
		float: left;
		width: 45%;
		margin: 0 5% 20px 0;
	}
	#magazine .itemList li:nth-child(even){
		width: 45%;
		margin: 0 0 20px 5%;
	}
	/* media */
	#magazine .mediaList li{
		float: none;
		width: auto;
		margin: 0 0 10px 0;
	}
	#magazine .mediaList .image{
		float: left;
		width: 90px;
	}
	#magazine .mediaList li:nth-child(odd),
	#magazine .mediaList li:nth-child(even){
		border-right: none;
		border-bottom: 1px dotted #000;
		padding: 0 0 10px 0;
	}
	#magazine .mediaList li:nth-child(odd) .text,
	#magazine .mediaList li:nth-child(even) .text{
		width: 100%;
		margin: 0 0 0 -90px;
		padding: 0;
	}
	#magazine .mediaList .text figcaption{
		margin-left: 100px;
	}
	#magazine .mediaList .text{
		float: left;
	}
	#magazine .mediaList .text p{
		margin-left: 100px;
	}
	/* lineup */
	#magazine .lineupList .image{
		float: left;
		width: 92px;
	}
	#magazine .lineupList .text{
		margin-left: -92px;
	}
	#magazine .lineupList figcaption{
		margin: 0 0 10px 100px;
	}
	#magazine .lineupList .text p{
		margin-left: 100px;
	}
	/* series */
	#magazine .seriesList .image{
		float: left;
		width: 92px;
	}
	#magazine .seriesList > div:nth-child(odd),
	#magazine .seriesList > div:nth-child(even){
		float: none;
		width: auto;
		margin: 0 0 10px 0;
	}
	#magazine .seriesList > div:nth-child(odd) .text,
	#magazine .seriesList > div:nth-child(even) .text{
		width: 100%;
		margin: 0 0 0 -92px;
		padding: 0;
	}
	#magazine .seriesList .text figcaption{
		margin-left: 100px;
	}
	#magazine .seriesList .text{
		float: left;
	}
	#magazine .seriesList .text p{
		margin-left: 100px;
	}
	/* link */
	#magazine .pagelink{
		margin-bottom: 30px;
	}
	#magazine .pagelink li{
		width: 48%;
		height: 40px;
	}
	#magazine .pagelink li a{
		height: 40px;
		line-height: 40px;
		font-size: 18px;
	}
	#magazine .pickupList{
		margin: 0;
	}
	#magazine .pickupList li{
		width: 50%;
		flex-basis: 50%;
		margin: 0 0 20px;
		padding: 0 10px;
	}
	#magazine .pickupList .tags span {
		width: auto;
	    padding: 0 5px;
	}
}

/*-----------------------------------------------
 notfound
-----------------------------------------------*/
#notfound{
	padding-top: 100px;
	margin: 0 auto 40px;
}
#notfound h1{
	margin-bottom: 40px;
	text-align: center;
}
#notfound p{
	margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.8;
    text-align: center;
}
@media screen and (max-width:767px) and (min-width: 1px){
	#notfound{
		padding-top: 20px;
		margin: 0px 10px 0;
	}
	#notfound h1{
		margin-bottom: 20px;
		padding: 0 20px;
	}
	#notfound h1 img{
		max-width: 100%;
	}
	#notfound p{
		text-align: left;
	}
}
/*-----------------------------------------------
 special
-----------------------------------------------*/
#specialMenu{
	display: none;
	position: fixed;
	z-index: 10;
	bottom: 2px;
	right: 18px;
}
#specialMenuClose{
	display: none;
	position: fixed;
	z-index: 10;
	bottom: 2px;
	right: 18px;
}
#special{
	width: 1200px;
	margin: 0 auto;
}
.p-lp-box-01,
.p-lp-box-02,
.p-lp-box-03{
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
}
#special .keyvisual{
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
	font-size: 0;
	text-align: center;
}
#special .keyvisual img{
	max-width: 100%;
}
#special .sns{
	padding: 20px 0;
	text-align: right;
	font-size: 0;
}
#special .sns li{
	display: inline-block;
	width: 30px;
	margin-left: 10px;
	font-size: 0;
}
#special .sns li img{
	width: 30px;
}
#special nav{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
}
#special .specialNav{
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 15px 0;
	box-sizing: border-box;
	text-align: right;
}
#special .specialNav li{
	display: inline-block;
	padding: 0 15px;
	border-left: 1px solid #fff;
	font-size: 16px;
}
#special .specialNav li a{
	color: #fff;
}
#special nav .logo{
	position: absolute;
	left: 0;
	bottom: 0;
	border: none;
}
/* h2 */
#special h2{
	margin-bottom: 20px;
	text-align: center;
}
/* info */
#special .information{
	overflow-y: scroll;
	max-height: 120px;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid #dfdfdf;
}
#special .information li{
	position: relative;
	padding-left: 120px;
	font-size: 16px;
	line-height: 1.5;
}
#special .information time {
    position: absolute;
    left: 0;
    color: #666;
}
#special .information time::after {
    content: "\f0da";
    display: inline-block;
    padding-left: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #000;
}
/* video */
#special .column-video-center{
	max-width: 600px;
	margin: 0 auto 40px;
	box-sizing: border-box;
}
#special .column-video-left{
	display: block;
	float: none;
	max-width: 600px;
	margin: 0 auto 40px 0;
	box-sizing: border-box;
}
#special .column-video-right{
	display: block;
	float: none;
	max-width: 600px;
	margin: 0 0 40px auto;
	box-sizing: border-box;
}
/* image */
#special .columnImage{
	margin-bottom: 20px;
}
/* character */
#special .characterColumn{
	float: left;
	width: 100%;
	margin-bottom: 20px;
	box-sizing: border-box;
	padding: 0 10px;
}
#special .characterColumn .image{
	margin-bottom: 10px;
	text-align: center;
}
#special .characterColumn .image img{
	max-width: 100%;
}
#special .characterColumn figcaption{
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 500;
}
#special .characterColumn .text{
	font-size: 15px;
	line-height: 1.5;
}
#special .characterColumn+hr.clearHidden{
	display: none;
}

#special .characterColumn.col-lg-3{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
#special .characterColumn.col-lg-4{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33%;
    -ms-flex: 0 0 33%;
    flex: 0 0 33%;
    max-width: 33.3%;
}
#special .characterColumn.col-lg-6{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

#special .characterColumn .image{
	float: left;
	width: 30%;
	margin-right: 10px;
}

#special .characterColumn.col-lg-3 .image{
	float: none;
	width: auto;
	margin-right: 0;
}
#special .characterColumn.col-lg-4 .image{
	float: none;
	width: auto;
	margin-right: 0;
}
#special .characterColumn.col-lg-6 .image{
	float: left;
	width: 30%;
	margin-right: 10px;
}

/* product */
#special .product{
	margin-bottom: 20px;
}
#special .product .title{
	margin-bottom: 20px;
	border-bottom: 2px solid #000;
}
#special .product .title .bookTitle{
	margin-bottom: 5px;
	font-size: 26px;
	font-weight: 700;
}
#special .product .author{
	margin-bottom: 10px;
}
#special .product .author li{
	display: inline-block;
	margin-right: 20px;
	line-height: 1.2;
}
#special .product .author li:last-child{
	margin-right: 0;
}
#special .product .author li a{
	color: #00a89f;
}
/* coverDetail */
#special .product .coverDetail{
	float: left;
	width: 316px;
}
#special .product .coverDetail figure{
	margin-bottom: 20px;
	text-align: center;
}
#special .product .coverDetail figure img{
	max-width: 100%;
}
#special .product .coverDetail .info dt {
    position: relative;
    float: left;
    clear: left;
    width: 80px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #d6d6d8;
    background-color: #76777e;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}
#special .product .coverDetail .info dd {
    float: left;
    width: 226px;
    margin: 0 0 10px;
    padding-left: 10px;
    border-bottom: 1px solid #d6d6d8;
    line-height: 1.5;
}
/* contentDetail */
#special .product .contentDetail{
	float: right;
	width: 854px;
}
#special .product .contentDetail .catch{
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	font-family: "Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E",“メイリオ”,Meiryo,serif;
}
#special .product .contentDetail p.text{
	margin-bottom: 20px;
	line-height: 1.8;
}
#special .product .contentDetail .btnList{
	margin-bottom: 20px;
	font-size: 0;
}
#special .product .contentDetail .btnList li{
	display: inline-block;
	width: 270px;
	font-size: 18px;
}
#special .product .contentDetail .btnList .trial{
	margin-right: 20px;
}
#special .product .contentDetail .btnList .trial a{
	display: block;
	padding: 8px 0;
	border: 1px solid #3eb479;
	border-radius: 10px;
	background-color: #3eb479;
	font-size: 28px;
	line-height: 1.2;
	text-align: center;
	color: #ffff00;
}
#special .product .contentDetail .btnList .special a{
	display: block;
	padding: 5px 0;
	border: 1px solid #217fc4;
	border-radius: 10px;
	background-color: #fff;
	line-height: 1.2;
	text-align: center;
	color: #217fc4;
}
#special .product .contentDetail .shop{
	padding: 10px;
	background-color: #f9f9f4;
}
#special .product .contentDetail .shop p{
	margin-bottom: 10px;
	font-weight: 700;
}
#special .product .contentDetail .shop .bnrList{
	display: none;
	font-size: 0;
}
#special .product .contentDetail .shop .bnrList li{
	display: inline-block;
	width: 156px;
	margin: 0 13px 13px 0;
}
#special .product .contentDetail .shop .bnrList li:nth-child(5n){
	margin-right: 0;
}
#special .product .contentDetail .shop .bnrList li img{
	width: 100%;
}
#special .product .contentDetail .shop .btnOpen{
	cursor: pointer;
	width: 791px;
	height: 28px;
	margin: 0 auto;
    padding: 15px;
	background-image: url(/themes/fantasiabunko/images/global/navigation/btnbuy-close@2x.png);
	background-size: 791px 28px;
    background-repeat: no-repeat;
    background-position: center center;
}
#special .product .contentDetail .shop .btnClose{
	cursor: pointer;
	width: 791px;
	height: 28px;
	margin: 0 auto;
    padding: 15px;
	background-image: url(/themes/fantasiabunko/images/global/navigation/btnbuy-open@2x.png);
	background-size: 791px 28px;
    background-repeat: no-repeat;
    background-position: center center;
}
/* シリーズ */
#special .series .wrap{
}
#special .series h2{
	cursor: pointer;
	padding: 10px 0;
	background-color: #554c82;
	font-size: 36px;
	font-weight: 500;
	text-align: center;
	color: #fff;
}

#special .series h2::after{
	content: "";
	display: inline-block;
	width: 35px;
	height: 35px;
	margin-left: 15px;
	background-image: url(/themes/fantasiabunko/images/global/navigation/series-close@2x.png);
	background-size: 35px 35px;
	vertical-align: bottom;
}

#special .series h2.close::after{
	background-image: url(/themes/fantasiabunko/images/global/navigation/series-open@2x.png);
}
#special .seriesList{
	width: 1128px;
	margin: 0 auto;
	font-size: 0;
}
#special .seriesList li{
    display: inline-block;
    width: 188px;
    margin-bottom: 20px;
    padding: 0 8px;
    box-sizing: border-box;
    vertical-align: top;
}
#special .seriesList .image{
	margin-bottom: 5px;
	border: 1px solid #efece6;
}
#special .seriesList li img{
	width: 100%;
}
#special .seriesList figcaption{
	font-size: 14px;
	line-height: 1.2;
}

/* parallax */

#special .parallax{
	height: 400px;
	margin-bottom: 20px;
}
#special .parallax div{
	height: 400px;
	background-attachment: fixed;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
}

@media screen and (max-width:767px) and (min-width: 1px){
	#special{
		overflow-x: hidden;
		width: auto;
	}
	#special h2{
	    width: 200%;
	    margin: 0 -50% 10px;
	    text-align: center;
	}
	#special .information{
		margin: 0 20px 20px;
	}
	#special h2 img{
		width: 100%;
	}
	#special .column-video-center{
		margin-bottom: 20px;
		padding: 0 20px;
	}
	#special .column-video-left{
		margin-bottom: 20px;
		padding: 0 20px;
	}
	#special .column-video-right{
		margin-bottom: 20px;
		padding: 0 20px;
	}
	#specialMenu{
		display: block;
	}
	#special nav{
		background: none;
	}
	#special .specialNav{
		width: auto;
		margin: 0 auto;
		padding: 0 0 52px 0;
		background-color: rgba(0,0,0,0.7);
	}
	#special .specialNav li{
		display: none;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-left: none;
	}
	#special .specialNav li.logo{
		display: block;
		height: auto;
		line-height: 0;
		max-width: 180px;
	}
	#special .specialNav li.logo img{
		width: 100%;
		height: auto;
	}
	#special .characterColumn.col-lg-3{
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 50%;
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	}
	/* product */
	#special .product{
		margin: 0 10px 20px;
	}
	#special .product .coverDetail{
		float: none;
		text-align: center;
		width: auto;
	}
	#special .product .coverDetail img{
		max-width: 100%;
	}
	#special .product  .coverDetail .info{
		display: none;
	}
	#special .product  .coverDetail .info dt{
		width: 30%;
	}
	#special .product  .coverDetail .info dd{
		width: 70%;
		box-sizing: border-box;
		text-align: left;
	}
	#special .product .contentDetail{
		float: none;
		width: auto;
	}
	#special .product .contentDetail .shop .bnrList li{
		width: 49%;
		margin: 0 2% 2% 0 !important;
		box-sizing: border-box;
	}
	#special .product .contentDetail .shop .bnrList li:nth-child(even){
		margin: 0 0 2% 0 !important;
	}
	#special .product .contentDetail .shop .btnOpen{
		cursor: pointer;
		width: 274px;
		height: 28px;
		margin: 0 auto;
	    padding: 15px;
		background-image: url(/themes/fantasiabunko/images/global/navigation/btnbuy-close-sp@2x.png);
		background-size: 274px 28px;
	    background-repeat: no-repeat;
	    background-position: center center;
	}
	#special .product .contentDetail .shop .btnClose{
		cursor: pointer;
		width: 274px;
		height: 28px;
		margin: 0 auto;
	    padding: 15px;
		background-image: url(/themes/fantasiabunko/images/global/navigation/btnbuy-open-sp@2x.png);
		background-size: 274px 28px;
	    background-repeat: no-repeat;
	    background-position: center center;
	}
	#special .product .contentDetail .btnList .trial{
		width: 100%;
		margin-right: 0;
	}
	#special .seriesList{
		width: auto;
	}
	#special .seriesList li{
		width: 25%;
		margin-bottom: 10px;
		padding: 0 2%;
	}
	#special .seriesList figcaption{
		font-size: 12px;
	}
	/* parallax */
	#special .parallax{
		overflow: hidden;
		position: relative;
		z-index: -1;
		height: 200px;
	}
	#special .parallax div{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		background-attachment: scroll;
		background-size: cover;
		background-repeat: no-repeat;
		margin: 0;
	}
	
}


/* ユニット用：パララックス
------------------------------ */
.p-lp-parallax
{
    clear: both;
    height: 150px;
    margin-bottom: 20px;
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
}
.p-lp-parallax::after
{
    display: block;
    clear: both; 

    content: '';
}
.p-lp-parallax__bg
{
    position: relative;

    height: 100%;

    background: no-repeat center;
    background-size: cover;
}
.p-lp-parallax__bg-color
{
    position: absolute;
    z-index: -1; 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    height: 250px;
    margin: 0 -500%;

    content: '';
}
.p-lp-parallax__heading
{
    font-family: 'FP-HiraKakuStdN-W8', 'ヒラギノ角ゴ pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
    font-size: 24px;

    display: -ms-flexbox;
    display: flex;

    height: 100%;
    margin: 0;

    color: #fff; 

    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.no-touchevents.desktop:not(.ie11):not(.edge) .p-lp-parallax,
.touchevents.desktop:not(.android) .p-lp-parallax
{
    margin: 0 -500%;
}

.no-touchevents.desktop:not(.ie11):not(.edge) .p-lp-parallax__bg,
.touchevents.desktop:not(.android) .p-lp-parallax__bg
{
    background-attachment: fixed;
}

@media screen and (max-width:1200px) and (min-width: 1px){
	.p-lp-box-01,
	.p-lp-box-02,
	.p-lp-box-03,
	#special .keyvisual,
	.p-lp-parallax{
		margin-right: 0;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
	}
}

@media screen and (min-width: 768px)
{
    .p-lp-parallax
    {
        height: 250px;
    }
    .p-lp-parallax__heading
    {
        font-size: 36px;
    }
}

/*-----------------------------------------------
 acms
-----------------------------------------------*/
.acms-admin-btn-action-group{
	margin: 0 0 20px 0;
}
#calendar .acms-admin-btn-action-group{
	margin: 0;
}