@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Murecho:wght@300;400&display=swap');

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, 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-family: 'Murecho',"ヒラギノ角ゴ ProN W3", "Helvetica Neue", sans-serif;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	color:#040001;
	background-color:#f1df89;
}
a {
	text-decoration:none;
	outline:none;
	color:#040001;
	overflow-wrap: break-word;
}
a:hover {
	text-decoration:none;
	color:#040001;
}
a:focus,a:visited {
	outline:none;
	color:#040001;
}
img {
	border:none;
	vertical-align:bottom;
	line-height: .4em;
	max-width: 100%;
	height: auto;
}
li {
	list-style:none;
}
iframe {
	display:block;
}
::selection {
	background-color:#cdcdcd;
}
::-moz-selection {
	background-color:#cdcdcd;
}
iframe[name="google_conversion_frame"] { position:absolute; top:0; }


/* -------------------------------------------------------------------------- */
/* -- other -- */
#Loading {
	z-index:105;
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background-color:#f1df89;
}
#Loading p {
	position: fixed;
	display: block;
	position: fixed;
	left: 0;
	top: 47%;
	width: 100%;
	margin: auto;
	text-align: center;
	font-size: 2em;
	font-weight: 400;
	color: #e8410b;
	border-radius: 50%;
	/*animation: loader 1.2s linear infinite;*/
}
@keyframes loader {
	0%    {top: 45%;}
	50%  {top: 46%;}
	100%  {top: 45%;}
}
#Loading p img {
	opacity: 1;
	max-width: 240px;
	animation: loaderimg .8s linear infinite;
}
@keyframes loaderimg {
	0%    {opacity: 1;}
	50%  {opacity: 0;}
	100%  {opacity: 1;}
}

.opa {
	opacity: 1;
	transition: all 180ms 0s ease-out;
}
.opa:hover,.opa:focus {
	opacity: .4;
}
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.fontFamily,.fontFamily * {
	font-family: var(--font1);
}
.floatArea {
	letter-spacing: -.4em;
}
.floatArea>* {
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
.protect {
	position: relative;
}
.protect::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}
ul.list {
	position: relative;
	padding-left: 1.1em;
}
ul.list1>li::before,ul.list2>li::before {
	position: absolute;
	left: 0;
	top: 0;
}
ul.list1>li::before {
	content: '※';
}
ul.list2>li::before {
	content: '・';
}


/* -------------------------------------------------------------------------- */
/* -- #pvArea_over -- */
#pvArea_over {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	background-color: rgba(0,0,0,.9);
}
#pvArea_over .closeBtn {
	right: 2vw;
}
#pvArea_over #playerBase {
	position: absolute;
	left: 0;
	right: 0;
	top: 7vw;
	bottom: 0;
	width: 66%;
	margin: auto;
	transition: all 300ms 0s ease;
}
#pvArea_over #playerBase>div {
	position: relative;
	height: 0;
	padding-top: 56.24%;
}
#pvArea_over iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
#pvArea_over .pvlist2 {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	letter-spacing: -.40em;
}
#pvArea_over .pvlist2 li {
	box-sizing: border-box;
	padding: .3em 0;
	text-align: center;
	cursor: pointer;
	color: #f1df89;
	border: #f1df89 1px solid;
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
#pvArea_over .pvlist2 li.now {
	color: #000;
	background-color: #f1df89;
}
#pvArea_over .pvlist2 li span {
	display: block;
	font-size: .8em;
}

/* -------------------------------------------------------------------------- */
/* -- .closeBtn -- */
.closeBtn {
	position: absolute;
	z-index: 201;
	right: 0;
	top: 1em;
	cursor: pointer;
	background-color: #f0de87;
	border-radius: 50%;
}
.closeBtn p {
	position: relative;
}
.closeBtn span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	margin: auto;
	background-color: #000;
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.closeBtn span:nth-of-type(1) {
	top: 0;
}
.closeBtn span:nth-of-type(2) {
	bottom: 0;
}


/* -------------------------------------------------------------------------- */
/* -- nav -- */
nav {
	box-sizing: border-box;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
}
nav li>* {
	display: block;
	cursor: pointer;
}
nav li img {
	width: 100%;
	height: 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

/* -------------------------------------------------------------------------- */
/* -- .wraparea -- */
.wraparea .backimg {
	position: fixed;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img_new/backimg.jpg") center bottom no-repeat;
	background-size: 100% auto;
}

/* -------------------------------------------------------------------------- */
/* -- #index header -- */
#index header {
	position: relative;
	width: 100%;
	height: 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #f1df89;
}
#index header>* {
	position: absolute !important;
}
#index header img {
	width: 100%;
	height: auto;
}
#index header h1,
#index header h3 {
	opacity: 0;
	margin-top: 1rem;
}
#index header .roadshow {
	opacity: 0;
}
#index header h2 img {
	display: block;
	width: 0;
	height: 0;
	padding-top: 25.2%;
	background: url("../img_new/he_catch1.png") 0 0 no-repeat;
	background-size: auto 100%;
}
#index header h2.moveh2 img {
	animation: moveh2 .6s ease-out .8s forwards;
}
@keyframes moveh2 {
	0%    {width: 0;}
	100%  {width: 100%;}
}

/* -------------------------------------------------------------------------- */
/* -- main -- */
main>div {
	position: relative;
	z-index: 10;
}
#index main {
	position: relative;
	background-image: url("../img_new/index_mainback_left.png"), url("../img_new/index_mainback_right.png");
	background-position: left 0, right 0;
	background-repeat: no-repeat;
	background-size: auto;
}
	#index main::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		width: 62%;
		height: 0;
		padding-top: 23.3%;
		background: url("../img_new/index_mainback-btm.png") 0 0 no-repeat;
		background-size: 100% auto;
	}
body:not(#index) main {
	background: url("../img_new/other_mainback_top.png") center 1em no-repeat;
	background-size: auto;
}

#mvtk-widgets-container {
	margin-left: auto;
	margin-right: auto;
}
/* -------------------------------------------------------------------------- */
/* -- .btnarea -- */
.btnarea p span {
	cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* -- .tieupbnr -- */
.tieupbnr {
	max-width: 1000px;
	margin: 2em auto 0;
	padding: 1em;
	background-color: rgba(246,192,91,.9);
}
.tieupbnr li img {
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------- */
/* -- .bnrarea -- */
.bnrarea li img {
	display: block;
}

/* -------------------------------------------------------------------------- */
/* -- .share -- */
.share li {
	margin-left: .5em;
	margin-right: .5em;
}

/* -------------------------------------------------------------------------- */
/* -- .tokubnrarea -- */
#index .tokubnrarea {
	max-width: 1140px;
	margin: 2rem auto 0;
}
#index .tokubnrarea li img {
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------- */
/* -- #story -- */
#story header {
	overflow-x: hidden;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #000;
}
#story header h1 {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
#story header h1 img {
	display: block;
	width: 0;
	height: 0;
	padding-top: 31.29%;
	background: url("../img_new/story_catch.png") 0 0 no-repeat;
	background-size: auto 100%;
}
#story header h1.movestoryC img {
	animation: movestoryC .6s ease-out .4s forwards;
}
@keyframes movestoryC {
	0%    {width: 0;}
	100%  {width: 100%;}
}
#story header .txtarea {
	opacity: 0;
	box-sizing: border-box;
	border-color: #f69100;
	border-style: solid;
	background-color: rgba(0,0,0,.9);
	border-radius: 1rem;
}
	/*#story header .txtarea::after {
		content: '';
		position: absolute;
		right: 2%;
		bottom: 2%;
		width: 10.5%;
		height: 0;
		padding-top: 9.6%;
		background: url("../img_new/story_txt_onpu.png") 0 0 no-repeat;
		background-size: 100% auto;
	}*/
#story header .txtarea img {
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------- */
/* -- #intro -- */
#intro header {
	overflow-x: hidden;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #2a8dd4;
}
#intro header .txtarea {
	opacity: 0;
	filter: blur(.5em);
	box-sizing: border-box;
	text-align: center;
	background-color: rgba(255,255,255,.9);
	border: #fff100 3px solid;
	border-radius: 1rem;
}
	#intro header .txtarea::after {
		content: '';
		position: absolute;
		right: -22%;
		bottom: -14%;
		width: 50%;
		height: 0;
		padding-top: 30%;
		background: url("../img_new/intro_overphoto.png") 0 0 no-repeat;
		background-size: 100% auto;
	}
#intro header .txtarea.moveintro {
	animation: moveintro .9s ease-out .2s forwards;
}
@keyframes moveintro {
	0%   {
			opacity: 0;
			filter: blur(.5em);
		 }
	100% {
			opacity: 1;
			filter: blur(0);
		 }
}
#intro header .txtarea h1 {
	position: absolute;
	left: -3%;
	top: 1.5%;
	width: 70%;
}
#intro header .txtarea img {
	width: 100%;
	height: auto;
}
#intro header .txtarea .icon {
	position: absolute;
	right: 5%;
	top: -5%;
	width: 20%;
}

/* -------------------------------------------------------------------------- */
/* -- #chara -- */
#chara .mainarea {
	position: relative;
	padding: 3em 0;
	background-color:#f1df89;
	background-image: url("../img_new/chara_mainback.png"), url("../img_new/chara_base.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto, 100% auto;
}
#chara header h1 {
	max-width: 340px;
}
#chara header h1 img {
	width: 100%;
	height: auto;
}

#chara .charalist {
	max-width: 790px;
	margin: auto;
}
#chara .charalist li {
	position: relative;
	opacity: 0;
	top: .4em;
}
#chara .charalist li img {
	display: block;
	width: 100%;
	height: 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#chara .charalist li .commbtn {
	position: absolute;
	width: 18%;
	height: 0;
	cursor: pointer;
	padding-top: 9%;
	background: url("../img_new/chara_commbtn.png") 0 0 no-repeat;
	background-size: 100% auto;
}
#chara .charalist li:nth-child(n+2) {
	width: 48.5%;
	margin-top: 1.5em;
}
#chara .charalist li:nth-child(even):not(:first-child) {
	margin-right: 3%;
}

/* chara img */
#chara .charalist li.zorori {
	width: 64.1%;
	margin: 2em 0 0 17.5%;
}
#chara .charalist li.zorori img {
	padding-top: 122%;
	background-image: url("../img_new/chara_img01.png");
}
#chara .charalist li.zorori .commbtn {
	right: 15%;
	bottom: 2%;
}
#chara .charalist li.noshishi img {
	padding-top: 119.6%;
	background-image: url("../img_new/chara_img02.png");
}
#chara .charalist li.ishishi img {
	padding-top: 119.6%;
	background-image: url("../img_new/chara_img03.png");
}
#chara .charalist li.hipopo img {
	padding-top: 160.1%;
	background-image: url("../img_new/chara_img04.png");
}
#chara .charalist li.hipopo .commbtn {
	right: 6%;
	bottom: 2%;
}
#chara .charalist li.beet img {
	padding-top: 160.1%;
	background-image: url("../img_new/chara_img05.png");
}

/* -------------------------------------------------------------------------- */
/* -- #commArea -- */
#commArea {
	display: none;
	overflow-y: scroll;
	position: fixed;
	z-index: 200;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(241,223,137,.8);
}
#commArea>div {
	position: relative;
	max-width: 800px;
	margin: 3vw auto 0;
}
#commArea .commitem {
	display: none;
	padding: 2em;
	background-color: #fff;
	border: #ffac2f 5px solid;
	border-radius: 1em;
}
#commArea .commitem h3 {
	padding-bottom: .3em;
	letter-spacing: .06em;
	font-size: 1.3em;
	color: #ce1718;
	border-bottom: #ce1718 5px solid;
}
#commArea .commitem h3 span {
	font-size: 1.3em;
}
#commArea .commitem .txt {
	margin-top: 2em;
	line-height: 2em;
}
#commArea .closeBtn {
	background-color: #ffac2f;
}
#commArea .closeBtn span {
	background-color: #fff;
}


/* min-width 769px */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
body {
	line-height: 1.5em;
	font-size: .98rem;
}
.margin05 {
	margin-top: .5em !important;
}
.margin1 {
	margin-top: 1em !important;
}
.margin2 {
	margin-top: 2em !important;
}
.margin3 {
	margin-top: 3em !important;
}
.pcNoneBlock {
	display: none;
}
/* .closeBtn */
.closeBtn {
	width: 4em;
	height: 4em;
}
.closeBtn p {
	width: 4em;
	height: 4em;
}
.closeBtn span:nth-of-type(1) {
	transform: translateY(1.95em) rotate(-45deg);
}
.closeBtn span:nth-of-type(2) {
	transform: translateY(-1.95em) rotate(45deg);
}
/* #pvArea_over */
#pvArea_over .pvlist2 {
	width: 60%;
	display: flex;
	flex-wrap: wrap;
}
#pvArea_over .pvlist2 li {
	flex-basis: calc(100% / 2);
	height: 2.7em;
	padding-top: .6em;
}
/* nav */
#menubtn {
	display: none;
}
nav {
	height: 66px;
	background: url("../img_new/nav_base.jpg") center center no-repeat;
	background-size: auto;
	border-top: #590f11 3px solid;
	border-bottom: #590f11 3px solid;
}
nav ul {
	position: relative;
	top: 11px;
}
nav li:not(:last-child) {
	margin-right: .5em;
}
nav li img {
	padding-top: 44px;
}
nav li.top {
	width: 112px;
}
nav li.top img {
	background-image: url("../img_new/nav_top_pc.png");
}
nav li.intro {
	width: 210px;
}
nav li.intro img {
	background-image: url("../img_new/nav_intro_pc.png");
}
nav li.intro.on img {
	background-image: url("../img_new/nav_intro_pc_on.png");
}
nav li.story {
	width: 149px;
}
nav li.story img {
	background-image: url("../img_new/nav_story_pc.png");
}
nav li.story.on img {
	background-image: url("../img_new/nav_story_pc_on.png");
}
nav li.chara {
	width: 165px;
}
nav li.chara img {
	background-image: url("../img_new/nav_chara_pc.png");
}
nav li.chara.on img {
	background-image: url("../img_new/nav_chara_pc_on.png");
}
nav li.news {
	width: 146px;
}
nav li.news img {
	background-image: url("../img_new/nav_news_pc.png");
}
nav li.theater {
	width: 146px;
}
nav li.theater img {
	background-image: url("../img_new/nav_theater_pc.png");
}
nav li.moviecont {
	width: 130px;
}
nav li.moviecont img {
	background-image: url("../img_new/nav_moviecont_pc.png");
}
/* header */
header,
#chara .mainarea {
	margin-top: 66px !important;
}
/* #index header */
#index header {
	padding-top: 62.2%;
	background-image: url("../img_new/he_mainimg_pc.jpg");
}
#index header h1 {
	left: 3.4%;
	top: 26.6%;
	width: 40.7%;
}
#index header h2 {
	left: 6.2%;
	top: 8.9%;
	width: 35.4%;
}
#index header h3 {
	left: 41.9%;
	top: 48.4%;
	width: 8.8%;
}
#index header .roadshow {
	left: 16.8%;
	top: 52.6%;
	width: 15.5%;
}
#index header .dvd {
    position: absolute;
    left: 23%;
    bottom: 24%;
    width: 17%;
}

/* main */
main {
	padding: 1em 0 3em;
}
body:not(#index) main {
	padding-top: 4em;
}
/* .btnarea */
.btnarea p:nth-of-type(-n+3) {
	width: 153px;
}
.btnarea p.comm {
	width: 306px;
}
.btnarea p:not(:last-of-type) {
	margin-right: 1em;
}
/* .billing */
.billing {
	width: 600px;
	margin: 2em auto 0;
}
/* .tieupbnr */
.tieupbnr li {
	width: calc(calc(100% / 4) - 1%);
}
.tieupbnr li:not(:nth-child(4n)) {
	margin-right: calc(4% / 3);
}
.tieupbnr li:nth-child(n+5) {
	margin-top: 1em;
}
/* .bnr_sns */
.bnr_sns {
	margin-top: 2em;
}
.bnr_sns li:nth-child(2) {
	margin-left: 1em;
	margin-right: 1em;
}
.bnr_sns li:nth-child(n+2) {
	padding-top: 6px;
}
/* .bnr_footer */
.bnr_footer {
	width: calc(775px + 4em);
	margin: 2em auto 0;
}
.bnr_footer li {
	margin-top: 1em;
}
.bnr_footer li:not(:nth-child(5n)) {
	margin-right: .99em;
}
/* .tokubnrarea */
#index .tokubnrarea li {
	width: 49%;
}
#index .tokubnrarea li:first-child {
	margin-right: 2%;
}
/* #commArea */
#commArea .closeBtn {
	right: -1em;
	top: -1em;
}
/* #intro */
#intro header {
	height: 0;
	padding-top: 90.7%;
	background-image: url("../img_new/intro_backimg2_pc.jpg");
	background-position: center top;
}
#intro header .txtarea {
	position: absolute;
	top: 5%;
	left: 45%;
	width: 44%;
	padding: 7% 1.5% 4%;
}
#intro header .imgpc {
	position: absolute;
	z-index: 10;
	left: -1vw;
	bottom: 0;
	width: 52vw;
}
/* #story */
#story header {
	height: 0;
	padding-top: 93.3%;
	background-image: url("../img_new/story_backimg_pc.jpg");
	background-position: center top;
}
#story header h1 {
	top: 1%;
	width: 57%;
}
#story header .txtarea {
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
	width: 50%;
	margin: auto;
	padding: 2% 1.5% 3.5%;
	border-width: 5px;
}
/* #chara */
#chara header {
	margin-top: 0 !important;
}

}



/* max-width 768px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
body {
	line-height: 1.5em;
	font-size: 16px;
}
.margin05 {
	margin-top: 2% !important;
}
.margin1 {
	margin-top: 4% !important;
}
.margin2 {
	margin-top: 7% !important;
}
.margin3 {
	margin-top: 10% !important;
}
.spNoneBlock {
	display: none;
}
/* .closeBtn */
.closeBtn {
	right: 2vw;
	width: 14vw;
	height: 14vw;
}
.closeBtn p {
	width: 14vw;
	height: 14vw;
}
.closeBtn span:nth-of-type(1) {
	transform: translateY(7vw) rotate(-45deg);
}
.closeBtn span:nth-of-type(2) {
	transform: translateY(-7vw) rotate(45deg);
}
/* #pvArea_over */
#pvArea_over #playerBase {
	top: 25vw;
	width: 96%;
}
#pvArea_over .pvlist2 {
	width: 96vw;
	top: 90vw;
}
#pvArea_over .pvlist2 li {
	width: 100%;
}
/* nav */
#menubtn {
	position: fixed;
	z-index: 101;
	left: 1vw;
	top: 1vw;
	width: 12vw;
	height: 12vw;
	cursor: pointer;
	background: url("../img_new/menubtn_open.png") center center no-repeat;
	background-size: cover;
}
#menubtn.active {
	background-image: url("../img_new/menubtn_close.png");
}
nav {
	display: none;
	height: 100%;
	background: rgb(237,130,172);
	background: linear-gradient(180deg, rgba(237,130,172,1) 0%, rgba(238,60,64,1) 100%);
}
nav ul {
	width: 80vw;
	margin: 10vw 0 0 15vw;
}
nav ul li {
	width: 100%;
	margin-top: 5vw;
}
nav ul li img {
	padding-top: 12.5%;
}
nav li.top img {
	background-image: url("../img_new/nav_top_sp.png");
}
nav li.intro img {
	background-image: url("../img_new/nav_intro_sp.png");
}
nav li.intro.on img {
	background-image: url("../img_new/nav_intro_sp_on.png");
}
nav li.story img {
	background-image: url("../img_new/nav_story_sp.png");
}
nav li.story.on img {
	background-image: url("../img_new/nav_story_sp_on.png");
}
nav li.chara img {
	background-image: url("../img_new/nav_chara_sp.png");
}
nav li.chara.on img {
	background-image: url("../img_new/nav_chara_sp_on.png");
}
nav li.news img {
	background-image: url("../img_new/nav_news_sp.png");
}
nav li.theater img {
	background-image: url("../img_new/nav_theater_sp.png");
}
nav li.moviecont img {
	background-image: url("../img_new/nav_moviecont_sp.png");
}
/* .backimg */
.wraparea .backimg {
	background-size:auto 100%;
}
/* #index header */
#index header {
	padding-top: 140%;
	background-image: url("../img_new/he_mainimg_sp.jpg");
}
#index header h2 {
	left: 2%;
	top: 0;
	width: 96%;
}
#index header h1 {
	left: 2%;
	top: 69%;
	width: 74%;
}
#index header h3 {
	left: 59%;
	top: 39%;
	width: 18%;
}
#index header .roadshow {
	left: 27%;
	top: 89%;
	width: 34%;
}


/* main */
#index main {
	padding: 2vw 2vw 10vw;
	background: none;
}
	#index main::after {
		width: 100%;
		padding-top: 37.6%;
	}
body:not(#index) main {
	padding: 8vw 2vw 4vw;
	background-position: right 1em;
	background-size: 200% auto;
}
/* .billing */
.billing {
	margin: 4vw 3vw 0;
}
/* .btnarea */
.btnarea p {
	margin-top: 2vw;
}
.btnarea p:nth-of-type(-n+2) {
	width: 48%;
}
/* .tieupbnr */
.tieupbnr {
	margin: 7vw auto 2vw;
	padding: 3vw;
}
.tieupbnr li {
	width: calc(calc(100% / 2) - 1%);
}
.tieupbnr li:nth-child(odd) {
	margin-right: 2%;
}
.tieupbnr li:nth-child(n+3) {
	margin-top: 2%;
}
/* .bnrarea */
.bnrarea li img {
	width: 100%;
}
/* .bnr_sns */
.bnr_sns {
	margin-top: 4vw;
}
.bnr_sns li {
	margin-top: 2vw;
}
/*.bnr_sns li:nth-child(2) {
	margin-right: 2vw;
}*/
/* .bnr_footer */
.bnr_footer {
	width: 100%;
	margin: 0 auto 0;
}
.bnr_footer li {
	width: calc(calc(100% / 3) - 1%);
	margin-top: 2vw;
}
.bnr_footer li:nth-child(3n+2) {
	margin-left: 1.5%;
	margin-right: 1.5%;
}
/* .tokubnrarea */
#index .tokubnrarea {
	margin: 4vw auto 0;
}
#index .tokubnrarea li {
	width: 100%;
}
/* #story */
#story header {
	padding: 10% 0 136%;
	background-image: url("../img_new/story_backimg_sp1.jpg"), url("../img_new/story_backimg_sp2.jpg");
	background-position: center top, center bottom;
}
#story header h1 {
	position: relative;
}
#story header .txtarea {
	position: relative;
	margin: 66% 2% 0;
	padding: 4% 2% 5%;
	border-width: 3px;
}
/* #intro */
#intro header {
	padding-bottom: 212%;
	background-image: url("../img_new/intro_backimg_sp.jpg");
	background-position: center bottom;
}
#intro header .txtarea {
	position: relative;
	margin: 15% 3% 0;
	padding: 16% 3% 8%;
}
	#intro header .txtarea::after {
		right: -2%;
		bottom: -23%;
		width: 66%;
		padding-top: 39.5%;
	}
/* #chara */
#chara .mainarea {
	padding: 10vw 3vw 6vw;
	background-size: auto, 190% auto;
}
#chara header h1 {
	width: 70vw;
}
#chara .charalist li.zorori,
#chara .charalist li:nth-child(n+2) {
	margin-top: 4vw;
}
/* #commArea */
#commArea>div {
	margin: 14vw 3vw;
}
#commArea .commitem {
	padding: 6vw 3vw;
}
#commArea .commitem h3 {
	font-size: 1.2em;
}
#commArea .closeBtn {
	right: -2vw;
	top: -6vw;
}

}