@charset "UTF-8";


#contents::before {
	background: url( ../img/bg.png ) no-repeat center center /cover;
	content: ' ';
	overflow: visible;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}
h2 {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	text-align: center;
}

.textandimage_box {
	width: 1000px;
	margin: 30px auto;
	display: flex;
	justify-content: center;
}
.textandimage_box li {
	padding: 5px;
}
.textandimage_box_text {
	width: 90%;
	position: relative;
	color: white;
	text-shadow: black 1px 1px 7px, black -1px 1px 7px,black 1px -1px 7px, black -1px -1px 7px;
	
	text-align: left;
}
.textandimage_box_text b {
	color: #b62123;
}
.textandimage_box_image img, .textandimage_box_image_nohover img {
	box-shadow: 0px 0px 5px #cc9966;
	transition: all, 0.3s;
}
.textandimage_box_image img:hover {
	box-shadow: 0px 0px 5px #cc0000;
	filter: brightness(1.2);
	transition: all, 0.3s;
}
.image_box {
	text-align: center;
}
.image_box img {
	box-shadow: 0px 0px 5px #cc9966;
}
/*.text {
	color: white;
	text-shadow: black 1px 1px 7px, black -1px 1px 7px,black 1px -1px 7px, black -1px -1px 7px;
	text-align: left;
}*/

/* ======================================================================
	story
====================================================================== */

/*======================================================================
	character
======================================================================*/
#characterList ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 1000px;
	margin: 0 auto;
}
#characterList .chara a {
	display: inline-block;
	width: 190px;
	height: 577px;
	background-position: 100% 0;
}
#characterList .chara img {
	width: 190px;
	height: 577px;
	transition: opacity 0.3s;
}
#characterList .chara img:hover {
	opacity: 0;
	transition: opacity 0.3s;
}
/* each character setting */
#characterList a.chara01, #characterList .chara01 img { background-image: url( ../img/character/chara01.png ); }
#characterList a.chara02, #characterList .chara02 img { background-image: url( ../img/character/chara02.png ); }
#characterList a.chara03, #characterList .chara03 img { background-image: url( ../img/character/chara03.png ); }
#characterList a.chara04, #characterList .chara04 img { background-image: url( ../img/character/chara04.png ); }
#characterList a.chara05, #characterList .chara05 img { background-image: url( ../img/character/chara05.png ); }
#characterList a.chara06, #characterList .chara06 img { background-image: url( ../img/character/chara06.png ); }
#characterList a.chara07, #characterList .chara07 img { background-image: url( ../img/character/chara07.png ); }
#characterList a.chara08, #characterList .chara08 img { background-image: url( ../img/character/chara08.png ); }
#characterList a.chara09, #characterList .chara09 img { background-image: url( ../img/character/chara09.png ); }
#characterList a.chara10, #characterList .chara10 img { background-image: url( ../img/character/chara10.png ); }



/* キャラ詳細 ----------------- */

.individual_frame {
	position: relative;
	width: 979px;
	height: 719px;
	background: url( ../img/character/individual/bg.png ) no-repeat;
}
.individual_contents {
	padding: 30px;
}
.individual_contents li.text {
	width: 500px;
	text-shadow: black 1px 1px 7px, black -1px 1px 7px,black 1px -1px 7px, black -1px -1px 7px;
	line-height: 1.6em;
}
.individual_contents li.text b {
	color: #cc3333;
	text-shadow: black 1px 1px 5px, black -1px 1px 5px,black 1px -1px 5px, black -1px -1px 5px;
}
.individual_contents li.image {
	position: absolute;
	right: 0;
	bottom: -6px;
}
.individual_contents .ss {
	position: absolute;
	left: 50px;
	bottom: 30px;
}
.individual_contents .ss img {
	box-shadow: 1px 1px 3px #cc9966, 0px 0px 3px #cc9966, -1px -1px 3px #cc9966;
}
.individual_contents .voice {
	position: absolute;
	right: 10px;
	top: 20px;
}
.individual_contents .voice img {
	display: block;
	cursor: pointer;
}

/* セット用 --------------------------- */

.individual_contents2 {
	padding: 30px;
}
.individual_contents2 li.name {
	position: relative;
	left: -20px;
}
.individual_contents2 li.text {
	width: 500px;
	text-shadow: black 1px 1px 7px, black -1px 1px 7px,black 1px -1px 7px, black -1px -1px 7px;
	line-height: 1.6em;
}
.individual_contents2 li.text b {
	color: #cc3333;
	text-shadow: black 1px 1px 5px, black -1px 1px 5px,black 1px -1px 5px, black -1px -1px 5px;
}

.individual_contents2 .text_right {
	position: absolute;
	left: 50%;
	top: 140px;
}

.individual_contents2 li.image {
	position: absolute;
	left: 20px;
	bottom: -6px;
}
.individual_contents2 .ss {
	position: absolute;
	right: 30px;
	bottom: 30px;
}
.individual_contents2 .ss img {
	box-shadow: 1px 1px 3px #cc9966, 0px 0px 3px #cc9966, -1px -1px 3px #cc9966;
}
.individual_contents2 .voice_left {
	position: absolute;
	left: 40px;
	top: 330px;
}
.individual_contents2 .voice_right {
	position: absolute;
	left: 500px;
	top: 330px;
}
.individual_contents2 .voice_left img,
.individual_contents2 .voice_right img {
	display: block;
	cursor: pointer;
}
/*======================================================================
	gallery
======================================================================*/
#gallery .movie_list {
	width: 95%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#gallery .movie_item {
	text-align: center;
	margin: 20px;
}
#gallery .movie_title {
	position: relative;
	color: white;
	text-shadow: black 1px 1px 7px, black -1px 1px 7px,black 1px -1px 7px, black -1px -1px 7px;
	margin: 3px;
	border-bottom: solid 3px #b62123;
	font-size: 1.3em;
}
#gallery .eventcg_list {
	position: relative;
	width: 850px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#gallery .eventcg_list_item {
	position: relative;
	margin: 10px;
	width: 400px;
}
#gallery .eventcg_list_item img {
	width: 100%;
	box-shadow: 0px 0px 5px #cc9966;
	transition: all, 0.3s;
}
#gallery .eventcg_list_item img:hover {
	box-shadow: 0px 0px 5px #cc0000;
	filter: brightness(1.2);
	transition: all, 0.3s;
}
/*======================================================================
	product
======================================================================*/
#product section {
	width: 100%;
	text-align: center;
}

#product ul.link_shop {
	width: 100%;
	display: flex;
	justify-content: center;
}

#product .link_shop li {
	width: 30%;
	margin: 5px;
	
	height: 80px;
	line-height: 80px;

	border: #b62123 1px solid;
}
#product .link_shop a {
	display: block;
	width: 100%;
	height: 100%;
	color: white;
	background-color: rgba(0,0,0,0.5);
	transition: background-color, 0.3s;
}
#product .link_shop a:hover {
	background-color: rgba(182,33,35,0.3);
	transition: background-color, 0.3s;
}
#product .single_image img {
	box-shadow: 0px 0px 5px rgba(204,0,0,1);
	transition: filter, 0.3s;
}
#product .single_image img:hover {
	box-shadow: 0px 0px 5px rgba( 204,0,0,1 );
	transition: filter, 0.3s;
}
/* 店舗特典 */
#product ul.benefits_list {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#product li.benefits_list_shop {
	width: 400px;
	margin: 5px;
}
#product .benefits_list_shop li {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
#product li.shop_name {
	background-color: #960103;
	border-radius: 10px;
	font-weight: bold;
}
#product li.shop_item_name {
	margin: 10px 5px;
}
#product li.shop_item_image img {
	box-shadow: 0px 0px 8px rgba(204,0,0,1);
	transition: all, 0.3s;
	
}
#product li.shop_item_image img:hover {
	box-shadow: 0px 0px 12px rgba(255,0,0,1);
	transition: all, 0.3s;
	filter: brightness( 1.2 );
}
#product .benefits_list_shop li.benefits_link {
	border: #b62123 2px solid;
	margin: 5px auto;
	
	width: 70%;
	height: 80px;
	line-height: 80px;
}
#product .benefits_link a {
	display: block;
	width: 100%;
	height: 100%;
	color: white;
	background-color: rgba(98, 61, 61, 0.5);
	transition: background-color, 0.3s;
}
#product .benefits_link a:hover {
	background-color: rgba(182,33,35,0.3);
	transition: background-color, 0.3s;
}