@charset "UTF-8";

@media screen and (max-width:900px) {

	#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: 100%;
		text-align: center;
	}
   
	h2 img {
		width: 100%;
	}
	
	.textandimage_box {
		width: 100%;
		margin: 30px auto;
		padding: 5px;
		display: flex;
		justify-content: center;
	}

	.textandimage_box {
		display: block;
		width: 100%;
	}

	.textandimage_box_text {
		padding: 0 50px !important;
	}

	.textandimage_box li {
		padding: 5px;
	}

	.textandimage_box_image {
		text-align: center;
	}
	.textandimage_box_image img {
		width: 70%;
	}
	
	/* ======================================================================
		story
	====================================================================== */

	

	/*======================================================================
		character
	======================================================================*/

	#characterList ul {
		width: 100%;
	}

	.individual_frame {
		position: relative;
		width: 100%;
		background-size: 100% 100%;
	}
	
	.individual_contents .text{
		font-size: 1.1em !important;
		font-weight: bold;
	}
	
	/* 多恵、麻里乃用 ---------------- */

	.individual_contents2 .image {
		left: -10px !important;
	}

	.individual_contents2 .text {
		font-size: 1.1em !important;
		font-weight: bold !important;
	}

	.individual_contents2 .name img {
		width: 105%;
	}
	.individual_contents2 .text_left {
		font-weight: bold;
	}
	.individual_contents2 .text_right {
		left: 480px;
		top: 130px;
		font-weight: bold;
	}
	
	/* voice button ---------------- */
	.individual_contents .voice {
		right: 40px;
	}
	.individual_contents .voice img, .individual_contents2 .voice img {
		width: 150%;
	}
	.individual_contents2 .voice_left {
		left: 15px;
		top: 240px;
	}
	.individual_contents2 .voice_right {
		left: 450px;
		top: 305px;
	}


	/*======================================================================
		gallery
	======================================================================*/

	#gallery .eventcg_list_item {
		width: 400px;
	}

	#gallery .eventcg_list_item img {
		width: 100%;
	}


	/*======================================================================
		product
	======================================================================*/

	#product li.benefits_list_shop {
		width: 80%;
		font-size: 1.5em;
	}
	
	#product li.shop_name, #product li.shop_item_name {
		padding: 10px 0;
	}

}