jQueryMobileのCSSを改造 (完成)
京都の高砂太夫さんとこが、
http://takasagotayuu.web.fc2.com/ (スマホで見るとスマホサイトになります)
５月の１２日(月曜日)に有名な常照寺さんで、お茶会をすることになりました。
はよ、ホームページに載せといてー と催促電話があり、あわてて作業しました。
黒魔術的なスタイルシートの連打。。。
昨年末、ロシアから興業の声がかかり
高砂太夫さんと菊川太夫さんは１０日間ぐらいモスクワに行きました。
今年の年末の興業の約束もしてきたそうです。民間日露外交どす。
このホームページは世界中から見られているわけです。
ぷーちん も見てるかもしれまへん。
女(おなご)は顔がきれいやったら、言葉の壁を越えて愛されるんどすえ。
・・・・・ワタシが勝手に呟きました。すまそ。
高砂太夫さんと菊川太夫さんは心が清水のように綺麗なんで騙されないか心配です。。。
さて、今回、フルカスタマイズしました。
Android 実機で確認は重要。センターに寄せてるはずがズレてたりして複雑です。
spindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
if(navigator.userAgent.indexOf("Android")
== -1 && navigator.userAgent.indexOf("iPhone")
== -1 && navigator.userAgent.indexOf("iPod")
== -1){
window.location.href="index.html";
}
</script>
<title>京都・島原・高砂太夫</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta name="format-detection" content="telephone=no,email=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="z">
<div data-role="header" data-theme="z">
<h1>京都・島原・高砂太夫</h1>
<div class="top"><img src="./spimages/header-background-top.jpg"></div>
</div>
<div data-role="content" data-theme="z">
<ul data-role="listview" data-theme="z" >
<li class="ui-li-top"><a href="#page2">催事のご案内</a></li>
<li class="ui-li-top"><a href="#page3">高砂太夫</a></li>
<li class="ui-li-top"><a href="#page4">菊川太夫</a></li>
<li class="ui-li-top"><a href="#page5">嶋原界隈</a></li>
<li class="ui-li-top"><a href="#game">お茶屋遊び</a></li>
</ul>
</div>
<div data-role="footer" >
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page2" data-theme="z">
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>催事のご案内</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page3" >高砂太夫</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<ul data-role="listview" data-inset="true" >
<li><h2><a href="#page6">常照寺さんでお茶会</a></h2>
<p>平成二十六年五月十二日</p>
</li>
<li>
<h2><a href="#page7">嶋原の太夫道中</a></h2>
<p>随時</p>
</li>
<li><h2>
<a href="#page8">嶋原のお餅つき</a></h2>
<p>江戸時代から<br>師走12月の恒例行事です</p>
</li>
</ul>
<h3>詳しくは、お問い合わせください <br>
当日は普段着でおこしやす</h3>
</div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page3" data-theme="z" >
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>高砂太夫</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic1_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic2_R.jpg"></div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic3_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic4_R.jpg" ></div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic5_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic6_R.jpg"></div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic7_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic8_R.jpg" ></div>
</div>
</div>
</div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page4" data-theme="z">
<div data-role="header" data-theme="z">
<h1>菊川太夫</h1>
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事案内</a></li>
<li><a href="#page3" >高砂太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic110_R.jpg"></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic111_R.jpg" ></div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic102_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic103_R.jpg" ></div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic104_R.jpg"></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic105_R.jpg"></div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic106_R.jpg"></div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<img src="spimages/pic107_R.jpg"></div>
</div>
</div>
</div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page5" data-theme="z">
<script type="text/javascript">
// 地図ページ
$('#page5').bind('pageshow', function(){
var TITLE = '嶋原',
LAT = 34.992685,
LNG = 135.743251,
MAP_ID = 'map';
//地図作成
var infowindow = new google.maps.InfoWindow(),
latLng = new google.maps.LatLng(LAT, LNG),
map = new google.maps.Map(document.getElementById(MAP_ID), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
marker = new google.maps.Marker({
title: TITLE,
position: latLng,
map: map
});
//地図表示
map.setCenter(latLng);
infowindow.open(map);
});
</script>
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>嶋原界隈</h1>
</div>
<div data-role="navbar" >
<ul>
<li><a href="#page2">催事案内</a></li>
<li><a href="#page3" >高砂太夫</a></li>
<li><a href="#page4" >菊川太夫</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<div id="map"></div><div data-role="collapsible-set">
<div data-role="collapsible" >
<h3>出口の柳</h3>
<p>入口にあるのに出口といいます</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/201_R.jpg"></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/202_R.jpg"></div>
</div></div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>角 屋</h3>
<p>江戸時代の揚屋さんでした</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/204_R.jpg" /></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/206_R.jpg"></div>
</div></div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>輪違屋</h3>
<p>いまも営業されています</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/211_R.jpg" ></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/209_R.jpg"></div>
</div></div>
</div><div data-role="collapsible">
<h3>壬 生</h3>
<p>新撰組の屯所がありました</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/213_R.jpg"><br />壬生寺</div>
</div>
<div class="ui-block-b">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="spimages/214_R.jpg"><br />前川邸</div>
</div></div>
</div>
</div>
</div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page6" data-theme="z">
<script type="text/javascript">
// 地図ページ
$('#page6').bind('pageshow', function(){
var TITLE = '常照寺',
LAT = 35.055087,
LNG = 135.732329,
MAP_ID = 'mmap';
//地図作成
var infowindow = new google.maps.InfoWindow(),
latLng = new google.maps.LatLng(LAT, LNG),
map = new google.maps.Map(document.getElementById(MAP_ID), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
marker = new google.maps.Marker({
title: TITLE,
position: latLng,
map: map
});
//地図表示
map.setCenter(latLng);
infowindow.open(mmap);
});
</script>
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>常照寺さんでお茶会</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<div class="ui-grid-a">
<div class="ui-block-a">
<div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c">
<img src="./spimages/tea_R.jpg" ><p>菊川太夫</p></div>
</div>
<div class="ui-block-b">
<div style="text-align:center;vertical-align:middle;" >
<h2>26年5月12日(月)</h2>
<h3>午前11時30分から<br/>午後３時の間<br/>
茶・点心・拝観料で<br/>
会費は３千円です<br/>
予約はいりまへん<br/>観光客さん歓迎</h3>
</div>
</div>
</div>
<h3>常照寺 京都市北区鷹峰北鷹峰町１</h3>
<div id="mmap"></div>
</div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page7" data-theme="z">
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>嶋原太夫道中</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<img src="./spimages/kushugiku_R.jpg" width="480" height="360">
<h2>太夫道中は随時、承ります</h2></div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="page8" data-theme="z">
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>嶋原のお餅つき</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z">
<img src="./spimages/pic20_R.jpg" width="480" height="360"><h3>江戸時代から<br>師走に賑やかに<br>嶋原の太夫さんたちは<br>お餅つきをしてました</h3></div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
<div data-role="page" id="game" data-theme="z">
<div data-role="header" data-theme="z">
<a href="#index" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>
<h1>お座敷遊び</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" >催事案内</a></li>
<li><a href="#page4" >菊川太夫</a></li>
<li><a href="#page5" >嶋原界隈</a></li>
</ul>
</div>
<div data-role="content" data-theme="z" >
<iframe src="game.html" frameborder="yes" scrolling="yes" id="gameiframe" width="320" height="350">
html5対応お座敷パズルゲームです
</iframe>
</div>
<div data-role="footer" data-theme="z">
<h4>置屋くし菊 <a href="tel:075-351-4908">075-351-4908</a></h4>
</div>
</div>
</body>
</html>
game.html (引用 「スマートフォンのためのHTML5アプリケーション開発ガイド」クジラ飛行より)
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport"
content="width=320, user-scalable=no" />
<style> * { margin:0; padding:0; position: absolute; }
#title {
background-color: blue; color: white;
padding:3px; font-size:14px;
width:314px; height: 14px;
}
#game_canvas {
top:20px; width:320px; height:320px;
}
</style>
</head><body>
<canvas id="game_canvas" width="320" height="320"></canvas>
<script type="text/javascript">
// 設定
var main_image = "spimages/game.jpg";
var panels = [];
var cell_w = 320 / 4;
var cell_h = 320 / 4;
var image_per = 1, image_w = 320; // 画像の拡大率と基本となる幅
var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; // 上下左右の座標
// Canvasのコンテキストを取得する
var canvas = document.getElementById("game_canvas");
var con = canvas.getContext("2d");
// 画像の読み込み
var image = new Image();
image.src = main_image;
image.onload = function() {
if (image.width < 320 || image.height < 320) {
var per_w = image.width / 320;
var per_h = image.height / 320;
image_per = per_h;
image_w = image.height;
if (per_w < per_h) {
image_per = per_w;
image_w = image.width;
}
}
con.drawImage(image, 0, 0, image_w, image_w, 0, 0, 320, 320);
setTimeout(shufflePanel, 9000);
}
// パネルをシャッフルする
function shufflePanel() {
// パネルを初期化
for (var i = 0; i < 16; i++) {
panels[i] = i;
}
// シャッフル
for (var j = 0; j < 16; j++) {
var r = Math.floor(Math.random() * 16);
var tmp = panels[r];
panels[r] = panels[j];
panels[j] = tmp;
}
drawPanels();
}
// パネルを番号に応じて描画する
function drawPanels() {
for (var i = 0; i < 16; i++) {
var no = panels[i];
var pcol = no % 4;
var prow = Math.floor(no / 4);
var px = pcol * cell_w;
var py = prow * cell_h;
var tx = (i % 4) * cell_w;
var ty = Math.floor(i / 4) * cell_h;
if (no == 15) {
// 穴を表示する
con.beginPath();
con.fillStyle = "#ffff66";
con.fillRect(tx, ty, cell_w, cell_h);
} else {
// 画像を切り取って表示する
con.drawImage(image,
px * image_per, py * image_per, image_w / 4, image_w / 4,
tx, ty, cell_w, cell_w);
}
// 枠を描画する
con.beginPath();
con.moveTo(tx + cell_w, ty);
con.lineTo(tx, ty);
con.lineTo(tx, ty + cell_h);
con.strokeStyle = "#999999";
con.stroke();
}
}
// ユーザーのタッチイベントに反応する
canvas.ontouchstart = function(e) { // for iPhone
if (e.touches.length > 0) {
var t = e.touches[0];
checkPanelXY(t.clientX, t.clientY);
}
e.preventDefault();
};
canvas.onmousedown = function(e) { // for PC
checkPanelXY(e.clientX, e.clientY);
};
function checkPanelXY(sx, sy) {
// タップされたパネルを取得する
var col = Math.floor(sx / cell_w);
var row = Math.floor((sy-20) / cell_h);
var no = row * 4 + col;
// 穴の上なら何もしない
if (panels[no] == 15) { return; }
// 穴に隣接しているか確認
for (var i = 0; i < pos_array.length; i++) {
var row2 = pos_array[i][0] + row;
var col2 = pos_array[i][1] + col;
var check = getPanelNo(row2, col2);
if (check == 15) {
swapPanel(row, col, row2, col2);
}
}
};
// 行(row)と列(col)からパネル番号を返す
function getPanelNo(row, col) {
// 範囲外なら -1 を返す
if (col < 0 || row < 0 || col >= 4 || row >= 4) {
return -1;
}
return panels[row * 4 + col];
}
// パネルを入れ替える
function swapPanel(row1, col1, row2, col2) {
var index1 = row1 * 4 + col1;
var index2 = row2 * 4 + col2;
var tmp = panels[index1];
panels[index1] = panels[index2];
panels[index2] = tmp;
drawPanels();
}
</script>
</body></html>
style.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body.ui-overlay-z {
width:100%;
overflow:hidden;
line-height:1;
margin:0;
background-image:url("./spimages/background.jpg");
background-size:100%;
font-family:sans-serif;
}
h1 {
font-size:1.5em;
color:#ffffff;
font-family:sans-serif;
text-align:center;
}
h2 {
font-size:1em;
color:#ffffff;
font-family:sans-serif;
}
h2 a {
font-size:1em;
color:#ffffff;
font-family:sans-serif;
text-decoration: none;
}
h3 {
font-size:0.875em;
color:#ffffff;
font-family:sans-serif;
}
h4 {
font-size:0.75em;
color:#ffffff;
font-family:sans-serif;
text-align:center;
}
h4 a {
color:#FC0;
text-decoration: none;
}
p {
font-size:1.5em;
line-height: normal;
padding-top:10px;
}
ul {
list-style:none;
padding:0;
}
li {
padding:0;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 100%;
height: auto;
}
#gameiframe {
display: block;
margin-left:0;
text-align: center;
width:320;
height: 350;
}
/* .ui-header共通-------------------*/
.ui-header .ui-title {
top:0;
margin-left: 15%;
margin-right: 15%;
}
.ui-header {
background-color:#000000;
}
.ui-page .ui-page-theme-z .ui-header .ui-bar-z {
background-size:100% 170px;
height:170px;
z-index:1;
}
.ui-page .ui-page-theme-z .ui-title h1 a {
font-weight:normal;
margin:0 auto;
}
.ui-page .ui-page-theme-z .ui-header h2 {
font-weight:normal;
margin:0 auto;
}
/* #index-------------------*/
.top {
padding-top: 0px;
width:100%;
}
.top img {
max-width: 100%;
height: auto;
}
#index.ui-page .ui-page-theme-z .ui-header {
background-image:url("./spimages/header-background-top.jpg");
-webkit-background-size:100% 240px;
background-size:100% 240px;
max-width: 100%;
height: auto;
}
.ui-page-theme-z .ui-listview {
padding:0px;
margin-top:0px;
margin-left:8%;
margin-right:20%;
margin-bottom:0px;
}
.ui-page-theme-z .ui-listview .ui-li-top {
height:40px;
font-weight:normal;
display:block;
}
.ui-page-theme-z .ui-listview .ui-li-top a {
position:absolute;
top: 5px;
font-size:14px;
color:white;
text-shadow:1px 0 1px rgba(0,0,0,0.3);
text-decoration:none;
padding-left: 20%;
border: none;
font-weight:normal;
display:block;
width: 80%;
}
.ui-page-theme-z .ui-listview .ui-li-top:nth-of-type(1) a {
border-radius:8px;
background:#95be66;
background: -webkit-gradient(linear, left top, left bottom, from(#95ce53), to(#6aa427));
}
.ui-page-theme-z .ui-listview .ui-li-top:nth-of-type(2) a {
border-radius:8px;
background:#b0ba63;
background: -webkit-gradient(linear, left top, left bottom, from(#bece5e), to(#869412));
}
.ui-page-theme-z .ui-listview .ui-li-top:nth-of-type(3) a {
border-radius:8px;
background:#bfa65c;
background: -webkit-gradient(linear, left top, left bottom, from(#c0a34b), to(#a07e15));
}
.ui-page-theme-z .ui-listview .ui-li-top:nth-of-type(4) a {
border-radius:8px;
background:#bf8a5c;
background: -webkit-gradient(linear, left top, left bottom, from(#bf8553), to(#a0500b));
}
.ui-page-theme-z .ui-listview .ui-li-top:nth-of-type(5) a {
border-radius:8px;
background:#a18c70;
background: -webkit-gradient(linear, left top, left bottom, from(#a18c70), to(#6c4008));
}
/*
.ui-li サブナビ
-------------------*/
.ui-block-a a {
background-color:#95be66;
color:white;
border:none;
}
.ui-block-b a {
background-color:#bfa65c;
color:white;
border:none;
}
.ui-block-c a {
background-color:#bf8a5c;
color:white;
border:none;
}
/*
.ui-content
-------------------*/
.ui-page .ui-page-theme-z .ui-content p {
color:#ffffff;
font-family:sans-serif;
text-align:center;
font-size:1em;
}
.ui-page .ui-page-theme-z .ui-content p img {
border:solid 3px #ae9f59;
margin:5px;
}
/* #page-------------------*/
#page2.ui-page .ui-content .ui-listview-inset {
padding:0px;
margin-top:0px;
margin-left:10%;
margin-right:7%;
margin-bottom:0px;
}
#page2.ui-page .ui-content .ui-listview-inset .ui-listview p {
padding:20px;
line-height: normal;
}
#page2.ui-page .ui-content p {
font-size:1em;
}
#page2.ui-page .ui-content h3 {
font-size:1em;
text-align:center;
line-height: 150%;
padding-top:10px;
padding-bottom:0px;
}
#page5.ui-page .ui-content p {
font-size:1em;
}
#page5.ui-page .ui-content h3 a {
font-size:1em;
center;
color:#ffffff;
padding-left:40%;
}
#page6.ui-page .ui-content h3 {
text-align:center;
line-height: 150%;
}
#page7.ui-page .ui-content h2 {
text-align:center;
padding-top:50px;
padding-bottom:40px;
}
#page8.ui-page .ui-content h3 {
text-align:center;
padding-top:20px;
line-height: 150%;
}
/* .footer-------------------*/
.ui-page-theme-z .ui-footer {
background-color:#000000;
background-size:100%;
}
.ui-page-theme-z .ui-footer p {
margin-top:0;
color:#daca1a;
text-align:center;
}
/* テキストを省略せずに表示する */
.ui-footer .ui-title, .ui-btn-inner, .ui-li-heading, .ui-li .ui-btn-text a.ui-link-inherit, .ui-li-desc, p {
overflow: visible;
}
/* 催事地図-------------------*/
#map {
width: 100%;
height: 300px;
border: 8px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 壬生地図-------------------*/
#mmap {
width: 100%;
height: 300px;
border: 8px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
