html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12, h13, h14, h15, h16, h17, h18, h19, h20, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
a {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}
a:link {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}
a:visited {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}
a:hover {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}
a:active {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}
html {
	-webkit-overflow-scrolling: touch;
}
body{
	min-height: 100vh;
	position: relative;
	box-sizing: border-box;
	padding-bottom: 50px;
	background: #190a08;
}
.introduction1{
	padding: 0;
	width: 100%;
	background: #f7d9d7;
	position: relative
}
.backImg1{
	margin: 0 auto;
	padding: 0 0 40px;
	width: 100%;
	background: #190a08;
	animation-delay: 2s;
	animation-duration: 2s;
}
.backImg1 img{
	margin: 0;
	padding: 0;
	width: 100%;
}
.backImg2{
	margin: 0 auto;
	padding: 0 0 40px;
	position: absolute;
	top: 0;
	left: 0;
	animation-delay: 3s;
	animation-duration: 2s;
}
.backImg2 img{
	margin: 0;
	padding: 0;
	width: 100%;
}
.backImg3{
	margin: 0 auto;
	padding: 0 0 40px;
	position: absolute;
	top: 0;
	left: 0;
	animation-delay: 4s;
	animation-duration: 3s;
}
.backImg3 img{
	margin: 0;
	padding: 0;
	width: 100%;
}
.displayNone_pc{
	display: block;
}
.displayNone_sp{
	display: none;
}
.body0{
	padding: 0 50px;
	box-sizing: border-box;
	width: 100%;
	background: #190a08;
	animation-delay: 3.5s;
	animation-duration: 2s;
}
.body1{
	width: 100%;
	background: #f7d9d7;
}
.body2{
	margin: 20px auto;
	padding: 0 0  40px;
	max-width: 1000px;
	background: #fff;
}




.story{
	padding: 50px 0;
	width: 100%;
	display: grid;
	grid-template-areas: 
		"storyTitle"
		"storyIntro";
	justify-content: space-around;
	grid-column-gap: 60px;
}
.storyTitle{
	grid-area: storyTitle;
	box-sizing: border-box;
	text-align: center;	
	animation-delay: 2s;
	animation-duration: 3s;
}
.storyIntro{
	grid-area: storyIntro;
	margin: 30px auto 0;
	box-sizing: border-box;
	width: 700px;
	animation-delay: 2s;
	animation-duration: 3s;
}


.storyTrial{
	margin: 0 auto 30px;
	padding: 10px;
	box-sizing: border-box;
	width: 420px;
	background: #9BFE93;
	text-align: center;
}
.storyTrial:hover{
	background: #D0FFCD;
}



.titleBox{
	margin: 0 auto;
	padding: 0 0 50px;
	width: 900px;
	display: grid;
	grid-template-areas: 
		"infoTitle"
		"infoTitleDate"
		"titleImg1"
		"titleSetsumei1"
		"hanbaiShoten1"
		"hanbaiShoten2"
		"hanbaiShoten3"
		"hanbaiShoten4"
		"hanbaiShoten5"
		"titleInfo1"
		"tokuyakuButton"
		"titleInfo2"
		"webSignCmoaButton"
		"titleInfo8"
		"webSignRentaButton"
		"titleInfo3"
		"webSignAnimateButton"
		"titleInfo4"
		"webSignComicomiButton"
		"titleInfo5"
		"webSignShosenButton"
		"titleInfo6"
		"webSignAnimateShibuyaButton"
		"webSignAnimateUmedaButton"
		"titleInfo7"
		"webSignToranoanaButton";
	grid-column-gap: 60px;
}
.infoTitle{
	grid-area: infoTitle;
	margin: 30px auto 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;	
}
.infoTitleDate{
	grid-area: infoTitleDate;
	margin: 0 auto 30px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;	
}
.titleImg1{
	grid-area: titleImg1;
	margin: 0 auto;
	width: 400px;
	box-sizing: border-box;
}
.titleImg1 img{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
}
.titleSetsumei1{
	grid-area: titleSetsumei1;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 40%;
	box-sizing: border-box;
}
.hanbaiShoten1{
	grid-area: hanbaiShoten1;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten2{
	grid-area: hanbaiShoten2;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten3{
	grid-area: hanbaiShoten3;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten4{
	grid-area: hanbaiShoten4;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten5{
	grid-area: hanbaiShoten5;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten1 div,.hanbaiShoten2 div,.hanbaiShoten3 div,.hanbaiShoten4 div,.hanbaiShoten5 div{
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.hanbaiShoten1 div:hover,.hanbaiShoten2 div:hover,.hanbaiShoten3 div:hover,.hanbaiShoten4 div:hover,.hanbaiShoten5 div:hover{
	opacity: .5;
}
.titleInfo1{
	grid-area: titleInfo1;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo2{
	grid-area: titleInfo2;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo3{
	grid-area: titleInfo3;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo4{
	grid-area: titleInfo4;
	margin: 0 auto;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo5{
	grid-area: titleInfo5;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo6{
	grid-area: titleInfo6;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo7{
	grid-area: titleInfo7;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo8{
	grid-area: titleInfo8;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo1 div,.titleInfo2 div,.titleInfo3 div,.titleInfo4 div,.titleInfo5 div,.titleInfo6 div,.titleInfo7 div,.titleInfo8 div{
	margin: 0 auto;
	width: 500px;
	box-sizing: border-box;
}
.titleInfo1 ul,.titleInfo2 ul,.titleInfo3 ul,.titleInfo4 ul,.titleInfo5 ul,.titleInfo6 ul,.titleInfo7 ul,.titleInfo8 ul{
	margin: 0 auto;
	width: 400px;
	box-sizing: border-box;
}
.hanbaiTokuyakuButton{
	grid-area: tokuyakuButton;
	margin: 30px auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.hanbaiTokuyakuButton:hover{
	opacity: .5;
}
.webSignAnimateButton{
	grid-area: webSignAnimateButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignAnimateButton:hover{
	opacity: .5;
}
.webSignComicomiButton{
	grid-area: webSignComicomiButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignComicomiButton:hover{
	opacity: .5;
}
.webSignRentaButton{
	grid-area: webSignRentaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignRentaButton:hover{
	opacity: .5;
}
.webSignShosenButton{
	grid-area: webSignShosenButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignShosenButton:hover{
	opacity: .5;
}
.webSignAnimateShibuyaButton{
	grid-area: webSignAnimateShibuyaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignAnimateShibuyaButton:hover{
	opacity: .5;
}
.webSignAnimateUmedaButton{
	grid-area: webSignAnimateUmedaButton;
	margin: 10px auto 0;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignAnimateUmedaButton:hover{
	opacity: .5;
}

.webSignToranoanaButton{
	grid-area: webSignToranoanaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignToranoanaButton:hover{
	opacity: .5;
}
.webSignCmoaButton{
	grid-area: webSignCmoaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 250px;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignCmoaButton:hover{
	opacity: .5;
}



.charaBox{
	margin: 0 auto;
	padding: 0;
	width: 1000px;
	box-sizing: border-box;
	display: grid;
	grid-template-areas: 
		"charaTitle charaTitle"
		"charaImg1 charaImg2"
		"charaIntro1 charaIntro2"
		"modoru modoru"
		"footer footer";
	grid-template-columns: 300px 300px;
	grid-column-gap: 100px;
	justify-content: center;
}
.charaTitle{
	grid-area: charaTitle;
	margin: 30px auto;
	width: 100%;
	text-align: center;
}
.charaImg1{
	grid-area: charaImg1;
	margin: 0;
	width: 100%;
}
.charaImg2{
	grid-area: charaImg2;
	margin: 0;
	width: 100%;
}
.charaIntro1{
	grid-area: charaIntro1;
	margin: 0;
	width: 100%;
}
.charaIntro2{
	grid-area: charaIntro2;
	margin: 0;
	width: 100%;
}













.modoru{
	margin: 30px auto 0;
	width: 300px;
}
.modoru img{
	width: 100%;
}
.footer{
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
	background: #190a08;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 768px){
	.introduction1{
		position: static;
	}
	.displayNone_pc{
		display: none;
	}
	.displayNone_sp{
		display: block;
	}
.backImgSP{
	margin: 0 auto;
	padding: 0 0 10px;
	position: static;
	background: #190a08;
	animation-delay: 1s;
	animation-duration: 1s;
}
	.backImgSP img{
		width: 100%;
	}
.body0{
	padding: 0 3%;
	background: #190a08;
	animation-delay: 0s;
	animation-duration: 0s;
}
.body1{
	width: 100%;
	background: #f7d9d7;
}
.body2{
	margin: 0 auto;
	width: 100%;
	background: #f7d9d7;
}
.story{
	margin: 0 auto;
	width: 90%;
	display: grid;
	grid-template-areas: 
		"storyTitle"
		"storyIntro";
	grid-column-gap: 60px;
}
	.storyTitle{
		animation-delay: 0s;
		animation-duration: 0s;
	}
	.storyIntro{
		width: 100%;
		animation-delay: 0s;
		animation-duration: 0s;
	}
	.storyTrial{
		width: 90%;
	}
	.titleBox{
	margin: 0 auto;
	padding: 0 0 50px;
	width: 90%;
	display: grid;
	grid-template-areas: 
		"infoTitle"
		"infoTitleDate"
		"titleImg1"
		"titleSetsumei1"
		"hanbaiShoten1"
		"hanbaiShoten2"
		"hanbaiShoten3"
		"hanbaiShoten4"
		"hanbaiShoten5"
		"titleInfo1"
		"tokuyakuButton"
		"titleInfo2"
		"webSignCmoaButton"
		"titleInfo8"
		"titleInfo3"
		"webSignAnimateButton"
		"titleInfo4"
		"webSignComicomiButton"
		"titleInfo5"
		"webSignShosenButton"
		"titleInfo6"
		"webSignAnimateShibuyaButton"
		"webSignAnimateUmedaButton"
		"titleInfo7"
		"webSignToranoanaButton";
	grid-column-gap: 60px;
}
	.infoTitle{
	grid-area: infoTitle;
	margin: 30px auto 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;	
}
.infoTitleDate{
	grid-area: infoTitleDate;
	margin: 0 auto 30px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;	
}
.titleImg1{
	grid-area: titleImg1;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.titleImg1 img{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
}
.titleSetsumei1{
	grid-area: titleSetsumei1;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 100%;
	box-sizing: border-box;
}
.hanbaiShoten1{
	grid-area: hanbaiShoten1;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten2{
	grid-area: hanbaiShoten2;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten3{
	grid-area: hanbaiShoten3;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten4{
	grid-area: hanbaiShoten4;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten5{
	grid-area: hanbaiShoten5;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.hanbaiShoten1 div,.hanbaiShoten2 div,.hanbaiShoten3 div,.hanbaiShoten4 div,.hanbaiShoten5 div{
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.titleInfo1{
	grid-area: titleInfo1;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo2{
	grid-area: titleInfo2;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo3{
	grid-area: titleInfo3;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo4{
	grid-area: titleInfo4;
	margin: 0 auto;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo5{
	grid-area: titleInfo5;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo6{
	grid-area: titleInfo6;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo7{
	grid-area: titleInfo7;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo8{
	grid-area: titleInfo8;
	margin: 30px auto 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo1 div,.titleInfo2 div,.titleInfo3 div,.titleInfo4 div,.titleInfo5 div,.titleInfo6 div,.titleInfo7 div,.titleInfo8 div{
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.titleInfo1 ul,.titleInfo2 ul,.titleInfo3 ul,.titleInfo4 ul,.titleInfo5 ul,.titleInfo6 ul,.titleInfo7 ul,.titleInfo8 ul{
	margin: 0 auto;
	width: 90%;
	box-sizing: border-box;
}
.hanbaiTokuyakuButton{
	grid-area: tokuyakuButton;
	margin: 30px auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignAnimateButton{
	grid-area: webSignAnimateButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignComicomiButton{
	grid-area: webSignComicomiButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
	.webSignShosenButton{
	grid-area: webSignShosenButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignAnimateShibuyaButton{
	grid-area: webSignAnimateShibuyaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
.webSignAnimateUmedaButton{
	grid-area: webSignAnimateUmedaButton;
	margin: 10px auto 0;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
	.webSignToranoanaButton{
	grid-area: webSignToranoanaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
	.webSignCmoaButton{
	grid-area: webSignCmoaButton;
	margin: 0 auto;
	padding: 5px 0;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	text-align: center;
}
	
	
	
	
	.charaBox{
	margin: 0 auto;
	padding: 0;
	width: 90%;
	box-sizing: border-box;
	display: grid;
	grid-template-areas: 
		"charaTitle"
		"charaImg1"
		"charaIntro1"
		"charaImg2"
		"charaIntro2"
		"modoru"
		"footer";
	grid-template-columns: 100%;
	justify-content: space-around;
}
.charaTitle{
	grid-area: charaTitle;
	margin: 30px auto;
	width: 100%;
	text-align: center;
}
.charaImg1{
	grid-area: charaImg1;
	margin: 0 auto;
	width: 100%;
}
.charaImg2{
	grid-area: charaImg2;
	margin: 0 auto;
	width: 100%;
}
.charaImg1 img,.charaImg2 img{
	margin: 0 auto;
	width: 100%;
}
.charaIntro1{
	grid-area: charaIntro1;
	margin: 0 auto 40px;
	width: 100%;
}
.charaIntro2{
	grid-area: charaIntro2;
	margin: 0;
	width: 100%;
}
body{
	min-height: 100vh;
	position: relative;
	box-sizing: border-box;
	padding-bottom: 50px;
	background: #190a08;
}
.footer{
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
	background: #190a08;
	display: flex;
	justify-content: center;
	align-items: center;
}
}