よくある質問

よくある質問と回答集です。サービスご利用時の参考としてご活用ください。

ホームページの表示について
予約ページが表示されない
テンプレートが古い可能性がございます。最新のテンプレートをダウンロードしてください。
すでにデザインをカスタマイズをされており、新しいテンプレートとの入れ替えが難しいお客様は、HTMLとCSS内に以下のソースを追加していただくことで表示が可能となります。

管理画面 > デザイン設定 > デザイン編集」より『 詳細編集はこちら 』をクリックして、デザイン詳細編集画面へお進みください。

【HTML】※『Obi』以外のテンプレート
<!-- BEGIN reservation -->
<!----------------------------------------------
ページ:予約ページ
---------------------------------------------->
<h2 class="page_title">{page_title}</h2>
<div class="reservation_area">

<div class="reservation_others">
{reservation_others}
</div>

<div class="reservation_tel">
<div class="reservation_tel_number">{reservation_header_tel}</div>
{reservation_header_tel_time}
</div>

<!-- BEGIN reservation_list -->
<div class="reservation">
<div class="reservation_title">
{reservation_title}
</div>
<div class="reservation_body">
<div class="reservation_photo">
{reservation_photo_m}
</div>
{reservation_course}
</div>
<br class="clear" />
</div>
<!-- END reservation_list -->

<div class="reservation_tel">
<div class="reservation_tel_number">{reservation_footer_tel}</div>
{reservation_footer_tel_time}
</div>

</div>
<!-- END reservation -->


【HTML】※『Obi』用
<!-- BEGIN reservation -->
<!----------------------------------------------
ページ:予約ページ
---------------------------------------------->
<div class="reservation_area">

<div class="reservation_others">
{reservation_others}
</div>

<div class="reservation_tel">
<div class="reservation_tel_number">{reservation_header_tel}</div>
{reservation_header_tel_time}
</div>

<!-- BEGIN reservation_list -->
<div class="reservation">
<div class="reservation_title">
{reservation_title}
</div>
<div class="reservation_body">
<div class="reservation_photo">
{reservation_photo_m}
</div>
{reservation_course}
</div>
<br class="clear" />
</div>
<!-- END reservation_list -->

<div class="reservation_tel">
<div class="reservation_tel_number">{reservation_footer_tel}</div>
{reservation_footer_tel_time}
</div>

</div>
<!-- END reservation -->


【全ページ共通CSS】※こちらの追加に加え、各テンプレートのCSSの追加が必要となります。
テンプレート『Paper』『Wide』『SalonGold』『SalonSilver』『SalonPink』『SalonBlue』をご利用の方は変更の必要はございません。
※色の指定につきましては、個別に変更する必要がございます。
/* --------------------------------------
予約ページ
--------------------------------------- */
.reservation_area{
margin: 0 0 20px 0;
padding: 15px;
border: 1px solid #cccccc;
}

.reservation_others {
padding:5px;
}

.reservation_tel {
border: 1px solid #DD6669;
padding:10px;
}

.reservation_tel_number {
background: url(/img/menu/tel.gif) no-repeat 0 0;
font-family:Arial Black;
font-size:16px;
font-weight:bold;
padding:0 0 5px 30px;
}

.reservation {
padding:0 0 10px 0;
}

.reservation_title {
float: left;
font-size: 14px;
font-weight: bolder;
line-height: 24px;
padding:10px 0;
}

.reservation_body {
clear: both;
font-size: 12px;
line-height: 18px;
margin: 0;
width: 100%;
}

.reservation_photo img {
padding: 3px;
border: 1px solid #cccccc;
background: #fdfbf7;
margin:0 0 10px 0;
}

.reservation_photo img:hover {
border: 1px solid #cccccc;
background: #f7f4e8;
}


【『Japan』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
#navi ul li a.navi_reservation {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
▼上記を既定の場所に追加します。
/* --------------------------------------
#ナビゲーション
--------------------------------------- */

#navi ul {
margin: 0;
list-style-type: none;
border-top: 1px solid #000000;
}
#navi ul li {
border-bottom: 1px solid #000000;
}

#navi ul li a {
height: 100%;
display: block;
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
font-size: 11px;
text-decoration: none;

background: #ffffff;
}

#navi ul li a.navi_top {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_info {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_calendar {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_menu {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_photo {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_about {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_contact {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
} #navi ul li a.navi_free {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_links {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_coupon {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_melmaga {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_recruit {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_reservation {
background: #ffffff;
background:url(/img/theme_japan/japan_icon.gif) no-repeat center left;
margin:3px 0 3px 15px;
}

#navi ul.sub_navi {
margin: 10px 0;
border-top: none;
}
#navi ul.sub_navi li {
margin: 0 0 10px 0;
border-bottom: none;
}
#navi ul.sub_navi li a {
display: inline-block;
padding: 0 0 0 24px;
font-size: 11px;
background: url(/img/list/nomal.gif) no-repeat 10px 3px;
text-decoration: underline;
}
#navi ul.sub_navi li a:hover {
background: url(/img/list/hover.gif) no-repeat 10px 3px;
}


【『Natural』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
#navi ul li a.navi_reservation {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
▼上記を既定の場所に追加します。
/* --------------------------------------
#ナビゲーション
--------------------------------------- */
#navi ul {
margin: 0;
list-style-type: none;
border-top: 1px solid #dacdb9;
}
#navi ul li {
border-bottom: 1px solid #dacdb9;
}

#navi ul li a {
height: 100%;
display: block;
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
font-size: 11px;
text-decoration: none;
background: #ffffff;
}

#navi ul li a.navi_top {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_info {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_calendar {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_menu {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_photo {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_about {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_contact {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_free {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_links {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_coupon {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_melmaga {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_recruit {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}
#navi ul li a.navi_reservation {
background: #ffffff;
background:url(/img/theme_natural/icon.jpg) no-repeat center left;
margin:3px 0 3px 15px;
}

#navi ul.sub_navi {
margin: 10px 0;
border-top: none;
}
#navi ul.sub_navi li {
margin: 0 0 10px 0;
border-bottom: none;
}
#navi ul.sub_navi li a {
display: inline-block;
padding: 0 0 0 24px;
font-size: 11px;
background: url(/img/list/nomal.gif) no-repeat 10px 3px;
text-decoration: underline;
}
#navi ul.sub_navi li a:hover {
background: url(/img/list/hover.gif) no-repeat 10px 3px;
}

/* フリーページナビゲーション用 */


【『Obi』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
body#reservation #top_navi a.navi_reservation,
▼上記を既定の場所に追加します。
/* --------------------------------------
トップナビゲーション
--------------------------------------- */

#top_navi {
clear: both;
float: right;
margin: 20px 0;
padding: 0;
height: 100%;
}
#top_navi a {
display: block;
background: #444444;
color: #ffffff;
margin: 3px;
padding: 10px 15px;
text-decoration: none;
float: left;
font-size: 11px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
#top_navi a:hover {
background: #333333;
color: #ffffff;
}

body#top #top_navi a.navi_top,
body#info #top_navi a.navi_info,
body#calendar #top_navi a.navi_calendar,
body#menu #top_navi a.navi_menu,
body#photo #top_navi a.navi_photo,
body#coupon #top_navi a.navi_coupon,
body#about #top_navi a.navi_about,
body#melmaga #top_navi a.navi_melmaga,
body#recruit #top_navi a.navi_recruit,
body#reservation #top_navi a.navi_reservation,
body#contact #top_navi a.navi_contact{
background: #333333;
color: #ffffff;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【『Header』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
body#reservation #header_navi ul li a.navi_reservation,
▼上記を既定の場所に追加します。
/* --------------------------------------
ヘッダーナビゲーション
--------------------------------------- */

#header_navi {
background: #e3e2ee;
border-top: 1px solid #100648;
border-bottom: 1px solid #100648;
margin: 0 10px 20px 10px;
height: 100%;
}
#header_navi ul {
list-style-type: none;
}
#header_navi ul li {
float: left;
margin: 2px 0 2px 2px;
font-size: 12px;
}
#header_navi ul li a {
display: block;
margin: 0;
padding: 8px;
text-decoration: none;
background: #e3e2ee;
}
#header_navi ul li a:hover {
background: #abaacb;
}

body#top #header_navi ul li a.navi_top,
body#info #header_navi ul li a.navi_info,
body#calendar #header_navi ul li a.navi_calendar,
body#menu #header_navi ul li a.navi_menu,
body#photo #header_navi ul li a.navi_photo,
body#coupon #header_navi ul li a.navi_coupon,
body#about #header_navi ul li a.navi_about,
body#melmaga #header_navi ul li a.navi_melmaga,
body#recruit #header_navi ul li a.navi_recruit,
body#reservation #header_navi ul li a.navi_reservation,
body#contact #header_navi ul li a.navi_contact {
background: #abaacb;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【『Top』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
body#reservation #top_navi ul li a.navi_reservation,
▼上記を既定の場所に追加します。
/* --------------------------------------
トップナビゲーション
--------------------------------------- */

#top_navi {
background: #fefefe;
border-bottom: 10px solid #cccccc;
margin: 0 0 20px 0;
padding: 40px;
height: 100%;
}
#top_navi ul {
list-style-type: none;
}
#top_navi ul li {
float: left;
margin: 2px;
font-size: 12px;
}
#top_navi ul li a {
display: block;
background: #fefefe;
padding: 10px;
text-decoration: none;
}
#top_navi ul li a:hover {
background: #fafafa;
}

body#top #top_navi ul li a.navi_top,
body#info #top_navi ul li a.navi_info,
body#calendar #top_navi ul li a.navi_calendar,
body#menu #top_navi ul li a.navi_menu,
body#photo #top_navi ul li a.navi_photo,
body#about #top_navi ul li a.navi_about,
body#melmaga #top_navi ul li a.navi_melmaga,
body#recruit #top_navi ul li a.navi_recruit,
body#coupon #top_navi ul li a.navi_coupon,
body#reservation #top_navi ul li a.navi_reservation,
body#contact #top_navi ul li a.navi_contact {
background: #fafafa;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【『Tab』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
body#reservation #tab_navi ul li a.navi_reservation,
▼上記を既定の場所に追加します。
/* --------------------------------------
タブナビゲーション
--------------------------------------- */

#tab_navi {
border-bottom: 2px solid #cccccc;
margin: 10px 0 0 0;
height: 100%;
}
#tab_navi ul {
list-style-type: none;
padding-left: 10px;
}
#tab_navi ul li {
float: left;
margin: 2px 2px -2px 0;
font-size: 12px;
}
#tab_navi ul li a {
display: block;
background: #fefefe;
padding: 10px;
text-decoration: none;
border-top: 2px solid #cccccc;
border-right: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
border-left: 2px solid #cccccc;
}
#tab_navi ul li a:hover {
background: #eeeeee;
}

body#top #tab_navi ul li a.navi_top,
body#info #tab_navi ul li a.navi_info,
body#calendar #tab_navi ul li a.navi_calendar,
body#menu #tab_navi ul li a.navi_menu,
body#photo #tab_navi ul li a.navi_photo,
body#about #tab_navi ul li a.navi_about,
body#melmaga #tab_navi ul li a.navi_melmaga,
body#recruit #tab_navi ul li a.navi_recruit,
body#coupon #tab_navi ul li a.navi_coupon,
body#contact #tab_navi ul li a.navi_contact,
body#reservation #tab_navi ul li a.navi_reservation {
background: #eeeeee;
border-bottom: 2px solid #eeeeee;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【『Tab』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
html>body body#reservation #navi ul li a.navi_reservation,
* html body#reservation #navi ul li a.navi_reservation,
▼上記を既定の場所に追加します。
/* --------------------------------------
ナビゲーション
--------------------------------------- */

#navi ul {
margin: 0;
list-style-type: none;
}

#navi ul li {
}

html>body #navi ul li a {
height: 100%;
display: block;
margin: 1px 0;
padding: 10px;
font-size: 11px;
text-decoration: none;
background: url(/img/bg/white_alpha_30.png);
}
* html #navi ul li a {
height: 100%;
display: block;
margin: 1px 0;
padding: 10px;
font-size: 11px;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg/white_alpha_30.png',sizingMethod=scale);
}

html>body #navi ul li a:hover {
background: url(/img/bg/white_alpha_20.png);
}
* html #navi ul li a:hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg/white_alpha_20.png',sizingMethod=scale);
}

html>body body#top #navi ul li a.navi_top,
html>body body#info #navi ul li a.navi_info,
html>body body#calendar #navi ul li a.navi_calendar,
html>body body#menu #navi ul li a.navi_menu,
html>body body#photo #navi ul li a.navi_photo,
html>body body#about #navi ul li a.navi_about,
html>body body#contact #navi ul li a.navi_contact,
html>body body#melmaga #navi ul li a.navi_melmaga,
html>body body#recruit #navi ul li a.navi_recruit,
html>body body#coupon #navi ul li a.navi_coupon,
html>body body#reservation #navi ul li a.navi_reservation,
html>body body#free #navi ul li a.navi_free {
background: url(/img/bg/white_alpha_10.png);
}
* html body#top #navi ul li a.navi_top,
* html body#info #navi ul li a.navi_info,
* html body#calendar #navi ul li a.navi_calendar,
* html body#menu #navi ul li a.navi_menu,
* html body#photo #navi ul li a.navi_photo,
* html body#about #navi ul li a.navi_about,
* html body#contact #navi ul li a.navi_contact,
* html body#melmaga #navi ul li a.navi_melmaga,
* html body#recruit #navi ul li a.navi_recruit,
* html body#coupon #navi ul li a.navi_coupon,
* html body#reservation #navi ul li a.navi_reservation,
* html body#free #navi ul li a.navi_free {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg/white_alpha_10.png',sizingMethod=scale);
}


#navi ul.sub_navi {
margin: 10px 0;
border-top: none;
}
#navi ul.sub_navi li {
margin: 0 0 10px 0;
border-bottom: none;
}
#navi ul.sub_navi li a {
display: inline-block;
padding: 0 0 0 24px;
font-size: 11px;
background: url(/img/list/nomal.gif) no-repeat 10px 3px;
text-decoration: underline;
}
#navi ul.sub_navi li a:hover {
background: url(/img/list/hover.gif) no-repeat 10px 3px;
}


【『Gradation』『corner』『Default』『Plain』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
body#reservation #main h2.page_title {
background: url({menuicon_reservation_png}) no-repeat;
}
* html body#reservation #main h2.page_title {
background: url({menuicon_reservation_gif}) no-repeat;
}
#navi ul li a.navi_reservation{
background: #cc0000 url({menuicon_reservation_png}) no-repeat 3px 3px;
}
body#reservation #navi ul li a.navi_reservation{
background: #feb2a7 url({menuicon_reservation_png}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_reservation{
background: #cc0000 url({menuicon_reservation_gif}) no-repeat 3px 3px;
}
* html body#reservation #navi ul li a.navi_reservation{
background: #feb2a7 url({menuicon_reservation_gif}) no-repeat 3px 3px;
color: #ffffff;
}
▼上記を既定の場所に追加します。※色の指定につきましては、個別に変更する必要がございます。
/* --------------------------------------
メイン
--------------------------------------- */

#main h2.page_title {
font: 20px 'Georgia';
margin: 0 0 20px 0;
padding: 0 0 5px 30px;
border-bottom: 1px solid #ffcccc;
color: #ffffff;
}
body#info #main h2.page_title {
background: url({menuicon_info_png}) no-repeat;
}
body#calendar #main h2.page_title {
background: url({menuicon_calendar_png}) no-repeat;
}
body#menu #main h2.page_title {
background: url({menuicon_menu_png}) no-repeat;
}
body#photo #main h2.page_title {
background: url({menuicon_photo_png}) no-repeat;
}
body#coupon #main h2.page_title {
background: url({menuicon_coupon_png}) no-repeat;
}
body#about #main h2.page_title {
background: url({menuicon_about_png}) no-repeat;
}
body#contact #main h2.page_title {
background: url({menuicon_contact_png}) no-repeat;
}
body#recruit #main h2.page_title {
background: url({menuicon_recruit_png}) no-repeat;
}
body#reservation #main h2.page_title {
background: url({menuicon_reservation_png}) no-repeat;
}
body#free #main h2.page_title {
background: url({menuicon_free_png}) no-repeat;
}
body#top #main h2.page_title {
padding-left: 5px;
}

* html body#info #main h2.page_title {
background: url({menuicon_info_gif}) no-repeat;
}
* html body#calendar #main h2.page_title {
background: url({menuicon_calendar_gif}) no-repeat;
}
* html body#menu #main h2.page_title {
background: url({menuicon_menu_gif}) no-repeat;
}
* html body#photo #main h2.page_title {
background: url({menuicon_photo_gif}) no-repeat;
}
* html body#coupon #main h2.page_title {
background: url({menuicon_coupon_gif}) no-repeat;
}
* html body#about #main h2.page_title {
background: url({menuicon_about_gif}) no-repeat;
}
* html body#contact #main h2.page_title {
background: url({menuicon_contact_gif}) no-repeat;
}
* html body#recruit #main h2.page_title {
background: url({menuicon_recruit_gif}) no-repeat;
}
* html body#reservation #main h2.page_title {
background: url({menuicon_reservation_gif}) no-repeat;
}
* html body#free #main h2.page_title {
background: url({menuicon_free_gif}) no-repeat;
}


/* --------------------------------------
ナビゲーション
--------------------------------------- */

#navi ul {
margin: 0;
list-style-type: none;
border-top: 1px solid #ffcccc;
}
#navi ul li {
border-bottom: 1px solid #ffcccc;
}

#navi ul li a {
height: 100%;
display: block;
margin: 0 0 0 0;
padding: 10px 10px 10px 30px;
font-size: 11px;
text-decoration: none;
background: #cc0000;
}

#navi ul li a.navi_top {
background: #cc0000 url({menuicon_home_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_info {
background: #cc0000 url({menuicon_info_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_calendar {
background: #cc0000 url({menuicon_calendar_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_menu {
background: #cc0000 url({menuicon_menu_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_photo {
background: #cc0000 url({menuicon_photo_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_coupon {
background: #cc0000 url({menuicon_coupon_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_about {
background: #cc0000 url({menuicon_about_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_contact {
background: #cc0000 url({menuicon_contact_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_free {
background: #cc0000 url({menuicon_free_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_links {
background: #cc0000 url({menuicon_link_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_melmaga {
background: #cc0000 url({menuicon_mailmagazine_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_recruit {
background: #cc0000 url({menuicon_recruit_png}) no-repeat 3px 3px;
}
#navi ul li a.navi_reservation{
background: #cc0000 url({menuicon_reservation_png}) no-repeat 3px 3px;
}

#navi ul li a:hover {
background-color: #fce5e1;
}

body#top #navi ul li a.navi_top {
background: #feb2a7 url({menuicon_home_png}) no-repeat 3px 3px;
}
body#info #navi ul li a.navi_info {
background: #feb2a7 url({menuicon_info_png}) no-repeat 3px 3px;
}
body#calendar #navi ul li a.navi_calendar {
background: #feb2a7 url({menuicon_calendar_png}) no-repeat 3px 3px;
}
body#menu #navi ul li a.navi_menu {
background: #feb2a7 url({menuicon_menu_png}) no-repeat 3px 3px;
}
body#photo #navi ul li a.navi_photo {
background: #feb2a7 url({menuicon_photo_png}) no-repeat 3px 3px;
}
body#coupon #navi ul li a.navi_coupon {
background: #feb2a7 url({menuicon_coupon_png}) no-repeat 3px 3px;
}
body#about #navi ul li a.navi_about {
background: #feb2a7 url({menuicon_about_png}) no-repeat 3px 3px;
}
body#contact #navi ul li a.navi_contact {
background: #feb2a7 url({menuicon_contact_png}) no-repeat 3px 3px;
}
body#free #navi ul li a.navi_free {
background: #feb2a7 url({menuicon_free_png}) no-repeat 3px 3px;
}
body#melmaga #navi ul li a.navi_melmaga {
background: #feb2a7 url({menuicon_mailmagazine_png}) no-repeat 3px 3px;
}
body#recruit #navi ul li a.navi_recruit {
background: #feb2a7 url({menuicon_recruit_png}) no-repeat 3px 3px;
}
body#reservation #navi ul li a.navi_reservation{
background: #feb2a7 url({menuicon_reservation_png}) no-repeat 3px 3px;
}

/* For IE6 */
* html #navi ul li a.navi_top {
background: #cc0000 url({menuicon_home_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_info {
background: #cc0000 url({menuicon_info_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_calendar {
background: #cc0000 url({menuicon_calendar_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_menu {
background: #cc0000 url({menuicon_menu_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_photo {
background: #cc0000 url({menuicon_photo_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_coupon {
background: #cc0000 url({menuicon_coupon_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_about {
background: #cc0000 url({menuicon_about_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_contact {
background: #cc0000 url({menuicon_contact_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_free {
background: #cc0000 url({menuicon_free_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_links {
background: #cc0000 url({menuicon_link_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_melmaga {
background: #cc0000 url({menuicon_mailmagazine_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_recruit {
background: #cc0000 url({menuicon_recruit_gif}) no-repeat 3px 3px;
}
* html #navi ul li a.navi_reservation{
background: #cc0000 url({menuicon_reservation_gif}) no-repeat 3px 3px;
}

* html #navi ul li a:hover {
background-color: #fce5e1;
}

* html body#top #navi ul li a.navi_top {
background: #feb2a7 url({menuicon_home_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#info #navi ul li a.navi_info {
background: #feb2a7 url({menuicon_info_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#calendar #navi ul li a.navi_calendar {
background: #feb2a7 url({menuicon_calendar_gif}) no-repeat 3px 3px;
color: #ffffff; }
* html body#menu #navi ul li a.navi_menu {
background: #feb2a7 url({menuicon_menu_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#photo #navi ul li a.navi_photo {
background: #feb2a7 url({menuicon_photo_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#coupon #navi ul li a.navi_coupon {
background: #feb2a7 url({menuicon_coupon_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#about #navi ul li a.navi_about {
background: #feb2a7 url({menuicon_about_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#contact #navi ul li a.navi_contact {
background: #feb2a7 url({menuicon_contact_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#free #navi ul li a.navi_free {
background: #feb2a7 url({menuicon_free_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#melmaga #navi ul li a.navi_melmaga {
background: #feb2a7 url({menuicon_mailmagazine_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#recruit #navi ul li a.navi_recruit {
background: #feb2a7 url({menuicon_recruit_gif}) no-repeat 3px 3px;
color: #ffffff;
}
* html body#reservation #navi ul li a.navi_reservation{
background: #feb2a7 url({menuicon_reservation_gif}) no-repeat 3px 3px;
color: #ffffff;
}


#navi ul.sub_navi {
margin: 10px 0;
border-top: none;
}
#navi ul.sub_navi li {
margin: 0 0 10px 0;
border-bottom: none;
}
#navi ul.sub_navi li a {
display: inline-block;
padding: 0 0 0 24px;
font-size: 11px;
background: url(/img/list/nomal.gif) no-repeat 10px 3px;
text-decoration: underline;
}
#navi ul.sub_navi li a:hover {
background: url(/img/list/hover.gif) no-repeat 10px 3px;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【『Background』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
body#reservation #navi ul li a.navi_reservation,
▼上記を既定の場所に追加します。※色の指定につきましては、個別に変更する必要がございます。
/* --------------------------------------
ナビゲーション
--------------------------------------- */

#navi ul {
margin: 0;
list-style-type: none;
border-top: 1px solid #333333;
}
#navi ul li {
border-bottom: 1px solid #333333;
}

html>body #navi ul li a {
height: 100%;
display: block;
margin: 1px 0;
padding: 10px;
font-size: 11px;
text-decoration: none;
background: url(/img/bg/black_alpha_50.png);
}
* html #navi ul li a {
height: 100%;
display: block;
margin: 1px 0;
padding: 10px;
font-size: 11px;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg/black_alpha_50.png',sizingMethod=scale);
}

html>body #navi ul li a:hover {
background: url(/img/bg/black_alpha_20.png);
}
* html #navi ul li a:hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg/black_alpha_20.png',sizingMethod=scale);
}

body#top #navi ul li a.navi_top,
body#info #navi ul li a.navi_info,
body#calendar #navi ul li a.navi_calendar,
body#menu #navi ul li a.navi_menu,
body#photo #navi ul li a.navi_photo,
body#about #navi ul li a.navi_about,
body#melmaga #navi ul li a.navi_melmaga,
body#recruit #navi ul li a.navi_recruit,
body#coupon #navi ul li a.navi_coupon,
body#contact #navi ul li a.navi_contact,
body#reservation #navi ul li a.navi_reservation,
body#free #navi ul li a.navi_free {
background: none;
}

#navi ul.sub_navi {
margin: 10px 0;
border-top: none;
}
#navi ul.sub_navi li {
margin: 0 0 10px 0;
border-bottom: none;
}
#navi ul.sub_navi li a {
display: inline-block;
padding: 0 0 0 24px;
font-size: 11px;
background: url(/img/list/nomal.gif) no-repeat 10px 3px;
text-decoration: underline;
}
#navi ul.sub_navi li a:hover {
background: url(/img/list/hover.gif) no-repeat 10px 3px;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【『Simple』用CSSサンプル】※先に上記の【全ページ共通CSS】の追加を行なってください。
#navi ul li a.navi_reservation {
background: #ffffff;
}
body#reservation #navi ul li a.navi_reservation {
background: #f5f5f5;
}
▼上記を既定の場所に追加します。※色の指定につきましては、個別に変更する必要がございます。
/* --------------------------------------
ナビゲーション
--------------------------------------- */

#navi ul {
margin: 0;
list-style-type: none;
border-top: 1px solid #eeeeee;
}
#navi ul li {
border-bottom: 1px solid #eeeeee;
}

#navi ul li a {
height: 100%;
display: block;
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
font-size: 11px;
text-decoration: none;
background: #ffffff;
}

#navi ul li a.navi_top {
background: #ffffff;
}
#navi ul li a.navi_info {
background: #ffffff;
}
#navi ul li a.navi_calendar {
background: #ffffff;
}
#navi ul li a.navi_menu {
background: #ffffff;
}
#navi ul li a.navi_photo {
background: #ffffff;
}
#navi ul li a.navi_about {
background: #ffffff;
}
#navi ul li a.navi_contact {
background: #ffffff;
}
#navi ul li a.navi_free {
background: #ffffff;
}
#navi ul li a.navi_link {
background: #ffffff;
}
#navi ul li a.navi_melmaga {
background: #ffffff;
}
#navi ul li a.navi_recruit {
background: #ffffff;
}
#navi ul li a.navi_coupon {
background: #ffffff;
}
#navi ul li a.navi_reservation {
background: #ffffff;
}
#navi ul li a:hover {
background-color: #eeeeee;
}

body#top #navi ul li a.navi_top {
background: #f5f5f5;

}
body#info #navi ul li a.navi_info {
background: #f5f5f5;
}
body#calendar #navi ul li a.navi_calendar {
background: #f5f5f5;
}
body#menu #navi ul li a.navi_menu {
background: #f5f5f5;
}
body#photo #navi ul li a.navi_photo {
background: #f5f5f5;
}
body#about #navi ul li a.navi_about {
background: #f5f5f5;
}
body#contact #navi ul li a.navi_contact {
background: #f5f5f5;
}
body#free #navi ul li a.navi_free {
background: #f5f5f5;
}
body#melmaga #navi ul li a.navi_melmaga {
background: #f5f5f5;
}
body#recruit #navi ul li a.navi_recruit {
background: #f5f5f5;
}
body#coupon #navi ul li a.navi_coupon {
background: #f5f5f5;
}
body#reservation #navi ul li a.navi_reservation {
background: #f5f5f5;
}
#navi ul.sub_navi {
margin: 10px 0;
border-top: none;
}
#navi ul.sub_navi li {
margin: 0 0 10px 0;
border-bottom: none;
}
#navi ul.sub_navi li a {
display: inline-block;
padding: 0 0 0 24px;
font-size: 11px;
background: url(/img/list/nomal.gif) no-repeat 10px 3px;
text-decoration: underline;
}
#navi ul.sub_navi li a:hover {
background: url(/img/list/hover.gif) no-repeat 10px 3px;
}

/* フリーページナビゲーション用 */
{free_navi_link}


【モバイル用 HTML】
<!-- BEGIN reservation -->
<!----------------------------------------------

ページ:予約ページ

---------------------------------------------->
<div style="{title_style}" align="center">{page_title} /div>

<div style="margin-bottom: 20px;">
<a href="tel:{reservation_header_tel}">{reservation_header_tel} /a> br>
{reservation_header_tel_time}
</div>

<div style="margin-bottom: 20px;">
{reservation_others}
</div>

<!-- BEGIN reservation_list -->
<div>
■{reservation_title}<br>
{reservation_photo_url_m}<br>
{reservation_course}<br>
</div>
<hr style="{hr_style}">
<!-- END reservation_list -->

<div style="margin-bottom: 20px;">
<a href="tel:{reservation_footer_tel}">{reservation_footer_tel}</a><br>
{reservation_footer_tel_time}
</div>

</div>
<!-- END reservation -->