@charset "utf-8";

.image{
	width: 450px;
	float: right;
	margin: 15px 0 0 0;
}
.image img{
    max-width: 100%;
    height: auto;
    margin: auto;
}


.frameDetails{
	width: 520px;
	float: left;
	margin: 15px 0 0 0;
}

.frameDetails dt{
	background: url(../../img/common/ar_white.png) no-repeat 10px center #2c72b5;
	padding: 5px 5px 5px 25px;
	color: #FFF;
	margin: 0 0 5px 0;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.frameDetails dd{
	padding: 0 1em 10px 1em;
}

@media screen and (max-width: 979px) {
/*tablet*/
.image{
	width: 44%;
	float: right;
}

.frameDetails{
	width: 55%;
	float: left;
}
    
}

@media screen and (max-width: 768px){
/*smart phone*/
.image{
	width: 100%;
	float: none;
    display:  block;
    margin-bottom: 15px;
    text-align: center;
}
.frameDetails{
	width: 100%;
	float: none;
    display:  block;
}
    
}


@media screen and (max-width: 620px) {
/*sp*/
}
@media screen and (max-width: 480px){
}