@charset "UTF-8";

body { margin: 0; background-image: url(../images/background.png);}
img { border:none; }
a { text-decoration:none; }
h4 img {width: 100%;}

.pc {display: block;}
.sp {display: none;}
@media screen and (max-width: 700px) { 
	.pc {display: none;}
	.sp {display: block;}
		}

div#outside { max-width:100%;width: 100%;padding:0;margin:0;}
div#outside div#SP { max-width:100%;width: 100%;padding:0 0 0 0;margin:0 auto; }
div#outside div#SP-INSIDE { max-width:100%;width: 100%;padding:0 0 2% 0;margin:0 auto 0;background:url(../images/bg_main.png); }
/* div#outside div#SP { max-width:1000px;padding:0 0 0 0;margin:0 auto;} */
/* div#outside div#SP-INSIDE { max-width:1000px;width:100%;margin:10px auto; } */

div#outside div#SP div.wrap {
	max-width:100%;width:100%;padding:0 0 0 0;margin:2% 0 1% 0;
	}
@media screen and (max-width: 1000px) { 
	div#outside div#SP-INSIDE {  }
	}
@media screen and (max-width: 850px) { 
	div#outside div#SP div.wrap { max-width:100%;width:96%;margin:0 auto; }
	}

div#outside div#SP a.pagetop{
	margin: 0 auto;
}

div#outside div#SP a.pagetop:hover { opacity:0.6; }


div#outside div#SP-INSIDE {  }
div#outside div#SP-INSIDE div#wrapbox { max-width:1000px;width: 100%;margin:0 auto; }

/* #pagetop { padding:2% 3%;margin:auto;border-radius: 15px;background:rgba(255,255,255,1);box-shadow: 0 0 7px 0 rgba(35,24,21,1);display: none;position: fixed;left:50%;bottom:5%;z-index: 99999; }
#pagetop:hover { text-decoration:none;opacity:0.7; } */

#pagetop { padding:1.5% 1.5%;margin:auto;border-radius: 5px;background:rgba(255,255,255,0.9);box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);display: none;position: fixed;left:50%;bottom:5%;z-index: 99999; }
#pagetop { font-size: 0.8rem;line-height:1;color:rgba(35,24,21,1); }
#pagetop:hover { text-decoration:none;opacity:0.7; }



header ,
article {

	height:auto;
	padding:0;
	margin:0 auto 0;
	display:block;
	}
header {
	max-width: 1000px;
	margin:0 auto 0;
	}
div#outside div#SP div#SP-INSIDE article#CONTENTS {
	max-width: 1000px;
	width: 100%;
	/*height:100%;*/
	padding:0;
	margin:0;
	display:block;
	
	z-index:30;
	position:relative;
	}



header {
	max-width: 100%;
	z-index:10;
	background: rgba(23,23,23,1)
	}
header section {
	max-width: 1000px;
	padding:0;
	margin:0 auto 0 auto;
	z-index:10;
	position: relative;
	}
header section h1 {
	max-width: 1000px;
	width: 100%;
	height:auto;
	padding:0;
	margin:0;
	display:block;
	line-height:1;
	z-index:10;
}
header section h1 img{
	width:100%;
}
header section .link_btn01 {
	position: absolute;
	top: 54%;
	left: 1.5%;
	width: 23.5%;
}

header section .link_btn02 {
	position: absolute;
	top: 54%;
	left: 26%;
	right: 1%;
	width: 23.5%;
}
header section .link_btn03 {
	position: absolute;
	top: 54%;
	left: 50%;
	right: 1%;
	width: 23.5%;
}
header section .link_btn04 {
	position: absolute;
	top: 54%;
	left: 75%;
	width: 23.5%;
}

header section .ex01 {
	position: absolute;
	width: 95%;
	top: 66%;
	left: 2.5%;
	z-index: 1;
}

header section a img {
	width: 100%;
	height:auto;
	padding:0;
	display:block;
}

.ex02 {
	margin-top: 67%;
}




@media screen and (max-width: 700px) {
	header section img.link_btn01_sp {
		position: absolute;
    width: 22%;
    top: 60%;
    left: 3.5%;
	}
	header section img.link_btn02_sp {
		position: absolute;
		width: 22%;
		top: 60%;
		left: 27%;
	}
	header section img.link_btn03_sp {
		position: absolute;
		width: 22%;
    top: 60%;
		left: 50%;
	}
	header section img.link_btn04_sp {
		position: absolute;
		width: 22%;
    top: 60%;
		left: 73.5%;
	}

	header section .ex01 {
    position: absolute;
    width: 91%;
    top: 73%;
    left: 4.5%;
    z-index: 1;
	}
	
	.ex02 {
	margin-top: 140%;
	width: 95%;
  padding-left: 2.5%;
}


	article#character {
	width: 95%;
  margin-left: 2.5%;
	}

	article#writer {
	width: 95%;
  margin-left: 2.5%;
	}

	article#ABOUT {
	width: 95%;
  margin-left: 2.5%;
	}

	article#ABOUT2 {
	width: 95%;
  margin-left: 2.5%;
	}

	article#ABOUT3 {
	width: 95%;
  margin-left: 2.5%;
	}

	article#ABOUT4 {
	width: 95%;
  margin-left: 2.5%;
	}
}




/* -------------------------------------------------------------------
シリーズについて
------------------------------------------------------------------- */
article#writer section div.txt-wrapper {
	padding-top: 30px;
	padding-bottom: 30px;
	background:rgba(255,255,255,1);
	border: 1px solid red;

}
article#writer section div.txt-wrapper p.writer_name {
			padding-left: 10%;
      font-weight: bold;
      font-size: 20px;
    }

article#writer section div.txt-wrapper p.writer_description {
    	padding: 0 10%;
      font-size: 15px;
    }


article#character section div.txt-wrapper {
	padding-top: 30px;
	padding-bottom: 30px;
	background:rgba(255,255,255,1);
	border: 1px solid red;

}
article#character section div.txt-wrapper p.name {
			padding-left: 20%;
      font-weight: bold;
      font-size: 18px;
    }

article#character section div.txt-wrapper p.description {
      padding-left: 20%;
      font-size: 15px;
    }

article#ABOUT {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:1.5% auto 0;
	position:relative;

	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT section {
	width: 97%;
	padding:0 0 1% 0;
	margin-left: 1.5%;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT section {
	line-height: 1.3em;
	font-size: 1.2rem;
}
	

article#ABOUT section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
	margin-bottom: 0px;
}


article#ABOUT section div.txt-wrapper {
	display: flex;
  justify-content: center;
  gap: 10%;
	padding-top: 30px;
	background:rgba(255,255,255,1);
}

    article#ABOUT section div.item {
      text-align: center;
      width: 200px;
			margin-bottom: 20px;
    }

    article#ABOUT section div.item img {
      width: 100%;
      height: auto;
      border: 1px solid #ccc;
			margin-bottom: 10px;
    }

    article#ABOUT section div.item a {
      margin-top: 10px;
      font-size: 17px;
    }

article#ABOUT {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;
	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

	article#character section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

	article#writer section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
}

/* -------------------------------------------------------------------
シリーズ2について
------------------------------------------------------------------- */

article#ABOUT2 {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;

	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT2 section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT2 section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT2 section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
	margin-bottom: 0px;
}


article#ABOUT2 section div.txt-wrapper {
	display: flex;
  justify-content: center;
  gap: 10%;
	padding-top: 30px;
	background:rgba(255,255,255,1);
}

    article#ABOUT2 section div.item {
      text-align: center;
      width: 200px;
			margin-bottom: 20px;
    }

    article#ABOUT2 section div.item img {
      width: 100%;
      height: auto;
      border: 1px solid #ccc;
			margin-bottom: 10px;
    }

    article#ABOUT2 section div.item a {
      margin-top: 10px;
      font-size: 17px;
    }

article#ABOUT2 {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;
	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT2 section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT2 section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT2 section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
}

/* -------------------------------------------------------------------
シリーズ3について
------------------------------------------------------------------- */

article#ABOUT3 {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;

	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT3 section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT3 section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT3 section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
	margin-bottom: 0px;
}


article#ABOUT3 section div.txt-wrapper {
	display: flex;
  justify-content: center;
  gap: 10%;
	padding-top: 30px;
	background:rgba(255,255,255,1);
}

    article#ABOUT3 section div.item {
      text-align: center;
      width: 200px;
			margin-bottom: 20px;
    }

    article#ABOUT3 section div.item img {
      width: 100%;
      height: auto;
      border: 1px solid #ccc;
			margin-bottom: 10px;
    }

    article#ABOUT3 section div.item a {
      margin-top: 10px;
      font-size: 17px;
    }

article#ABOUT3 {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;
	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT3 section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT3 section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT3 section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
}

/* -------------------------------------------------------------------
シリーズ4について
------------------------------------------------------------------- */

article#ABOUT4 {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;

	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT4 section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT4 section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT4 section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
	margin-bottom: 0px;
}


article#ABOUT4 section div.txt-wrapper {
	display: flex;
  justify-content: center;
  gap: 10%;
	padding-top: 30px;
	background:rgba(255,255,255,1);
}

    article#ABOUT4 section div.item {
      text-align: center;
      width: 200px;
			margin-bottom: 20px;
    }

    article#ABOUT4 section div.item img {
      width: 100%;
      height: auto;
      border: 1px solid #ccc;
			margin-bottom: 10px;
    }

    article#ABOUT4 section div.item a {
      margin-top: 10px;
      font-size: 17px;
    }

article#ABOUT4 {
	max-width: 1000px;
	/* padding: 2% 0; */
	margin:0 auto;
	position:relative;
	box-sizing: border-box;
	z-index: 100;
	}
article#ABOUT4 section {
	width: 100%;
	padding:0 0 1% 0;
	margin:0 auto 0;
	/* z-index:50;
	background:(0,0,0,0);
	
	clear:both;
	zoom:1;
	position:relative; */
	}

article#ABOUT4 section {
	line-height: 1.3em;
	font-size: 1.2rem;

}
	

article#ABOUT4 section div h4 {
	line-height: 1;
	font-size: 2rem;
	text-align: center;
	margin: 0;
}

/* -------------------------------------------------------------------
シリーズについて
------------------------------------------------------------------- */

#PAGETOPJQ {
display: none !important;
}

.comment__area {
	display: flex;
	margin: 0 3%;
	align-items: flex-start;
}

.img__area {
	max-width: 207px;
	width: 100%;
}

.img__area img{
	width: 100%;
}

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

	article#character section div.txt-wrapper {
	padding-top: 20px;
	padding-bottom: 20px;
	background:rgba(255,255,255,1);
	border: 1px solid red;
}
	article#character section div.txt-wrapper p.name {
			padding-left: 15px;
      font-weight: bold;
      font-size: 16px;
    }

	article#character section div.txt-wrapper p.description {
			line-height:1.6;
      padding-left: 15px;
      font-size: 13px;
    }

				article#writer section div.txt-wrapper {
			padding-top: 10px;
			padding-bottom: 10px;
			background:rgba(255,255,255,1);
			border: 1px solid red;
	}

	article#writer section div.txt-wrapper p.writer_name {
			padding-left: 15px;
      font-weight: bold;
      font-size: 16px;
    }

	article#writer section div.txt-wrapper p.writer_description {
			line-height:1.6;
			margin: 0;
      padding: 0 15px;
      font-size: 13px;
    }

  article#ABOUT section div.txt-wrapper {
    display: flex;
    justify-content: center;
    gap: 3%;
    padding-top: 30px;
    background: rgba(255, 255, 255, 1);
  }

	    article#ABOUT section div.item {
      text-align: center;
      width: 43%;
			margin-bottom: 20px;
    }

		  article#ABOUT2 section div.txt-wrapper {
    display: flex;
    justify-content: center;
    gap: 3%;
    padding-top: 30px;
    background: rgba(255, 255, 255, 1);
  }

	    article#ABOUT2 section div.item {
      text-align: center;
      width: 43%;
			margin-bottom: 20px;
    }

		  article#ABOUT3 section div.txt-wrapper {
    display: flex;
    justify-content: center;
    gap: 3%;
    padding-top: 30px;
    background: rgba(255, 255, 255, 1);
  }

	    article#ABOUT3 section div.item {
      text-align: center;
      width: 43%;
			margin-bottom: 20px;
    }

		  article#ABOUT4 section div.txt-wrapper {
    display: flex;
    justify-content: center;
    gap: 3%;
    padding-top: 30px;
    background: rgba(255, 255, 255, 1);
  }

	    article#ABOUT4 section div.item {
      text-align: center;
      width: 43%;
			margin-bottom: 20px;
    }

article#ABOUT section {
	line-height: 1.3em;
	font-size: 1rem;
}

article#ABOUT2 section {
	line-height: 1.3em;
	font-size: 1rem;
}

article#ABOUT3 section {
	line-height: 1.3em;
	font-size: 1rem;
}

article#ABOUT4 section {
	line-height: 1.3em;
	font-size: 1rem;
}

    article#ABOUT section div.item a {
      margin-top: 10px;
      font-size: 1rem;
    }
    article#ABOUT2 section div.item a {
      margin-top: 10px;
      font-size: 1rem;
    }
    article#ABOUT3 section div.item a {
      margin-top: 10px;
      font-size: 1rem;
    }
    article#ABOUT4 section div.item a {
      margin-top: 10px;
      font-size: 1rem;
    }
}