@charset "UTF-8";
@media(max-width: 880px){
	
	header {
		height: auto;
		background-size: 100% auto;
		background-image: none;
	}
	.top1 {
		display: none;
	}
	header nav ul {
		padding: 0;
	}
	header .top-image {
		width: 100%;
	}
	header .container .headA {
		display: none;
	}
	header .container .headA-mobile {
		display: block;
		width: 100%;
		position: relative;
	}
	header .container .headA-mobile ul {
		position: absolute;
		top: 10px;

	}
	header .container .headA-mobile a {
		padding: 0;
		margin-left: 3px;
		
	}
	
	.about .container {
		margin: 0;
	}

	.about .mobile-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 60px;
	display: block;
	}

	.sample .container img {
	width: 100%;
	}
	.sample-mobile {
		display: block;
	}
	.sample-pc {
		display: none;
	}
	.characters .container {
		position: static;
		width: 90%;
	}
	.reading-support .container {
		width: 90%;
	}
	.mouse-big {
		display: none;
	}
	.pig-big {
		display: none;
	}
	iframe {
		width: 100%;
	}
	.purchase-btn2 {
		display: block;
	}
	.panda-big {
		display: none;
	}
	.elephant-big {
		display: none;
	}
	.characters .container #introduce {
		display: none;
	}
	.list-mobile {
		display: block;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.introduce-mobile {
		display: flex;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		border: 6px solid #333;
		border-radius: 10px;
		margin-bottom: 20px;
		align-items: center;


	}
	.introduce-mobile .character {
		
	}
	.introduce-mobile .text p {
		padding: 0 10px;
		text-align: left;
	}
	





	.list {
		display: none;
	}
	.purchase .container {
		width: 100%;
		position: relative;
	}
	.purchase-btn-pc {
		display: none;
	}
	.purchase-btn-mobile {
		display: inline-block;
		width: 50%;
	}
	.hippo-big {
		display: none;
	}
	.chimpanzee-big {
		display: none;
	}
	.polar-bear {
		display: inline-block;
		position: absolute;
		top: 35%;
		left: 3%;
		width: 21%;
	}
	.bear {
		display: inline-block;
		position: absolute;
		top: 35%;
		left: 78%;
		width: 17%;
	}
	footer .container {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		margin-top: 20px;
	}
	footer .container img {
		width: 50%;
	}
	.footer-link p {
		display: block;
		text-decoration: underline;
	}
	}
	@media(max-width: 1112px){
		#introduce .text {
			width: 200px;
			margin-left: 30px;
		}
	}
	@media(max-width: 1130px){
		.panda-big {
			display: none;
		}
		.elephant-big {
			display: none;
		}
 	}