スマホだけリンクがタップ出来ない

先日とあるサイトをリリースしたのですが、スマホで一部だけタップ出来ない現象が発生しています。
（wordpressで作成したサイト）
特にクリッカブルマップの下記コードです。PCでは問題なくリンク先へ移動しているのですが、
スマホの場合のみ1ヶ所しか動きません。
（/guestrooms/#singleのみ動きます）

どなたか原因と対策についてご教授いただけないでしょうか。

HTML

<div class="container"> <div class="row"> <h3 class="room-name">ホテル外観図</h3> <div class="col-sm-12"> <img src="http://www.kyoto-gardenhotel.co.jp/wp-content/themes/kyotogarden/common/img/others/img_facilities_007.png" usemap="#ImageMap" class="img-responsive" alt="ホテル外観図" /> <map name="ImageMap"> <area shape="rect" coords="30,34,202,63" href="/guestrooms/#dx_twin" alt="" /> <area shape="rect" coords="37,116,152,136" href="/guestrooms/#single" alt="" />　※ココだけ何故かスマホでもタップできる <area shape="rect" coords="38,145,161,167" href="/guestrooms/#semi-double" alt="" /> <area shape="rect" coords="40,212,87,235" href="/facilities/#facility-meeting" alt="" /> <area shape="rect" coords="42,329,149,354" href="/guestrooms/#other_service" alt="" /> <area shape="rect" coords="463,264,641,293" href="/guestrooms/#twin" alt="" /> <area shape="rect" coords="464,321,556,350" href="/guestrooms/#double" alt="" /> <area shape="rect" coords="424,383,625,411" href="/facilities/#facility-chinese" alt="" /> </map> <p>※青文字の箇所をクリックすると詳細をご確認いただけます。</p> </div> </div> </div>