@charset "utf-8";

/* --------------
 reset
-------------- */
input,select,textarea {max-width:95% !important;}
h1,h2,h3,h4 {font-size:100%;}

img {max-width:100% !important; height:auto;vertical-align: bottom;}
/*iframe {max-width:100% ; border:0;}*/

/* --------------
 base
-------------- */
body {font-size: 16px;}
.ifpc {display: none!important;}

@media screen and (max-width: 320px) { /*以下の時*/
}
@media screen and (min-width: 321px) { /*以上の時*/
}

@media only screen and (orientation : landscape) { /*横向きの際に適用*/
	body {background-size:100% auto;}
}


/* =base
---------------------------------------------------- */
#wrapper{
}


@media screen and (max-width: 320px) { /*以下の時*/
}
@media screen and (min-width: 321px) { /*以上の時*/
}


header > .in {
	padding: 3px 0 !important;
}


.youtubeBox {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
}
.youtubeBox iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}

/* =contents
------------------------------------------ */
.contents {
	padding: 2rem 20px;
}


.in > .bgBox {
	padding: 10px 1.5rem;
}


.spclm2, .spclm3, .spclm4, .spclm5, .spclm6 {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	margin-left: -10px;
}
.spclm2 > * {
	width: calc((100% / 2) - 10px );
}
.spclm3 > * {
	width: calc((100% / 3) - 10px );
}
.spclm4 > * {
	width: calc((100% / 4) - 10px );
}
.spclm5 > * {
	width: calc((100% / 5) - 10px );
}
.spclm6 > * {
	width: calc((100% / 6) - 10px );
}

*::-ms-backdrop, .spclm2 > * {
  width: calc(50% - 10px); /* IE11 */
}
*::-ms-backdrop, .spclm3 > * {
  width: calc(33.33% - 10px); /* IE11 */
}
*::-ms-backdrop, .spclm4 > * {
  width: calc(25% - 10px); /* IE11 */
}
*::-ms-backdrop, .spclm5 > * {
  width: calc(20% - 10px); /* IE11 */
}
*::-ms-backdrop, .spclm6 > * {
  width: calc(16.66% - 10px); /* IE11 */
}
.spclm2 > *, .spclm3 > *, .spclm4 > *, .spclm5 > *, .spclm6 > * {
	margin-left: 10px;
}

.spclm2 > * >a, .spclm3 > * >a, .spclm4 > * >a, .spclm5 > * >a, .spclm6 > * >a {
	position: relative;
	display: block;
	height: 100%;
}

.alcSP {
  text-align: center;
}



/* =pagetop
------------------------------------------ */

.nlist {
	display: block;
	position: fixed;
	top: .4em;
	right: .4em;
	z-index: 1000;
	padding: .8em;
}

.menu-trigger {
  position: relative;
  width: 33px;
  height: 25px;
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
	text-align: center;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 32%;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 20%;
}

.menu-trigger span:nth-of-type(4) {
  bottom: 0px;
	font-size: .5em;
  background-color: rgba(0,0,0,0.00);
	color: #fff;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(5px) rotate(-315deg);
  transform: translateY(5px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-11px) rotate(315deg);
  transform: translateY(-11px) rotate(315deg);
}

#header-aside {
  /*position: -webkit-sticky;
  position: sticky;*/
	font-size: 4vw;
  /*background-color: rgba(255,255,255,.5)*/
  display: none;
  position: fixed;
	top: 0;
	left: 0;
	z-index: 400;
	width: 100%;
  padding-top: 15%;
}
#header-aside.active {
  height: 100%;
	overflow-y: scroll;
}

.globalNav {
  margin-bottom: 20px;
}
.globalNav li {
  margin-bottom: 20px;
}

.introDl {
	border-bottom: #333 solid 1px;
	padding-bottom: .5em;
}

.introDl dt {
	display: table-cell;
	width: 6em;
	padding-right: 1em;
}
.en .introDl dt {
	width: 9em;
}
.introDl dd {
	display: table-cell;
}




.popup-chara-wrap .popup-chara-txt {
	max-height: 35vh;
	overflow-y: auto;
}
.popup-chara-wrap .popup-chara-txt::-webkit-scrollbar{ 
	width: 5px;
	background: rgba(0,0,0,.05);
}
.popup-chara-wrap .popup-chara-txt::-webkit-scrollbar-thumb{ 
	background: rgba(0,0,0,.1);
	border-radius: 10px;
}
.popup-chara-wrap .popup-chara-txt::-webkit-scrollbar-track-piece:start{
}
.popup-chara-wrap .popup-chara-txt::-webkit-scrollbar-track-piece:end{
}


/*.chapter h2{
	text-align: center;
	font-size: 1.6rem;
	margin: 20px 10px;
}*/

#story li{
	margin-bottom: 4vw;
}

#chara ul li{
  margin-bottom: 10px;
}

.popup-content #comment img {
  width: 150px;
}


.WacthBnr {
bottom: 24vh;
    position: fixed;
	z-index: 999;
}


@media screen and (max-width: 768px) {
			
	#visual .bnrArea {
		width: 100%;
		margin: auto;
		/* padding: 0 15px; */
		display: flex;
		flex-direction: row;
		align-content: center;
	}
	
	#visual .bnrArea>div {
		padding: 5px;
	}
	
}



/*regulos*/
#chara ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
	justify-items: center;
	align-items: flex-start;
}
.charaNav li {
    width: 100%;
}
#chara ul li {
    margin-bottom: 0;
}
.footerGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	max-width: 80vw;
	margin: 0 auto;
	padding-left: 10%;
	line-height: 0;
}
.footerGrid  a {
	margin: 0;
}
@media screen and (max-width: 400px) {
	.footerGrid {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		justify-items: center;
	}
}