/* CSS Document */


body div.wrap article section.compare {
	padding: 4rem 1rem 2rem 1rem;
}
/*
body div.wrap article section.compare h1 {
	text-align: center;
	font-size: 2rem;
	font-weight: normal;
	margin: 0 0 2rem 0;
	position: relative;
	padding: 0.6em;
	background: rgba(221, 203, 193, .4);
	border-radius: 1rem;
}
body div.wrap article section.compare h1:after {
  	position: absolute;
  	content: '';
  	top: 100%;
  	left: 30px;
  	border: 15px solid transparent;
  	border-top: 15px solid rgba(221, 203, 193, .4);
  	width: 0;
  	height: 0;
}
*/
body div.wrap article section.compare h2 {
	font-size: 1.5rem;
	font-weight: normal;
	text-align: center;
}

body div.wrap article section.compare div.table_wrap {
	
}
body div.wrap article section.compare div.table_wrap table {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 2rem 0 2rem 0;
	border: 1px solid #666;
	font-size: .8rem;
}
body div.wrap article section.compare div.table_wrap table tr {
	
}
body div.wrap article section.compare div.table_wrap table tr th {
	width: 8rem;
	height: auto;
	padding: .3rem .3rem .3rem .3rem;
	margin: 0;
	text-align: center;
	border-right: 1px solid #ccc;
	border-bottom: 3px solid #666;
}
body div.wrap article section.compare div.table_wrap table tr th:nth-of-type(1) {
	border-right: 1px solid #666;
}
body div.wrap article section.compare div.table_wrap table tr th:nth-of-type(8) {
	border-right: initial;
}
body div.wrap article section.compare div.table_wrap table tr th {

}
body div.wrap article section.compare div.table_wrap table tr td {
	width: 8rem;
	height: auto;
	padding: .5rem .3rem .5rem .3rem;
	margin: 0 0 0 0;
	text-align: center;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
body div.wrap article section.compare div.table_wrap table tr td img {
	/*width:   auto;
	height:  auto;*/
	width: 6.5rem;
	height: 6.5rem;
	object-fit: contain;
	padding: 0 0 0 0;
	margin:  0 auto 0 auto;
/*	background-color: #ccc;
	border: 1px solid #666;*/
}
body div.wrap article section.compare div.table_wrap table tr td:nth-of-type(1) {
	border-right: 1px solid #666;
}
body div.wrap article section.compare div.table_wrap table tr td:nth-of-type(8) {
	border-right: initial;
}
body div.wrap article section.compare div.table_wrap table tr th:nth-of-type(even),
body div.wrap article section.compare div.table_wrap table tr td:nth-of-type(even) {
	background: rgba(221, 203, 193, .2);
}
body div.wrap article section.compare div.table_wrap table tr th:nth-of-type(2),
body div.wrap article section.compare div.table_wrap table tr td:nth-of-type(2) {
	background-color: rgba(222, 105, 135, .2);
}
body div.wrap article section.compare div.table_wrap table tr:nth-of-type(2) td,
body div.wrap article section.compare div.table_wrap table tr:last-of-type td {
	border-bottom: 1px solid #666;
}

body div.wrap article section.versus h2 {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0 0 0 0;
	margin:  2rem auto 3rem auto;
	text-align: center;
	font-weight: normal;
	font-size: 1.4rem;
}
body div.wrap article section.versus h2::before {
  	position: absolute;
  	bottom: -10px;
  	left: calc(50% - 5rem);
  	width: 10rem;
  	height: 3px;
  	content: '';
  	border-radius: 3px;
	background-color: rgba(222, 105, 135, 1);
}
body div.wrap article section.versus div.content {
	width: 100%;
	height: auto;
	margin:  0 0 3rem 0;
}
body div.wrap article section.versus div.content::after {
	display: block;
	content: '';
	clear: both;
}
body div.wrap article section.versus div.content img {
	width: 30rem;
	height: auto;
	float: left;
	padding: .5rem;
	border: 1px solid #ccc;
}
body div.wrap article section.versus div.content dl {
	display: block;
	width: 28rem;
	height: auto;
	min-height: 19rem;
	padding: 0 0 0 0;
	margin:  0 0 0 0;
	float: right;
}
body div.wrap article section.versus div.content dl.vs01 {
	background-image: url("../images/tan1.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 35%;
}
body div.wrap article section.versus div.content dl.vs02 {
	background-image: url("../images/tan2.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 27%;
}
body div.wrap article section.versus div.content dl.vs03 {
	background-image: url("../images/tan3.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 35%;
}
body div.wrap article section.versus div.content dl.vs04 {
	background-image: url("../images/tan4.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 35%;
}
body div.wrap article section.versus div.content dl.vs05 {
	background-image: url("../images/tan5.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 35%;
}
body div.wrap article section.versus div.content dl.vs06 {
	background-image: url("../images/tan15.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 37%;
}

body div.wrap article section.versus div.content dl dt {
	width: 100%;
	height: auto;
	padding: 0 0 .2rem 1rem;
	margin:  0 0 .5rem 0;
	font-weight: normal;
	font-size: 1.2rem;
	border-bottom: 1px dotted #999;
}
body div.wrap article section.versus div.content dl dt + p {
	padding: 0 0 0 2rem;
	margin:  0 0 1rem 0;
	font-size: 1.1rem;
}
body div.wrap article section.versus div.content dl dd {
	width: 100%;
	height: auto;
	padding: 0 0 0 2rem;
	margin:  0 0 0 0;
	font-size: 1.1rem;
}
body div.wrap article section.versus div.content dl dd span {
	display: inline-block;
	margin: 0 1rem 0 0;
}
body div.wrap article section.versus div.content p.s-bubble {
	display: block;
	width: 55%;
	height: auto;
	padding: 1rem .5rem 1rem .8rem;
	margin:  1rem auto auto 2rem;
	background-color: azure;
	border: .1rem solid #006600;
	border-radius: 1rem;
	font-size: 1.2rem;
	color: rgb(222, 105, 135);
}
body div.wrap article section.versus div.content p.s-bubble span {
	display: block;
}
body div.wrap article section.versus div.content dl dd {
	
}
body div.wrap article section.versus div.content dl dd {
	
}



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

	body div.wrap article section.compare {
		padding: 2rem 1rem 2rem 1rem;
	}
	body div.wrap article section.compare h1 {
		font-size: 1.5rem;
	}
	body div.wrap article section.compare h2 {
		font-size: 1rem;
	}
	body div.wrap article section.compare div.table_wrap {
    	max-width: 100%;
    	margin: 0 auto 0 auto;
    	overflow: auto;
	}
	body div.wrap article section.compare div.table_wrap table {
		width: 64rem;
		height: auto;
	}
	
	body div.wrap article section.versus h2 {
		font-size: 1.3rem;
	}
	body div.wrap article section.versus div.content img {
		width: 100%;
		height: auto;
		float: initial;
	}
	body div.wrap article section.versus div.content dl {
		width: 100%;
		height: auto;
		min-height: 19rem;
		padding: 0 0 0 0;
		margin:  0 0 1rem 0;
		background-image: url("../images/chara-01a.png");
		background-repeat: no-repeat;
		background-position: bottom right;
		background-size: 30%;
		float: initial;
	}
	body div.wrap article section.versus div.content dl dt {
		padding: 0 0 .2rem 0;
		margin:  0 0 .5rem 0;
		font-weight: normal;
		font-size: 1.2rem;
		border-bottom: 1px dotted #999;
	}
	body div.wrap article section.versus div.content dl dt + p {
		padding: 0 0 0 1rem;
		margin:  0 0 1rem 0;
		font-size: 1.1rem;
	}
	body div.wrap article section.versus div.content dl dd {
		width: 100%;
		height: auto;
		padding: 0 0 0 1rem;
		margin:  0 0 0 0;
		font-size: 1.1rem;
	}
	body div.wrap article section.versus div.content dl dd span {
		display: block;
		margin: 0 1rem 0 0;
	}
	body div.wrap article section.versus div.content p.s-bubble {
		display: block;
		width: 65%;
		height: auto;
		padding: 1rem .5rem 1rem .5rem;
		margin:  1rem auto auto .5rem;
		background-color: azure;
		border: .1rem solid #006600;
		border-radius: 1rem;
		font-size: 1.1rem;
		color: rgb(222, 105, 135);
	}
	
}