/*-----------------------------------------------
 title
-----------------------------------------------*/
#title{
	position: relative;
	z-index: 10;
	height: 274px;
	margin-bottom: 42px;
	background:rgba(245,238,86,0.8);
}
#title .inner{
	position: relative;
	width: 1200px;
	margin: 0 auto;
}
#title .inner h1{
	overflow: hidden;
	text-align: center;
}
@media only screen and (max-width: 640px) {
	#title{
		height: auto;
		margin-bottom: 7.031vw;
		background: none;
	}
	#title .inner{
		width: auto;
	}
	#title .inner h1{
		position: static;
		background: none;
		padding-top: 0;
	}
	#title .inner h1 img{
		width: 100%;
	}
}
/*-----------------------------------------------
 content
-----------------------------------------------*/
#content{
	width: 1000px;
	margin: 0 auto;
}
#content h2 {
	font-size: 36px;
	line-height: 1.5;
}
#content p {
	font-weight: 400;
}
#content .read {
    width: 900px;
    margin: 0 auto 38px;
    font-size: 18px;
    line-height: 1.44;
}
@media only screen and (max-width: 640px) {
	#content{
		width: 100%;
		padding: 0;
	}
	#content h2{
		height: auto;
		background: none;
	}
	#content img {
		width: 100%;
	}
	#content .read {
    width: 94%;
    margin: 0 auto 5.469vw;
    font-size: 3.438vw;
    line-height: 1.27;
}
}
/*-----------------------------------------------
 .novels
-----------------------------------------------*/
#content .novels {
	position:relative;
	background-image: url(../img/novels/dot_novels.png),url(../img/novels/dot_novels.png);
	background-position: top left,right bottom;
	background-repeat: no-repeat,no-repeat;
	background-size: 8px 8px,8px 8px;
	background-color: #f9f6b5;
	width: 1000px;
	margin: 0 auto 20px;
	padding: 44px 50px 24px;
	border: solid 2px #d0a81d;
	box-sizing: border-box;
	text-align: center;
}
#content .novels.red {
	background-color:#ee6666;
	color:#fff;
	padding:61px 0 38px;
	margin-bottom: 40px;
}
#content .novels a {
	z-index:1;
	display:block;
	position:relative;
	cursor:pointer;
}
#content .novels::after {
    content: '';
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    position: absolute;
    top: 8px;
    left: 8px;
    border: solid 1px #d0a81d;
		background:url(../img/novels/gallery_boxbg.png) no-repeat top 9px right 9px;
}
.novels .title {
	position:relative;
}
.novels h2 {
	margin-bottom:27px;
}
.novels .title .illust_top {
	position:absolute;
}
#novels01 .title .illust_top {
	top: 28px;
  right: -14px;
}
#novels02 .title {
	padding-top:10px;
}
#novels02 .title .illust_top {
	top: -25px;
	right: -4px;
}
#novels03 .title {
	padding-top:11px;
}
#novels03 .title .illust_top {
	top: -14px;
	right: 26px;
}
.novels .btn {
	position:relative;
	padding:32px 0 0;
}
#novels02 .btn {
	padding-top:41px;
}
#novels03 .btn {
	padding-top:41px;
}
.novels .btn .illust_bottom {
	position:absolute;
}
#novels01 .btn .illust_bottom  {
	top: -26px;
	left: 35px;
}
#novels02 .btn .illust_bottom  {
	top: -13px;
	right: 70px;
}
.novels h3 {
	position:relative;
	text-align:left;
}
.novels h3 span {
    background-image: url(../img/novels/dot_title.png);
    background-repeat: no-repeat;
    background-position: center left;
		background-color:#d0a81d;
		font-family: YuMincho,'Yu Mincho', serif;
    color: #fff;
    font-size: 24px;
    display: inline-block;
    padding: 0 11px 0 22px;
    line-height: 34px;
    margin-bottom: 17px;
		z-index:1;
		position:relative;
}
.novels h3:before {
  content: '';
  position: absolute;
  top: 37%;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color:#b79317;
  right: 0;
}
.novels h3:after {
  content: '';
  position: relative;
  top: 6px;
  display: inline-block;
  width: 18px;
  height: 25px;
  background-color:#f9f6b5;
}
.novels .inner .story,.novels .inner .books {
	margin-bottom:10px;
}

.novels .Illustration {
	margin:-24px 0 29px;
}
#novels02 .Illustration {
	margin-bottom:10px;
}
#novels03 .Illustration {
	margin-bottom:5px;
}
.novels .Illustration ul {
	display:flex;
	justify-content: center;
}
.novels .Illustration ul li {
	margin:0 6px;
}

.novels .story .txt {
	font-size:24px;
	font-family :YuMincho,'Yu Mincho', serif;
	line-height:1.4;
	text-align:left;
}
.novels .story .txt strong {
	font-weight:bold;
	color: #d0a81d;
}
.novels .books .inner>ul>li:not(:last-child) {
    padding-bottom: 10px;
}
.novels .books .inner .book_list li {
	margin-right:20px;
	margin-bottom: 20px;
	width:calc(100% / 5 - 20px);
	display: inline-block;
	vertical-align: top;
}
.novels .books .inner .book_list li:nth-child(5n) {
	margin-right:0;
}
.novels .books .book_list .book_img {
	margin-bottom:6px;
}
.novels .books .book_list .book_img img{
	border: 1px solid #d0a81d;
	width: 100%;
}
.novels .books .book_list .book_title {
	font-size:16px;
	letter-spacing:0.2em;
	line-height:1.3;
	text-align: left;
}

.novels .books .book_list .book_title::before {
	content:"";
	width: 4px;
  height: 4px;
	display:inline-block;
  border-style: solid;
  border-width: 1px;
  border-color:#d0a81d #d0a81d transparent transparent;
  transform: rotate(45deg);
	margin-bottom:3px;
	margin-right: 10px;
}

#comingsoon h2 {
	font-family: YuMincho,'Yu Mincho', serif;
	font-size:68.61px;
	margin-bottom:5px;
}
#comingsoon .sp {
	display:none;
}
#comingsoon .txt {
	font-size:24px;
	line-height:1.5;
	font-family: YuMincho,'Yu Mincho', serif;
	margin-bottom: 36px;
}
@media only screen and (max-width: 640px) {
	#content .novels {
		padding: 8.281vw 6.094vw 2.188vw;
		margin-bottom:2.969vw;
		width:94%;
	}
	#content .novels h2 {
		margin-bottom:2.969vw;
		width:98.5%;
	}
	#content #novels03 h2 {
		width: 48.906vw;
		margin: -0.938vw auto 5vw;
	}
	#content .novels h3 span {
		margin:0 0 2.656vw;
		font-size:3.75vw;
		padding:0 1.719vw 0 3.438vw;
		line-height:5.313vw;
	}
	.novels h3::after {
    top: 0.938vw;
    width: 2.813vw;
    height: 4.313vw;
	}
	.novels .inner .story, .novels .inner .books {
		margin-bottom:2.969vw;
	}
	.novels .story .txt {
		font-size:4.063vw;
		line-height:1.3;
	}

	.novels .Illustration {
		margin:0 0 0.313vw;
	}
	.novels .Illustration ul {
		flex-wrap:wrap;
	}
	.novels .Illustration ul li {
    margin: 0 0 2.344vw 2%;
    width: 32%;
	}
	.novels .Illustration ul li:first-child {
		margin:0;
	}
	#content .novels .books .inner .book_list{
		text-align: left;
	}
	.novels .books .inner .book_list li {
		margin:0 3vw 3vw 0;
		width:calc(100% / 3 - 3vw);
	}
	.novels .books .inner .book_list li:nth-child(5n) {
		margin-right:3vw;
	}
	.novels .books .inner .book_list li:nth-child(3n) {
		margin-right:0;	
	}
	.novels .books .book_list .book_title{
	font-size:2.5vw;
	letter-spacing: 0.1em;
	}
	.novels .btn {
    position: relative;
    padding: 3.125vw 0 0;
	}
	.novels .btn a {
		width: 84%;
		margin: 0 auto;
		padding-left: 6%;
	}

	#novels01 .title .illust_top {
		top: 27.031vw;
		right: -8.438vw;
		width: 15.156vw;
	}
	#novels02 .title {
		padding-top: 3.281vw;
		width: 102%;
	}
	#novels02 .title .illust_top {
    top: -10vw;
    right: -6.875vw;
    width: 84.375vw;
	}
	#novels03 .title {
		padding-top:11px;
	}
	#novels03 .title .illust_top {
		top: 5.156vw;
		right: -1.875vw;
		width: 84.844vw;
	}
	#novels02 .btn {
		padding-top:3.125vw;
	}
	#novels03 .btn {
		padding-top:3.125vw;
	}
	.novels .btn .illust_bottom {
		position:absolute;
	}
	#novels01 .btn .illust_bottom  {
		top: -1.094vw;
		left: -5.156vw;
		width:13.125vw;
	}
	#novels02 .btn .illust_bottom  {
		top: -2.5vw;
		left: -8.125vw;
		width: 15.781vw;
	}
#novels02 .Illustration {
    margin: 12.813vw 0 0.625vw;
}

#content #comingsoon {
	padding:10.938vw 0 4.688vw;
	margin-bottom:10.938vw;
}
#content #comingsoon h2 {
	font-size:13.169vw;
	line-height:1;
	margin-bottom:5.469vw;
}
#content #comingsoon .txt {
	font-size:4.375vw;
	line-height:1.42;
}
#content #comingsoon a {
	width:68.438vw;
	margin:0 auto;
	padding-left:4.688vw;
}
#content #comingsoon .sp {
	display:block;
}
}
/*-----------------------------------------------
 modal
-------------------------------------------------*/
.modal {
  display: none;
  z-index: 110;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh; }

.modal-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background:#f5ee56; }

.modal-content {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: absolute;
  overflow-y: scroll; }


.modal-content.modal-txt {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  margin: 0; }

.modal-content::-webkit-scrollbar {
  display: none; }

.modal-content .js-modal-close {
  width: 100%;
	max-width:1000px;
  margin: 20px auto 10px;
  text-align: right;
  cursor: pointer; }

.modal-content .js-modal-close img {
  width: 24px; }

body.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%; }
	
	

@media screen and (max-width: 640px) {
  /*-----------------------------------------------
   main
  -----------------------------------------------*/
  h2 {
    margin-bottom: 11.71875vw; }

/*-----------------------------------------------
 modal
-------------------------------------------------*/
  .modal-content {
    width: 90vw;
    top: 0vw; }

  .modal-content img {
    width: 100%;
    margin-bottom: 5%;}

  .modal-content .js-modal-close {
    margin: 3vw 0 2vw 0; }

  .modal-content .js-modal-close img {
    width: 4vw;
    margin-bottom: 0; }
}