@charset "utf-8";
/* CSS Document */

/* ================================================================================
-----------------------------------------------------------------------------------
	section#description
-----------------------------------------------------------------------------------
================================================================================ */

@media screen and (max-width: 880px) {
	
	section#description {
		padding: 50px 0 0 0;
		background: #fff;
	}

	section#description > div {
		width: auto;
		position: relative;
	}

	/* =================================================================
		div#chara
	================================================================= */

	div#chara > ul {
		width: 100%;
		height: 280px;
		margin: 0 auto;
		transition: all .2s;
		position: relative;
	}
	
	div#chara > ul.comp {
		height: 370px;
	}

	div#chara > ul > li {
		width: 100%;
		bottom: 0;
		position: absolute;	
	}

	div#chara > ul > li img.btn {
		cursor: pointer;
	}

	div#chara > ul > li:nth-of-type(1) {	height: 204px;	margin: 0 0 104px 0;	}
	div#chara > ul > li:nth-of-type(2) {	height: 249px;	margin: 0 0 104px 0;	opacity: 0; display: none;	}
	div#chara > ul > li:nth-of-type(3) {	height: 682px;	margin: 0 0 31px 0;	opacity: 0; display: none;	}

	div#chara > ul > li > img {
		left: 46%;
		position: absolute;
	}

	div#chara > ul > li:nth-of-type(1) > img:nth-of-type(1) {	width: 90px;	height: 73px;	margin: 0 0 0 -8%;	bottom: 0;	}
	div#chara > ul > li:nth-of-type(1) > img:nth-of-type(2) {	width: 102px;	height: 112px;	margin: 0 0 0 50px;		bottom: 46px;	}
	div#chara > ul > li:nth-of-type(2) > img:nth-of-type(1) {	width: 173px;	height: 165px;	margin: 0 0 0 -18%;	bottom: 0;	}
	div#chara > ul > li:nth-of-type(3) > img:nth-of-type(1) {	width: 240px;	height: 260px;	margin: 0 0 0 -120px;	bottom: 77px;	}

	div#chara > ul > li > ul {
		width: 240px;
		height: 69px;
		margin: 0 0 0 -120px;
		left: 50%;
		bottom: 0;
		position: absolute;
	}

	div#chara > ul > li > ul > li {
		width: 70px;
		height: 100%;
		top: 0;
		position: absolute;
	}

	div#chara > ul > li > ul > li:nth-of-type(1) {	left: 0px;		}
	div#chara > ul > li > ul > li:nth-of-type(2) {	left: 85px;	}
	div#chara > ul > li > ul > li:nth-of-type(3) {	left: 170px;	}

}

@media screen and (max-width: 620px) {
	
	section#description {
		padding: 30px 0 0 0;
		background: #fff;
	}

	section#description > div > h2 {
		padding: 41px 0 0 0;
		margin: 0 0 20px 0;
		background-size: auto 41px;
	}

	div#chara > ul > li:nth-of-type(1) {	height: 204px;	margin: 0 0 84px 0;	}
	div#chara > ul > li:nth-of-type(2) {	height: 249px;	margin: 0 0 84px 0;	opacity: 0; display: none;	}
	div#chara > ul > li:nth-of-type(3) {	height: 682px;	margin: 0 0 31px 0;	opacity: 0; display: none;	}
	
}

/* ================================================================================
-----------------------------------------------------------------------------------
	section#about
-----------------------------------------------------------------------------------
================================================================================ */

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

	section#about > div {
		padding: 40px 0 104px 0;
	}

	section#about > div > div {
		height: auto;
		padding: 25% 0 0 0;
		background: url(../../img/index_sp/comment_top.png) center top no-repeat;
		background-size: 100% auto;
	}

	section#about > div > div > div {
		padding: 0 0 26% 0;
		background: url(../../img/index_sp/comment_bottom.png) center bottom no-repeat;
		background-size: 100% auto;
	}

	section#about > div > div > div > div {
		padding: 20px 20px 0 20px;
		background: #fff;
		display: block;
	}

	section#about > div > div > div > div > p {
		padding: 0 0 12px 0;
		display: block;
	}

	section#about > div > div > div > div > p > b {
		font-weight: bold;
	}

}