/* ==================== 愛すべき乳  ====================*/

@media screen and (max-width: 640px) {
	#index > div .renewBanner {
		padding: 1em;
	}
}
@media screen and (min-width: 641px) {
	#index > div {
		position: relative;
	}
	#index > div .renewBanner {
		position: absolute;
		left: 0;
		top: 55%;
		padding: 1.5em;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#index > div .renewBanner img {
		width: 100%;
	}
}

@media screen and (max-width: 640px) {
	.Knowledge {
		margin: 1em auto;
	}
	#title {
		width: 90%;
		margin: 1em auto;
	}
	#title h1 {
		margin: 0;
	}
	#title p {
		font-weight: bold;
		text-align: justify;
		margin: 1em 0 0;
		line-height: 1.5;
		font-size: 90%;
	}
	
	#index {
		width: 90%;
		margin: 0 auto;
	}
	#index > div {
		padding: 0.8rem;
		margin-top: 1rem;
		border: 1px solid #BFBFBF;
		height: auto !important;
	}
	#index > div h2 {
		overflow: show;
		height: 3rem;
		margin: 0;
	}
	#index > div h2 a {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#index > div h2 span {
		display: table-cell;
		vertical-align: top;
	}
	#index > div h2 span.title img {
		display: block;
		width: auto;
		height: 1.8rem;
		margin-top: 0.5rem;
	}
	#index > div h2 span.image {
		width: 30%;
		text-align: center;
	}
	#index > div h2 span.image img {
		display: block;
		width: 100%;
		height: auto;
		margin-left: auto;
	}
	
	#index > div ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	#index > div li {
		font-weight: bold;
		font-size: 90%;
		margin-top: 0.3em;
		padding-left: 1rem;
	}
	#index > div li a {
		color: inherit;
		text-decoration: none;
	}

}

@media screen and (min-width: 641px) {
	.Knowledge {
		width: 667px;
		margin: 37px auto;
	}
	
	/*==================== title ====================*/
	#title {
		width: 648px;
		margin: 0 auto;
	}
	#title h1 img {
		width: 380px;
		height: auto;
	}
	#title p {
		margin-top: 10px;
		width: 648px;
		height: 37px;
	}
	
	/*==================== index ====================*/
	#index {
		width: 624px;
		margin: 30px auto 0;
	}
	#index > div {
		float: left;
		width: 280px;
		padding: 10px;
		margin: 5px;
		border: 1px solid #BFBFBF;
	}
	
	/*---------- h2 ----------*/
	#index > div h2 {
		position: absolute;
		width: 280px;
	}
	#index > div h2 a {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#index > div h2 span {
		display: table-cell;
		vertical-align: top;
	}
	#index > div h2 span.title {
		padding-top: 4px;
	}
	#index > div h2 span.title img {
		width: auto;
		height: 28px;
	}
	#index > div h2 span.image {
		width: 100px;
		text-align: center;
	}
	#index > div h2 span.image img {
		width: 100px;
		height: auto;
	}
	
	/*---------- ul, li ----------*/
	#index ul {
		position: relative;
		z-index: 1;
		padding-top: 44px;
	}
	#index li {
		height: 24px;
	}
}