/* CSS Document */


.top-img aside {
    font-size: .9em;
    text-align: right;
    margin: 5px auto 15px;
}
.top-img aside:before {
    content: "※";
}
.features {
	text-align: center;
	margin-bottom: 30px;
}
.features li {
	display: inline-block;
}
.features li:first-child:after {
	content: "×";
	font-size: 2em;
	padding-left: 3px;
}
.features li span {
	background: #333;
	color: #FFF;
	border-radius: 5px;
	padding: 5px;
	display: inline-block;
	font-size: 1.5em;
}
.price,
.sample,
.equipment{
	width: 80%;
	margin: 0 auto 30px;
}

.price .content {
	display: table;
	width: 100%;
	border: 1px solid #333;
	text-align: center;
}
#main .price h2 {
	color: #FFF;
	background: #666;
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	height: 150px;
	font-size: 1.5em;
	letter-spacing: .3em;
	
}
#main .price span {
	display:  inline-block;
	padding: 3px;
	border: 1px solid #FFF;
	font-weight: normal;
	margin-bottom: 5px;
	font-size: .6em
}
#main aside {
	font-size: .8em;
}
.price .content p {
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
}
.price .content p strong {
	font-size: 3em;
	color: #C00;
}
.price aside {
	font-size: .9em;
	margin: 5px 0 0 0;
}

.price aside li:before {
	content: "※";
}
#main .feature h4 {
	margin-bottom: 15px;
}
#main .feature div {
	margin-bottom: 20px;
}
#main .feature h5 {
	color: #185C85;
}
#main .feature .performance {
	display: flex;
	align-items: center;
}
#main .feature .performance figure{
	width: 120px;
}
#main .feature .performance div {
	width: calc( 100% - 120px);
}
#main .feature .performance figure img{
	width: 110px;
	height: 100px;
}
.text {
	margin-bottom: 15px;
}
.comparison {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.comparison .info dl {
	display: table;
}
.comparison .info dt,
.comparison .info dd {
	display: table-cell;
}
.comparison .info dt {
	color: #7C8931;
}
.comparison .info dd:before {
	content: "：";
}
.comparison .info dd span {
	font-size: .8em;
}
#main .comparison section:last-child h3 {
	color: #7C8931;
	font-size: 1.8em;
}
.comparison .info span {
	color: #CC0000;
	font-size: 1.3em;
}
.sample .area {
	border: 3px solid #7C8931;
	display: flex;
	justify-content: space-between;
	text-align: center;
	width: 350px;
	margin: 0 auto 30px;
}
.sample .area dt {
	color: #FFF;
	background: #7C8931;
	padding: 3px;
	width: 35%;
	font-size: 1.2em;
}
.sample .area dd {
	padding: 3px;
	font-size: .9em;
	width: 65%;
}

.sample .area dd strong {
	font-size: 1.5em;
	color: #7C8931;
}

.sample figure {
	text-align: center;
	margin: 0 auto;
	width: 90%;
}
.sample figure img {
	width: 100%;
	height: auto;
}
.sample figcaption {
	text-align: left;
	font-size: .8em;
}
.equipment h2{
	margin-bottom: 30px;
}
.equipment .flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.equipment .flex section {
	width: 48%;
	max-width: 300px;
	margin: 0 1% 30px;
}
.equipment h3{
	font-weight: normal;
	color: #7C8931;
	margin: 0 10px 15px;
}
.equipment h3 span {
	padding-left: 5px;
	font-size: .9em;
	color: #999;
}
.equipment figure {
	text-align: center;
	margin-bottom: 5px;
}

.img-center {
	text-align: center;
	margin-bottom: 30px;
}
@media screen and (max-width: 960px) {
.price,
.sample,
.equipment {
	width: 90%;
}
.comparison section{
	width: 40%;
}
.comparison > figure{
	width: 7%;
}
}
@media screen and (max-width: 600px) {
.features {
	margin-bottom: 20px;
}
	.features li span {
	width: auto;
	font-size: 1.1em;
}
	}
@media screen and (max-width: 480px) {
.price,
.sample,
.equipment {
	width: 96%;
}
#main .price h2 {
	font-size: 1.3em;
	letter-spacing: .2em;
	
}
.price .content p strong {
	font-size: 2em;
}
.equipment .flex {
	display: block;
}
.equipment .flex section{
	width: 100%;
	margin: 0 auto 30px;
}
.comparison .info dl {
	font-size: .9em;
}
}

@media screen and (max-width: 320px) {
.price .content p strong {
	font-size: 1.7em;
}
}