/*-----------------------------------------------
 title
-----------------------------------------------*/
#title{
	position: relative;
	z-index: 10;
	height: 274px;
	margin-bottom: 42px;
	background:rgba(255,184,84,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;
}
}


/*-----------------------------------------------
 .series_nav
-----------------------------------------------*/
.series_nav {
	margin-bottom:39px;
}
.series_nav ul li {
	margin-bottom:10.7px;
	}
@media only screen and (max-width: 640px) {
	.series_nav {
	margin-bottom:4.688vw;
}
.series_nav ul li {
	margin-bottom:1.672vw;
	}
}
/*-----------------------------------------------
 .series
-----------------------------------------------*/
#content .series {
	padding-top:36px;
	position:relative;
	margin-bottom:86px;
}

hr {
	height: 5px;
	border: none;
	background: url(../img/series/line.png) no-repeat;
	width: 231px;
	margin:0 auto;
}

.series h2 {
	margin-bottom:27px;
}
.series h3{
  position:relative;
	text-align:left;
}
.series h3 span{
    background-image: url(../img/series/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;
}
.series h3 small{
  font-size: 16px;
  vertical-align: bottom;
}
.series h3:before {
  content: '';
  position: absolute;
  top: 37%;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color:#b79317;
  right: 0;
}
.series h3:after {
  content: '';
  position: relative;
  top: 6px;
  display: inline-block;
  width: 18px;
  height: 25px;
  background-color:#fff;
}
.series .inner .inner {
	margin:0 50px;
}
.series .inner .story,.series .inner .character,.series .inner .point,.series .inner .books, .series .inner .movie, .series .inner .news {
	margin-bottom:45px;
}

.series .Illustration {
	margin:-15px 0 17px;
}
.series .Illustration ul {
	display:flex;
	justify-content: center;
}
.series .Illustration ul li {
	margin:0 6px;
}


.series .story .txt {
	font-size:24px;
	font-family: YuMincho,'Yu Mincho', serif;
	line-height:1.5;
}
.series .story .txt strong {
	font-weight:normal;
}


.series .character ul {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.series .character ul li {
	width:47%;
	margin-bottom: 11px;
}
.series .character ul li figure {
	display:flex;
}
.series .character ul li figure img {
	margin-right:15px;
	width: 136px;
	height: 100%;
}
.series .character .name {
	font-size:24px;
	font-family: YuMincho,'Yu Mincho', serif;
	line-height:1.5;
}
.series .character .name rt {
	font-size:12px;
	margin-bottom: -5px;
}
.series .character .txt {
	font-size:18px;
	line-height:1.5;
}


.series .point h3 {
	margin-bottom:10px;
}
.series .point{
  padding: 10px 0 0 0;
}
.series .point ul.note{
  margin-bottom: 20px;
}
.series .point ul.note li{
	font-size: 22px;
  padding: 10px 0 0;
	font-family: YuMincho,'Yu Mincho', serif;
	line-height:1.5;
	font-weight: 500;
  display: block;
}
.series .point ul.note li::before{
  content:"◆";
  margin-right: 3px;
  font-size: 12px;
  vertical-align: text-bottom;
  color: #d0a81d;
}
.series .point ul.note li::after{
  content: "準備中";
  font-size: 10px;
  font-family: MyYuGothicM,	YuGothic,	sans-serif;
  color: #fff;
  background: #000;
  padding: 4px 8px;
  border-radius: 2rem;
  position: inherit;
  top:inherit;
  left: inherit;
  bottom:inherit;
  width: auto;
  height: auto;
  vertical-align: text-bottom;
  display: inline-block;
  margin-left: 8px;
}
.series .point ul.note li.new::after{
  content: "NEW";
	font-weight: bold;
  color: #000;
  background: #d0a81d;
}
.series .point ul.note li.new a,
.series .point ul.note li.old a{
	text-decoration: underline;
}
.series .point ul.note li.old::after{
	content: none;
  }
.series .point ul.p-modal {
	padding-bottom:12px;
}
.series .point ul.p-modal li {
	display: inline-block;
	width: calc( 100% / 2 - 30px);
	box-sizing: border-box;
	margin-right: 30px;
}
.series .point ul.p-modal li:nth-child(2n){
	margin-right: 0;
}
.series .point .title {
	text-align:center;
	margin-bottom:15px;
}
.series .point .title span {
	text-align:center;
	font-size:26px;
	font-family: YuMincho,'Yu Mincho', serif;
	text-decoration: underline;
}
.series .point ul.p-modal li a img{
	border: 1px solid #d0a81d;
	width: 100%;
	margin: 0;
}

.series .keyword {
	margin-bottom:50px;
}
.series .keyword p {
	font-size:30px;
	font-family: YuMincho,'Yu Mincho', serif;
	line-height:1.5;
	font-weight:bold;
	word-break:break-all;
}
.series .keyword p span {
	padding:0 3px;
	color:#000;
}
.series .books .book_illust {
	margin-top:17px;
}
.series .books .inner .book_list li {
	margin-right:20px;
	margin-bottom: 20px;
	width:calc(100% / 5 - 20px);
	display: inline-block;
	vertical-align: top;
}
.series .books .inner .book_list li:nth-child(5n) {
	margin-right:0;
}
.series .books .book_list .book_img {
	margin-bottom:6px;
}
.series .books .book_list .book_img img{
	border: 1px solid #d0a81d;
	width: 100%;
}
.series .books .book_list .book_title {
	font-size:16px;
	letter-spacing:0.2em;
	line-height:1.5;
}

.series .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:0 5px 3px -5px;
}
.series .books .book_right_area {
	margin-top:5px;
	font-size:16px;
}
.series .news .txt{
	text-align: center;
}
.series .movie .inner{
	margin: 0 100px;
}
.series .movie .inner .txt{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.series .movie .inner iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 640px) {
	#content .series {
		padding-top:4.688vw;
		margin-bottom: 4.688vw;
	}
	#content .series h2 {
		margin-bottom:4.219vw;
	}
  #content .series h3{
    margin: 0 3.125vw;
  }
	#content .series h3 span {
		margin:0 0 2.656vw;
		font-size:5.156vw;
		padding:0.5vw 3.125vw;
		line-height:1em;
	}
  .series .Illustration ul{
    flex-wrap: wrap;
  }
  .series .Illustration ul li {
    margin:0 0 0 1%;
    width: 32%;
  }
  .series .Illustration ul li:first-child {
    margin-left: 0;
  }
	.series h3::after {
    top: 0.938vw;
    width: 2.813vw;
    height: 4.313vw;
	}
	#content .series h3 small{
		font-size: 3vw;
	}
	#content .series .inner .inner {
		margin:0 6.25vw;
	}
	.series .inner .story, .series .inner .character, .series .inner .point, .series .inner .books, .series .inner .movie, .series .inner .news {
		margin-bottom:6.25vw;
	}
	.series .story .txt {
		font-size:4.063vw;
		line-height:1.5;
	}
	.series .character ul {
		display:block;
	}
	.series .character ul li {
		width:100%;
		margin-bottom:4.688vw;
	}
	
	#content .character figure img {
    width: 24%;
		height: 100%;
		margin-right:2.344vw;
	}
	.series .character .name {
		font-size:4.063vw;
	}
	.series .character .name rt {
    font-size: 1.875vw;
    margin-bottom: -0.781vw;
	}
	.series .character .txt {
		font-size:3.125vw;
		line-height:1.5;
		margin-top:-0.313vw;
	}
	
	.series .point .txt {
		font-size:4.063vw;
		line-height:1.5;
		margin-top:-0.781vw;
	}
	.series .point ul.p-modal {
		display:block;
		padding-bottom:1px;
	}
	.series .point ul.p-modal li {
		margin-bottom:3.125vw;
		margin-right: 0;
		width: 100%;
	}
	.series .point .title {
    margin-bottom: 2.344vw;
	}
	.series .point .title span {
	font-size: 5vw;
}
  .series .point ul.note{
    margin-bottom: 3vw;
  }
  .series .point ul.note li{
    font-size: 3.3vw;
    padding: 2vw 0 0;
  }
  .series .point ul.note li::before{
    font-size: 2vw;
  }
  .series .point ul.note li::after{
    font-size: 2vw;
    z-index: inherit;
    vertical-align: bottom;
    padding: 2px 8px;
  }

	.series .Illustration {
		margin:0 0 5.469vw;
	}
	
	.series .keyword {
		margin-bottom:7.813vw;
	}
	.series .keyword p {
		font-size:4.688vw;
	}
	
	.series .books .inner .book_list li {
		margin:0 3vw 3vw 0;
		width:calc(100% / 3 - 3vw);
	}
	.series .books .inner .book_list li:nth-child(5n) {
		margin-right:3vw;
	}
	.series .books .inner .book_list li:nth-child(3n) {
		margin-right:0;	
	}
	.series .books .book_list .book_title{
	font-size:2.5vw;
	letter-spacing: 0.1em;
	}
	.series .movie .inner{
		margin: 0;
	}
}

/*-----------------------------------------------
 forth
-------------------------------------------------*/
#forth .story .txt strong {
	color: #fc6868;
}
#forth .character .name {
    color: #fc6868;
}
#forth .point .title span {
	color:#f96a6a;
}
/*-----------------------------------------------
 ahead
-------------------------------------------------*/
#ahead .story .txt strong {
	color: #f777c9;
}
#ahead .character .name {
    color: #f777c9;
}
#ahead .point .title span {
	color:#f777c9;
}
#ahead .keyword {
	color:#f777c9;
}


/*-----------------------------------------------
 edge
-------------------------------------------------*/
#edge .story .txt strong {
	color: #68adff;
}
#edge .character .name {
    color: #68adff;
}
#edge .point .title span {
	color:#68adff;
}
#edge .keyword {
	color:#68adff;
}

/*-----------------------------------------------
 genesis
-------------------------------------------------*/
#genesis .story .txt strong {
	color: #ff9500;
}
#genesis .character .name {
    color: #ff9500;
}
#genesis .point .title span {
	color:#ff9500;
}
#genesis .keyword {
	color:#ff9500;
}

/*-----------------------------------------------
 obstacle
-------------------------------------------------*/
#obstacle .story .txt strong {
	color: #80e011;
}
#obstacle .character .name {
    color: #80e011;
}
#obstacle .point .title span {
	color:#80e011;
}
#obstacle .keyword {
	color:#80e011;
}

/*-----------------------------------------------
 city
-------------------------------------------------*/
#city .story .txt strong {
	color: #c0b702;
}
#city .character .name {
    color: #c0b702;
}
#city .point .title span {
	color:#c0b702;
}
#city .keyword {
	color:#c0b702;
}

/*-----------------------------------------------
 links
-------------------------------------------------*/
#links .story .txt strong {
	color: #2ed6f5;
}
#links .character .name {
    color: #2ed6f5;
}
#links .point .title span {
	color:#2ed6f5;
}
#links .keyword {
	color:#2ed6f5;
}

/*-----------------------------------------------
 others
-------------------------------------------------*/
#others .story .txt strong {
	color: #d69be5;
}
#others .character .name {
    color: #d69be5;
}
#others .point .title span {
	color:#d69be5;
}
#others .keyword {
	color:#d69be5;
}


/*-----------------------------------------------
 modal
-------------------------------------------------*/
.modal {
  display: none;
  z-index: 110;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh; }

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

.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:743px;
  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; }

		#content .illust-area .title {
			padding: 0 0.156vw 0 3.125vw;
		}
		

/*-----------------------------------------------
 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; }

	}