スマホフローティングヘッダー　日本語が文字化け　CSS

Question

スマホの商品ページ・カテゴリページでフローティングメニューを設定しておりますが、
メニュー部分を日本語にすると自身のアイフォンで文字化けして出てきてしまい日本語設定にできません。

(下のHTMLでいうとこの部分です。
ジャージ
)

CSS・HTMLを記載します。お忙しいところ恐縮ですが、
文字化けの原因・解決方法をご教授をお願い致します。

--------------------------------ヘッダーHTML部分--------------------------------










        
        
        


        
        

        ジャージ
        BAG etc...
        STAN SMITH
        FERRARI
        







--------------------------------sp_head　CSS部分--------------------------------

@charset "UTF-8";


html{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size-adjust: 100%;font-size-adjust: 100%;}

	

a:hover img{
	border: none;
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition-duration:0.5s;
}
a img{
	border: none;
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition-duration:0.5s;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

img { vertical-align:bottom; }

.onmouse{
		background-color: #333333;
		cursor: pointer;
	}
	
body, div, ul {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	transition-property:width, height, left, top, bottom, right, margin, padding, font-size, margin-top, img;
	transition-duration:0.5s;
}

html{	color: #666;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.item{
	margin-bottom:15px;
	float:left;
}

/* =Clearfix
-------------------------------------------------------------- */

.clear {
	clear: both;
}

/*float clear*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac \*/
*html .clearfix {
    height: 1%;
}
.clearfix {
    display:block;
}

.clearfix:before, .clearfix:after {
	display: table;
}

.clearfix {
 *zoom: 1;
}
/* 
-------------------------------------------------------------- */


body {
	color: #555;
	font-size: 14px;
	line-height: 1.5em;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	margin:0;
	padding:0;
}


.topix {
	width: 994px;
	height:auto;
	margin:0;
	margin-left:15px;
	padding-bottom:50px;
	margin-bottom:50px;
	float:left;
	text-height:auto;
	line-height:0;
	
}




.header{
	width:100%;
	margin:0;
	padding:0;
	height:50px;
	background-color:#000000;
	margin-bottom:1px;
	 opacity:1.0;
}

.header02{
	width:100%;
	margin:0;
	padding:0;
	height:auto;
}

.header02 a {
	text-decoration:none;
}



.tencho{
	width:280px;
	position:fixed;
	right:5px;
	top:88px;
	margin:0;
	padding:0;
	height:auto;

}

.hd01{width:95.6%; min-width:180px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; }
.hd02{width:2.2%; min-width:28px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; padding-right:5px;}
.hd03{width:2.2%; min-width:28px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; padding-right:5px;}

.hd01-in{width:180px; height:28px; padding: 0px;}
.hd02-in{width:28px; height:28px; padding: 0px;}
.hd03-in{width:28px; height:28px; padding: 0px;}


.hd06,
.hd07,
.hd08,
.hd09{ float: left; width: 25%; box-sizing: border-box;}

.hd06-in,
.hd07-in,
.hd08-in,
.hd09-in{margin-left:1px; padding: 8px;  background-color:#000000; text-align:center; color:#fff; opacity:1.0; font-size:14px;}



よろしくお願いいたします。

Answer

ECマスターズの田中です。

HTMLに、文字コードの指定が含まれておりませんので、
日本語で保存する際に使用した文字コードを、
タグの直後にて、を挿入して
文字コードの指定を行ってください。
http://honttoni.blog74.fc2.com/blog-entry-125.html

Answer

ありがとうございました。

CSSの問題かと勘違いしていました。
HTMLを変更しました。
UTF-8は文字化けしたままでしたがShift_JISにすると文字化けが解消されました。

助かりました。ありがとうございました！

スマホフローティングヘッダー 日本語が文字化け CSS

スマホフローティングヘッダー　日本語が文字化け　CSS