/* ==================== detail.css ==================== */

.Detail {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	background: no-repeat center bottom;
	background-size: contain;
}

.Detail .totop {
	position: absolute;
	z-index: 1;
}

.Detail * {
	-webkit-user-select: none;
	user-select: none;
}

.Detail .Cover,
.Detail .Page {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

.Detail.open .Cover,
.Detail:not(.open) .Page {
	display: none;
}

@media (max-width: 567px) {
	.Detail {
		background-image: url(../images/tales/sp_back.jpg);
	}
	
	.Detail .totop {
		left: 1em;
		top: 1em;
	}
	.Detail:not(.open) .totop img {
		opacity: 0;
	}
	
	.Detail:not(.open) .totop {
		background: url(../images/tales/totop_w.svg) no-repeat left center;
		background-size: contain;
	}

	.Detail .base {
		width: 100vw;
		height: 100vh;
	}
}

@media (min-width: 568px) {

	.Detail {
		background-image: url(../images/tales/pc_back.jpg);
		min-height: 100vh;
	}

	.Detail .totop {
		left: 1em;
		top: 0.75em;
	}
	
	.Detail .base {
		width: 32em;
		height: 35em;
		padding-left: 0.4em;
		padding-top: 0.4em;
	}

}


/* ==================== detail_cover.css ==================== */

.Cover {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.Cover img[src*="nextbtn"] {
	width: 4em;
}

@media (max-width: 567px) {

	.Cover {
		background-size: cover;
		padding-top: 5em;
	}

	.Detail.ojisan .Cover {background-image: url(../images/tales/sp_cover_ojisan.png);}
	.Detail.kerota .Cover {background-image: url(../images/tales/sp_cover_kerota.png);}
	.Detail.boya .Cover {background-image: url(../images/tales/sp_cover_boya.png);}
	.Detail.mimippe .Cover {background-image: url(../images/tales/sp_cover_mimippe.png);}
	.Detail.pongoro .Cover {background-image: url(../images/tales/sp_cover_pongoro.png);}
	.Detail.kontan .Cover {background-image: url(../images/tales/sp_cover_kontan.png);}
	.Detail.daisuke .Cover {background-image: url(../images/tales/sp_cover_daisuke.png);}
	.Detail.chorohei .Cover {background-image: url(../images/tales/sp_cover_chorohei.png);}
	.Detail.kamegoro .Cover {background-image: url(../images/tales/sp_cover_kamegoro.png);}
	.Detail.sasuketorusuke .Cover {background-image: url(../images/tales/sp_cover_sasuketorusuke.png);}
	.Detail.moguro .Cover {background-image: url(../images/tales/sp_cover_moguro.png);}
	.Detail.daikokusama .Cover {background-image: url(../images/tales/sp_cover_daikokusama.png);}
	.Detail.akaoniaooni .Cover {background-image: url(../images/tales/sp_cover_akaoniaooni.png);}

	.Cover img[src*="cover"] {
		font-size: 110%;
	}
	.Cover img[src*="nextbtn"] {
		margin-top: 2em;
	}

}

@media (min-width: 568px) {

	.Cover {
		justify-content: center;
		background: no-repeat center center;
		background-size: contain;
		cursor: pointer;
	}

	.Detail.ojisan .Cover {background-image: url(../images/tales/pc_cover_ojisan.png);}
	.Detail.kerota .Cover {background-image: url(../images/tales/pc_cover_kerota.png);}
	.Detail.boya .Cover {background-image: url(../images/tales/pc_cover_boya.png);}
	.Detail.mimippe .Cover {background-image: url(../images/tales/pc_cover_mimippe.png);}
	.Detail.pongoro .Cover {background-image: url(../images/tales/pc_cover_pongoro.png);}
	.Detail.kontan .Cover {background-image: url(../images/tales/pc_cover_kontan.png);}
	.Detail.daisuke .Cover {background-image: url(../images/tales/pc_cover_daisuke.png);}
	.Detail.chorohei .Cover {background-image: url(../images/tales/pc_cover_chorohei.png);}
	.Detail.kamegoro .Cover {background-image: url(../images/tales/pc_cover_kamegoro.png);}
	.Detail.sasuketorusuke .Cover {background-image: url(../images/tales/pc_cover_sasuketorusuke.png);}
	.Detail.moguro .Cover {background-image: url(../images/tales/pc_cover_moguro.png);}
	.Detail.daikokusama .Cover {background-image: url(../images/tales/pc_cover_daikokusama.png);}
	.Detail.akaoniaooni .Cover {background-image: url(../images/tales/pc_cover_akaoniaooni.png);}

	.Cover img[src*="nextbtn"] {
		position: absolute;
		right: 0;
		top: 40%;
	}
	
}


/* ==================== detail_page.css ==================== */

.Page .scene {
	display: flex;
	flex-direction: column;
}

.Page .scene:not(.active) {
	display: none;
}

.Page .movie {
	position: relative;
	align-self: center;
}

.Page .movie video {
	vertical-align: top;
}

.Page .movie .replay {
	position: absolute;
	right: 2em;
	bottom: 2em;
	cursor: pointer;
	width: 2em;
}

.Page .scene:not(.showReplay) .replay {
	display: none;
}

.Page .text {
	align-self: center;
	display: flex;
	align-items: center;
}

.Page .text img:not(.active) {
	display: none;
}

.Detail.start .Page .pager .prev,
.Detail.finish .Page .pager .next {
	visibility: hidden;
}


@media (max-width: 567px) {

	.Page {
		padding: 3em 1.25em 1em;
	}

	.Page .text {
		height: 14em;
	}
	.Page .text img[src$=".svg"] {
		font-size: 70%;
	}
	.Page .text img.end {
		width: 14em;
	}

	.Page .movie video {
		width: 100%;
	}

	.Page .pager {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0.5em;
	}

	.Page .pager img {
		width: 3.5em;
	}

	.Page .pager .prev {
		transform: scaleX(-1);
	}

}

@media (min-width: 568px) {

	.Page {
		padding: 3em 4.5em 4em 4em;
		background: url(../images/tales/page.png) no-repeat center center;
		background-size: contain;
	}

	.Page .scene {
		height: 100%;
	}

	.Page .movie video {
		width: 21em;
	}

	.Page .text {
		flex-grow: 1;
	}

	.Page .text img.end {
		cursor: pointer;
		width: 12em;
	}

	.Page .text img[src$=".svg"] {
		font-size: 66.6%;
	}

	.Page .pager img {
		position: absolute;
		top: 40%;
		width: 4em;
		cursor: pointer;
	}
	.Page .pager .prev {
		left: 0;
		transform: translateX(-0.25em) scaleX(-1);
	}
	.Page .pager .next {
		right: 0;
	}

}


/* ==================== index.css ==================== */




/* ==================== index_list.css ==================== */

.Index .list {
	display: flex;
	flex-direction: column;
}

.Index .list ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.Index .list li {
	padding: 0.5em;
	transition:
		opacity 400ms,
		transform 250ms;
}

.Index .list li:hover {
	transform: scale(1.05);
}

.Index .list li:not(.active) {
	position: fixed;
	visibility: hidden;
	opacity: 0;
}

.Index .list li a {
	display: flex;
	align-items: center;
	padding: 0.5em;
	padding-left: 0.25em;
	background: url(../images/tales/list_base.png) no-repeat center center;
	background-size: 100% 100%;
	color: inherit;
	text-decoration: none;
}

.Index .list .chara {
	width: 3.5em;
	text-align: center;
}

.Index .list .title {
	line-height: 1.3;
	padding-right: 1em;
}

.Index .list .thum {
	margin-left: auto;
}

.Index .list .showAll {
	margin: 1em auto;
	text-align: center;
}
.Index .list[data-charactor="all"] .showAll {
	display: none;
}

@media (max-width: 567px) {

	.Index .list ul {
		width: 22em;
	}

	.Index .list .thum img {
		max-width: none;
		width: 7em;
	}

}

@media (min-width: 568px) {
	
	.Index .list ul {
		display: flex;
		flex-wrap: wrap;
	}
	
	.Index .list li {
		box-sizing: border-box;
		width: 33.333%;
	}

	.Index .list .chara img {
		font-size: 90%;
	}
	.Index .list .title {
		width: calc(100% - 3.5em - 4.5em);
		font-size: 70%;
	}
	.Index .list .thum img {
		width: 4.5em;
		height: auto;
	}

}


/* ==================== index_select.css ==================== */

.Index .select {
	position: relative;
	border: 0.3em solid white;
	border-radius: 2em;
	margin: 2em auto 0;
	padding: 0.5em 0 1.5em;
	background: rgba(255,255,255,0.3);
}

.Index .select h2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	margin: 0;
	transform: translateY(-50%);
}

.Index .select ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.Index .select li {
	margin: 2em 0.2em 0;
	width: 4.75em;
	text-align: center;
	overflow: visible;
	transition: transform 250ms;
}

.Index .select li:hover {
	transform: scale(1.05);
}

.Index .select li img {
	max-width: none;
}


@media (min-width: 568px) {
	.Index .select {
		width: 35em;
	}
}