@charset "Shift_JIS";

/*
	================================================================================================
		common.css
	================================================================================================
*/


/*  ---リモコン---  */
#contents .remote_area {
	position: relative;
	margin:10px 0 15px 6px;
	display: inline-block;
}
#contents .remote_area span.remote_img {
    float: left;
    overflow: hidden;
    position: relative;
}
#contents .remote_area span.remote_img img {
    position: absolute;
}
#contents .remote_area span.remote_frame,
#contents .remote_area span.remote_frame2 {
    display: table;
    position: absolute;
}

/*  ---★リモコンの個別サイズはここから★---  */

/*  ---■ frame01 ■---  */
#contents .remote_area.frame01 span.remote_img {
    width: 275px;
    height: 215px;
}
#contents .remote_area.frame01 span.remote_img img {
    top: -444px;
}
#contents .remote_area.frame01 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
    width: 59px;
    height: 31px;
    top: 91px;
    left: 106px;
}

/*  ---■ frame02 電源ボタン ■---  */
#contents .remote_area.frame02 span.remote_img {
    width: 275px;
    height: 188px;
}
#contents .remote_area.frame02 span.remote_img img {
    top: 0px;
}
#contents .remote_area.frame02 span.remote_frame {
    border: 4px solid #fff400;
    border-radius: 33px;
    width: 59px;
    height: 56px;
    top: 31px;
    left: 177px;
}

/*  ---■ frame03 テレビボタン　■---  */
#contents .remote_area.frame03 span.remote_img {
    width: 275px;
    height: 264px;
}
#contents .remote_area.frame03 span.remote_img img {
    top: -394px;
}
#contents .remote_area.frame03 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
    width: 92px;
    height: 41px;
    top: 94px;
    left: 7px;
    transform: rotate( -64deg );
-moz-transform:    rotate( -64deg );  /* Firefox用 */
-webkit-transform: rotate( -64deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -64deg );  /* 古いOpera用 */
-ms-transform:     rotate( -64deg );  /* IE9用 */

}
#contents .remote_area.frame03 span.remote_frame2 {
/*    border: 4px solid #fff400;*/
    border: 4px solid red;
    border-radius: 10px;
	width: 47px;
    height: 41px;
    top: -2px;
    left: 189px;
}
/*  ---■ frame04 地上デジタルボタン、BS/CSボタン、スカパー！プレミアムボタン ■---  */

#contents .remote_area.frame04 span.remote_img {
    width: 275px;
    height: 188px;
}
#contents .remote_area.frame04 span.remote_img img {
    top: 0px;
}
#contents .remote_area.frame04 span.remote_frame {
	border: 4px solid #fff400;
    border-radius: 10px;
    width: 154px;
    height: 56px;
    top: 82px;
    left: 32px;
}
/*  ---■ frame05 録画ボタン ■---  */
#contents .remote_area.frame05 span.remote_img {
    width: 275px;
    height: 398px;
}
#contents .remote_area.frame05 span.remote_img img {
    top: -675px;
}
#contents .remote_area.frame05 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 33px;
    width: 59px;
    height: 56px;
    top: 211px;
    left: 82px;
    transform: rotate( -64deg );
-moz-transform:    rotate( -64deg );  /* Firefox用 */
-webkit-transform: rotate( -64deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -64deg );  /* 古いOpera用 */
-ms-transform:     rotate( -64deg );  /* IE9用 */

}
/*  ---■ frame06 停止ボタン ■---  */
#contents .remote_area.frame06 span.remote_img {
    width: 275px;
    height: 398px;
}
#contents .remote_area.frame06 span.remote_img img {
    top: -675px;
}
#contents .remote_area.frame06 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 33px;
    width: 59px;
    height: 56px;
    top: 211px;
    left: 134px;
    transform: rotate( -64deg );
-moz-transform:    rotate( -64deg );  /* Firefox用 */
-webkit-transform: rotate( -64deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -64deg );  /* 古いOpera用 */
-ms-transform:     rotate( -64deg );  /* IE9用 */

}
/*  ---■ frame07 視聴中メニューボタン ■---  */
#contents .remote_area.frame07 span.remote_img {
    width: 275px;
    height: 335px;
}
#contents .remote_area.frame07 span.remote_img img {
    top: -395px;
}
#contents .remote_area.frame07 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
    width: 125px;
    height: 31px;
    top: 47px;
    left: 71px;
}
/*  ---■ frame08 番組チェック ■---  */
#contents .remote_area.frame08 span.remote_img {
    width: 275px;
    height: 335px;
}
#contents .remote_area.frame08 span.remote_img img {
    top: -395px;
}
#contents .remote_area.frame08 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
    width: 125px;
    height: 31px;
    top: 231px;
    left: 71px;
}
/*  ---■ frame09 ホームボタン ■---  */
#contents .remote_area.frame09 span.remote_img {
    width: 275px;
    height: 335px;
}
#contents .remote_area.frame09 span.remote_img img {
    top: -395px;
}
#contents .remote_area.frame09 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
	width: 100px;
    height: 31px;
    top: 180px;
    left: 171px;
	transform: rotate( -62deg );
-moz-transform:    rotate( -62deg );  /* Firefox用 */
-webkit-transform: rotate( -62deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -62deg );  /* 古いOpera用 */
-ms-transform:     rotate( -62deg );  /* IE9用 */
}
/*  ---■ frame10 ビデオ操作全ボタン ■---  */
#contents .remote_area.frame10 span.remote_img {
    width: 275px;
    height: 320px;
}
#contents .remote_area.frame10 span.remote_img img {
    top: -736px;
}
#contents .remote_area.frame10 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
	width: 228px;
    height: 155px;
    top: 52px;
    left: 20px;
}
/*  ---■ frame11 番組表ボタン ■---  */
#contents .remote_area.frame11 span.remote_img {
    width: 275px;
    height: 335px;
}
#contents .remote_area.frame11 span.remote_img img {
    top: -395px;
}
#contents .remote_area.frame11 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
	border-radius: 10px;
	width: 45px;
    height: 85px;
    top: 71px;
    left: 197px;
	transform: rotate( -27deg );
-moz-transform:    rotate( -27deg );  /* Firefox用 */
-webkit-transform: rotate( -27deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -27deg );  /* 古いOpera用 */
-ms-transform:     rotate( -27deg );  /* IE9用 */
}

/*  ---■ frame12 入力切替　■---  */
#contents .remote_area.frame12 span.remote_img {
    width: 275px;
    height: 188px;
}
#contents .remote_area.frame12 span.remote_img img {
    top: 0px;
}
#contents .remote_area.frame12 span.remote_frame {
    border: 4px solid #fff400;
    border-radius: 33px;
    width: 59px;
    height: 56px;
    top: 31px;
    left: 34px;
}

/*  ---■ frame13 音声検索機能 ■---  */
#contents .remote_area.frame13 span.remote_img {
    width: 275px;
    height: 188px;
}
#contents .remote_area.frame13 span.remote_img img {
    top: 0px;
}
#contents .remote_area.frame13 span.remote_frame {
    border: 4px solid #fff400;
    border-radius: 33px;
    width: 59px;
    height: 56px;
    top: 31px;
    left: 105px;
}
/*  ---■ frame14 上部ランプ ■---  */
#contents .remote_area.frame14 span.remote_img {
    width: 275px;
    height: 188px;
}
#contents .remote_area.frame14 span.remote_img img {
    top: 0px;
}
#contents .remote_area.frame14 span.remote_frame {
    border: 4px solid #fff400;
    border-radius: 33px;
	width: 18px;
    height: 18px;
    top: 13px;
    left: 126px;
}

/*  ---■ frame15 上部ランプの光彩 ■---  */
#contents .remote_area.frame15 span.remote_img {
    width: 275px;
    height: 188px;
}
#contents .remote_area.frame15 span.remote_img img {
    top: 0px;
}
#contents .remote_area.frame15 span.remote_frame {
    border-radius: 33px;
	width: 8px;
	height: 8px;
	top: 23px;
	left: 135px;
	background: #ffad64;
	opacity: 0.7;
}
#contents .remote_area.frame15 span.remote_frame2 {
    border: 4px solid #fff400;
    border-radius: 33px;
	width: 22px;
    height: 22px;
    top: 12px;
    left: 124px;
}

/*  ---■ frame16 戻るボタン ■---  */
#contents .remote_area.frame16 span.remote_img {
    width: 275px;
    height: 335px;
}
#contents .remote_area.frame16 span.remote_img img {
    top: -395px;
}
#contents .remote_area.frame16 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
	border-radius: 10px;
	width: 45px;
    height: 85px;
    top: 153px;
    left: 28px;
	transform: rotate( -27deg );
-moz-transform:    rotate( -27deg );  /* Firefox用 */
-webkit-transform: rotate( -27deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -27deg );  /* 古いOpera用 */
-ms-transform:     rotate( -27deg );  /* IE9用 */
}
/*  ---■ frame17 ビデオ操作全ボタン ■---  */
#contents .remote_area.frame17 span.remote_img {
    width: 275px;
    height: 320px;
}
#contents .remote_area.frame17 span.remote_img img {
    top: -736px;
}
#contents .remote_area.frame17 span.remote_frame {
    border: 4px solid #fff400;
/*    border: 4px solid red;*/
    border-radius: 10px;
	width: 156px;
    height: 94px;
    top: 52px;
    left: 87px;
}
/*  ---//★リモコンの個別サイズはここまで★//---  */



/*
----------------------------------------------------------------------------
	画面幅＜640px＞以下のときに適用
----------------------------------------------------------------------------
*/
@media screen and (max-width: 640px) {


/*  ---リモコン---  */
#contents img.ml30,
#contents .remote_area {
	margin-left: 0px !important;
}


}