
/*===============================================
● 画面の横幅が481px以上
===============================================*/

a {text-decoration: none;}


.title {margin:2px;font-size:normal;line-height:1.2em;}

.price{color:orangered;font-size:x-large;font-weight:bold;}

.raku-box,.amazon-box,.yahoo-box{
	font-size:normal;
	background:#ffffee;
	height: 140px;
	width: 96%;
	margin: 3px;
	padding:3px;
	text-align: center;
}

.raku-box{
	border: 2px solid orangered;
}
.yahoo-box{
	border: 2px solid dodgerblue;
}
.amazon-box{
	border: 2px solid #00cc99;
}

.img-box {
	background:#ffffee;
	height: 128px;
	width: 128px;
	margin: 2px;
	border: 0;
	float:left;
}


.ranking{font-size:large;color:deeppink;font-weight:bold;}


.osusume{
	display:block;
/*	border: 2px solid orangered;*/
	text-align: center;
	margin-top: 2px;
}


//spanの前に改行を入れる指定

.osu-content span:before {
    content: "\A";
/*    white-space: pre;*/
    white-space: normal;
 }



/*===============================================
● 画面の横幅が480pxまで
===============================================*/

/* 表示領域が480px以下の場合に適用するスタイル */

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

.price{font-size:x-large;color:orangered;}

.raku-box,.amazon-box,.yahoo-box{
	font-size:small;
	background:#ffffee;
	height: 180px;
	width: 100%;
	margin: 2px;
	text-align: left;
}

.raku-box{
	border: 1px solid pink;
}
.yahoo-box{
	border: 1px solid dodgerblue;
}
.amazon-box{
	border: 1px solid #00cc99;
}


.raku-img-box {
	background:#ffffee;
	height: 100px;
	width: 100px;
	margin: 0px;
	margin-top: 1px;
	margin-bottom: 1px;
	border: 0;
}


.osu-img {
	background:#ffffee;
	height: 105px;
	width: 105px;
	margin: 0px;
	margin-top: 2px;
	margin-bottom: 2px;
	border: 0;
	float:left;
}

.osu-content{
	width: 130px;
	margin: 4px;
	float:left;
}

.osusume{text-align:left;
}




}